Saltar al contenido

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript... y lo que venga ;)

17 años online

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web
ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript...

¡Microsoft MVP!
miércoles, 14 de octubre de 2015
ASP.NET CoreHace unos días hablamos de los tag helpers, esa interesante novedad de Core MVC  destinada a mejorar la legibilidad de nuestras vistas. Comentamos los que traía de serie el framework, y vimos por encima algunos ejemplos para hacernos una idea.

Hoy vamos a ver en profundidad uno de estos helpers, AnchorTagHelper, cuya misión es facilitarnos la creación de enlaces a controladores/acciones de nuestra aplicación. Para hacer más sencilla su comprensión, lo haremos mediante casos prácticos, y comparando cada ejemplo con la fórmulas que hemos usado tradicionalmente y que seguro conocéis, los helpers HTML.

<warning>ASP.NET aún se encuentra en desarrollo, por lo que detalles de lo que contemos por aquí aún podrían variar en la versión final</warning>

1. Enlace especificando controlador y acción

La sintaxis del tag helper permite codificar el hipervínculo con una etiqueta <a>, pero, en lugar de utilizar el atributo href para indicar el destino, utilizaremos los parámetros de servidor asp-controller y asp-action para especificar el controlador y acción, respectivamente. El valor del atributo href es calculado en servidor, y se emite en el resultado eliminando todo rastro de los parámetros del helper.

Tag helper <a asp-controller="Home" asp-action="Index">Link</a>
Html helper @Html.ActionLink("Link", "Index", "Home")
Resultado (ruta por defecto) <a href="/home/index">Link</a>

2. Enlace mediante ruta nombrada

Como en el caso de los helpers tradicionales, también es posible generar enlaces partiendo del nombre de una ruta presente en la tabla de rutas del sistema. En este caso, usamos el parámetro de servidor asp-route para especificar el nombre de la ruta.

Ruta (Startup.cs) opt.MapRoute(
      "profile",          // Route name
      "account/profile",  // Url
      new { controller = "Account",
            action = "Profile"
      }
);
Tag helper <a asp-route="profile">My profile</a>
Html helper @Html.RouteLink("My profile", "profile")
Resultado <a href="/account/profile">My profile</a>

3. Enlace con parámetros adicionales

En los ejemplos anteriores hemos visto cómo generar enlaces directos a acciones sin parámetros. Podemos añadir parámetros con cualquier nombre a la etiqueta utilizando el prefijo "asp-route-" seguido del nombre del parámetro.

Tag helper <a asp-controller="products" asp-action="edit"
   asp-route-id="18">Edit product</a>
Html helper @Html.ActionLink(
    "Edit product", "edit", "products", new { id = 18 }
)
Resultado (ruta por defecto) <a href="/products/edit/18">Edit product</a>

Como era de esperar, en los parámetros también podemos utilizar valores tomados del modelo o cualquier variable o expresión válida en el lado servidor utilizando la sintaxis habitual de Razor:

Tag helper <a asp-controller="products" asp-action="remove"
   asp-route-id="@Model.Id">Remove product</a>
Html helper @Html.ActionLink(
    "Remove product", "remove", "products",
    new { id = Model.Id }
)
Ejemplo de resultado
(ruta por defecto)
<a href="/products/remove/18">Remove product</a>

Y podemos incluir tantos parámetros como necesitemos:

Tag helper <a asp-controller="products" asp-action="edit"
   asp-route-id="@Model.Id"
   asp-route-categoryId="@Model.CategoryId" 
   asp-route-search="@Model.FromSearch">Edit</a>
Html helper @Html.ActionLink(
    "Edit", "edit", "products",
    new {
       id = Model.Id, 
       categoryId=Model.CategoryId, 
       search=Model.FromSearch 
    }
)
Ejemplo de resultado
(ruta por defecto)
<a href="/products/edit/18?categoryId=3&search=notebooks">
   Edit</a>

4. Enlace forzando el protocolo https

Por defecto se generarán enlaces relativos, por lo que el protocolo utilizado será el mismo que se haya indicado en la petición que está siendo procesado. Pero si queremos forzar un protocolo distinto, podemos hacerlo con el parámetro asp-protocol.

En este caso vemos la simplicidad y legibilidad con la que podemos indicar el protocolo de la dirección generada, sobre todo si lo comparamos con la complejidad de las interminables e ilegibles sobrecargas del helper ActionLink():

Tag helper <a asp-controller="home" asp-action="index"
   asp-protocol="https">Home</a>
Html helper @Html.ActionLink("Home", "index", "home", 
      "https", null, null, null, null)
Resultado (ruta por defecto) <a href="https://www.myserver.com/">Home</a >

El nombre del host generado, salvo que se indique lo contrario de la forma que veremos a continuación, será el mismo utilizado en la petición actual.

5. Enlace forzando el nombre del host

De la misma forma, podemos forzar el uso de un nombre de host distinto al utilizado en la petición actual utilizando el parámetro asp-host como sigue:

Tag helper
<a asp-controller="home" asp-action="index"
   asp-host="otherserver.com">Home</a>

Html helper
@Html.ActionLink("Home", "index", "home", 
      null, "otherserver.com", null, null, null)

Resultado (ruta por defecto) <a href="https://www.myserver.com/">Home</a >

El protocolo será el utilizado en la petición actual, salvo que indiquemos lo contrario con asp-protocol.

6. Enlace a un ancla (elemento con id) de la página

Si queremos ser muy específicos y dirigir el enlace hacia un elemento HTML concreto de la página destino, podemos añadir el identificador del mismo en el parámetro asp-fragment:

Tag helper
<a asp-controller="home" asp-action="index"
   asp-fragment="main">Home</a>

Html helper
@Html.ActionLink("Home", "index", "home",
      null, null, "main", null, null)

Resultado (ruta por defecto) <a href="/#main">Home</a>

Obviamente, estos tres últimos parámetros (asp-protocol, asp-host, y asp-fragment) pueden ser combinados para generar un enlace completo.

7. Enlace con atributos adicionales

¿Y qué ocurre si queremos introducir en nuestros links atributos adicionales, como identificadores, estilos, clases css o similares? Pues en este caso es donde los tag helpers muestran más claramente la superioridad de su sintaxis sobre los helpers tradicionales. Veámoslo con un ejemplo:

Tag helper <a asp-controller="products" asp-action="edit"
   asp-route-id="@Model.Id"
   id="mylink" class="productlink"
   style="font-weight: bold">Edit</a>
Html helper @Html.ActionLink("Edit", "edit", "products",
      new { id=Model.Id},
      new {
         id="mylink",
         @class="productlink",
         style="font-weight: bold"
      }
)
Resultado (ruta por defecto) <a id="mylink" class="productlink"
   style="font-weight: bold"
   href="/products/edit/18">Edit</a>

¡Y eso es todo! Espero que con estos ejemplos os quede claro su uso y veáis el potencial de esta nueva forma de codificar nuestras vistas, que tiene una pinta excelente :)

Publicado en Variable not found.

2 Comentarios:

Julio A dijo...

Gran post crack! Definitivamente es mucho mejor que usar los helpers, más claro, más sencillo, y como bien dices, en el último caso es mucho más evidente su facilidad, además, podemos aplicar los atributos data-* de forma mucho más clara!

Un saludo!

José María Aguilar dijo...

Muchas gracias, amigo!

Pues sí, la verdad es que se le ven bastantes ventajas. Y además, supongo que cuando la comunidad adopte esta forma de trabajar, se creará un interesante ecosistema de tag helpers que seguro nos ayudarán bastante en el desarrollo.

Saludos!