Hace 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:
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!
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!
Enviar un nuevo comentario