Hace unos días hablamos de los tag helpers, esa interesante novedad de MVC 6 destinada a mejorar la legibilidad de nuestras vistas. Comentamos los que traía de serie MVC, 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 servidorasp-route para especificar el nombre de la ruta.| Ruta (Startup.cs) | opt.MapRoute( |
| 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" |
| Html helper | @Html.ActionLink( |
| 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" |
| Html helper | @Html.ActionLink( |
| 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" |
| Html helper | @Html.ActionLink( |
| Ejemplo de resultado (ruta por defecto) |
<a href="/products/edit/18?categoryId=3&search=notebooks"> |
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ámetroasp-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" |
| Html helper | @Html.ActionLink("Home", "index", "home", |
| 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ámetroasp-host como sigue:| Tag helper | <a asp-controller="home" asp-action="index" |
| Html helper | @Html.ActionLink("Home", "index", "home", |
| 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ámetroasp-fragment:| Tag helper | <a asp-controller="home" asp-action="index" |
| Html helper | @Html.ActionLink("Home", "index", "home", |
| 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" |
| Html helper | @Html.ActionLink("Edit", "edit", "products", |
| Resultado (ruta por defecto) | <a id="mylink" class="productlink" |
¡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.
from Variable not found http://www.variablenotfound.com/2015/10/creacion-de-enlaces-con-tag-helpers-de.html
via IFTTT