Incluyendo una etiqueta de anclaje en un ASP.NET MVC Html.ActionLink

151

En ASP.NET MVC, intento crear un enlace que incluya una etiqueta de anclaje (es decir, dirigir al usuario a una página y a una sección específica de la página).

La URL que intento crear debería tener el siguiente aspecto:

<a href="/category/subcategory/1#section12">Title for a section on the page</a>

Mi enrutamiento está configurado con el estándar:

routes.MapRoute("Default", "{controller}/{action}/{categoryid}"); 

La sintaxis del enlace de acción que estoy usando es:

<%foreach (Category parent in ViewData.Model) { %>
<h3><%=parent.Name %></h3>
<ul>
<%foreach (Category child in parent.SubCategories) { %>
    <li><%=Html.ActionLink<CategoryController>(x => x.Subcategory(parent.ID), child.Name) %></li>
<%} %>
</ul>
<%} %>

Mi método de controlador es el siguiente:

public ActionResult Subcategory(int categoryID)
{
   //return itemList

   return View(itemList);
}

Lo anterior devuelve correctamente una URL de la siguiente manera:

<a href="/category/subcategory/1">Title for a section on the page</a>

No puedo entender cómo agregar la parte # section12 . La palabra "sección" es solo la convención que estoy usando para dividir las secciones de la página, y el 12 es el ID de la subcategoría, es decir, child.ID.

¿Cómo puedo hacer esto?

dp.
fuente

Respuestas:

97

Probablemente construiría el enlace manualmente, así:

<a href="<%=Url.Action("Subcategory", "Category", new { categoryID = parent.ID }) %>#section12">link text</a>
LorenzCK
fuente
20
Realmente debería usar las sobrecargas para ActionLink como lo describe @Brad Wilson.
mattruma
18
@mattruma lo siento, no estoy de acuerdo. BESO. ¿Por qué tener un miembro lleno de parámetros, algunos de los cuales se dejan como nulos, cuando simplemente puede indicarlo explícitamente? Cualquiera puede ver lo que significa lo anterior mediante el cual la respuesta de Brad es enrevesada y requiere que profundices en intellisense. Demasiados parámetros es un anti patrón reconocido. C2.com/cgi/wiki?TooManyParameters
Ed Blackburn
2
Estoy de acuerdo. Ambos métodos funcionan, pero dado que la forma en que se especifican los fragmentos en las URL no va a cambiar en el futuro cercano, creo que esta forma es más legible y más clara en su intención. Si es necesario, aún puede extender el objeto Urlu Htmlcon un método personalizado que incluye una forma simple de agregar una cadena de fragmentos.
LorenzCK
282

Hay sobrecargas de ActionLink que toman un parámetro de fragmento . Al pasar la "sección 12" como su fragmento, obtendrá el comportamiento que busca.

Por ejemplo, llamando al método LinkExtensions.ActionLink (HtmlHelper, String, String, String, String, String, String, Object, Object) :

<%= Html.ActionLink("Link Text", "Action", "Controller", null, null, "section12-the-anchor", new { categoryid = "blah"}, null) %>
Brad Wilson
fuente
1
¿Son estas sobrecargas parte de una biblioteca de extensiones? Parece que no los entiendo.
Granada
Hay dos: ActionLink de cadena estática pública (este HtmlHelper htmlHelper, cadena linkText, cadena actionName, cadena controllerName, protocolo de cadena, cadena hostName, fragmento de cadena, objeto routeValues, objeto htmlAttributes); ActionLink de cadena estática pública (este HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, string protocolName, string hostName, string fragment, RouteValueDictionary routeValues, IDictionary <string, object> htmlAttributes);
Brad Wilson el
11
Esta debería ser la respuesta.
Rubens Mariuzzo
1
Las sobrecargas de Html.ActionLink que permiten la especificación de un ancla pasando el fragmento, lo obligan a pasar el controlador por su nombre. Eso no me gusta Si el nombre del controlador es incorrecto, se producirán excepciones en tiempo de ejecución, en lugar de errores de compilación.
R. Schreurs
1
@RobertMcKee si el texto de su enlace es más que solo texto, entonces Html.ActionLink()no funcionaría en ningún escenario: necesitaría usar la [email protected]()sintaxis de estilo.
Katstevens
15

No recuerdo en qué versión de ASP.NET MVC (ASP.NET MVC 3+ creo) / Razor se introdujo la declaración de etiqueta de parámetros o como se llame (parámetro: x), pero para mí esta es definitivamente la forma correcta de construir un enlace con un ancla en ASP.NET MVC.

@Html.ActionLink("Some link text", "MyAction", "MyController", protocol: null, hostName: null, fragment: "MyAnchor", routeValues: null, htmlAttributes: null)

Ni siquiera el argumento antipatrón de Ed Blackburns de esta respuesta puede competir con eso.

El gato con botas
fuente
1
Literalmente esto me salvó la vida. Atribuyendo su publicación como mi solución aquí stackoverflow.com/questions/32420028/… .
Mateo
11

Simplemente lo hice así:

<a href="@Url.Action("Index","Home")#features">Features</a>
Zapnologica
fuente
1

Aquí está el ejemplo de la vida real.

@Html.Grid(Model).Columns(columns =>
    {
           columns.Add()
                   .Encoded(false)
                   .Sanitized(false)
                   .SetWidth(10)
                   .Titled(string.Empty)
                   .RenderValueAs(x => @Html.ActionLink("Edit", "UserDetails", "Membership", null, null, "discount", new { @id = @x.Id }, new { @target = "_blank" }));

  }).WithPaging(200).EmptyText("There Are No Items To Display")

Y la página de destino tiene TABS

<ul id="myTab" class="nav nav-tabs" role="tablist">

        <li class="active"><a href="#discount" role="tab" data-toggle="tab">Discount</a></li>
    </ul>
Desarrollador
fuente
0

Mi solución funcionará si aplica el ActionFilter al método de acción Subcategoría, siempre y cuando siempre desee redirigir al usuario al mismo marcador:

http://spikehd.blogspot.com/2012/01/mvc3-redirect-action-to-html-bookmark.html

Modifica el búfer HTML y genera una pequeña pieza de javascript para indicar al navegador que agregue el marcador.

¡Puede modificar el javascript para desplazarse manualmente, en lugar de usar un marcador en la URL, por supuesto!

Espero eso ayude :)

Spikeh
fuente
0

Lo hice y funciona para redirigir a otra vista, creo que si agrega el #sectionLink después, funcionará

<a class="btn yellow" href="/users/Create/@Model.Id" target="_blank">
                                        Add As User
                                    </a>
Ahmed Samir
fuente