Hasta ahora en ASP.NET MVC hemos contado con HTML helpers, los cuales son elementos importantes a la hora de crear nuestras vistas, permitiéndonos generar el código HTML de manera dinámica y relativamente sencilla. Sin embargo, digamos que a veces el código tal vez no era lo suficientemente “elegante” al terminarse mezclando el markup HTML con el código de los helpers.  Una de las novedades introducidas en ASP.NET MVC Core son los Tag Helpers para Razor. Vamos a ver a continuación en qué consiste esta novedad.

Pues bien, los Tag Helpers son unos nuevos componentes que también nos van a permitir generar código HTML desde el servidor, pero con algunas diferencias notables con los anteriores HTML Helpers, como ser más “amigables” con el HTML para así evitar esa mezcla de código HTML y C# mencionada en el párrafo anterior, así como también tienen un soporte de Intellisense mucho más completo que permite a los desarrolladores ser más productivos.

Entonces al entender un poco más el concepto, veamos las diferencias en el código. Anteriormente podíamos tener un HTML Helper como este:

@Html.ActionLink("Create New""Create")

Pues bien, lo mismo pero con Tag Helpers vendría siendo así:

<a asp-action="Create">Create New</a>

Lo que vemos es que tenemos un elemento HTML <a>, pero en este caso con un atributo asp-action que indica la acción de un controlador MVC a la cual se refiere el link. Este mismo viene siendo un parámetro del anterior HTML Helper. Analiza a continuación las diferencias entre el código usado para un formulario completo.

Con HTML Helpers:

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Product</h4>
        <hr />
        @Html.ValidationSummary(true""new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, ""new { @class = "text-danger" })
            </div>
        </div>
 
        <div class="form-group">
            @Html.LabelFor(model => model.Quantity, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Quantity, ""new { @class = "text-danger" })
            </div>
        </div>
 
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

Y ahora veamos el mismo formulario con Tag Helpers.

<form asp-action="Create">
    <div class="form-horizontal">
        <h4>Product</h4>
        <hr />
        <div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Name" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger" />
            </div>
        </div>
        <div class="form-group">
            <label asp-for="Quantity" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                <input asp-for="Quantity" class="form-control" />
                <span asp-validation-for="Quantity" class="text-danger" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>

¿Qué tal se ve ahora? Mucho más sencillo y legible en mí opinión. ¿No crees?

Lo que podemos destacar es que todo atributo dentro de una etiqueta que comience por el prefijo asp- corresponde a un Tag Helper. También podemos ver que Visual Studio resalta en un color diferente los elementos que contienen Tag Helpers y el soporte a Intellisense mencionado anteriormente.

mvccoretaghelper01

 

Para asegurarnos que podemos usar Tag Helpers en un proyecto ASP.NET MVC Core debemos tener en cuenta dos condiciones. La primera es tener configurada la dependencia con la librería “Microsoft.AspNet.Mvc.TagHelpers” en el archivo project.json

mvccoretaghelper02

La segunda condición es tener agregada la referencia a la librería para la vista. Esto lo hacemos mediante el uso de la directiva addHelperTag, e idealmente la podemos agregar en el archivo _ViewImports.cshtml, con forma que la referencia será para todas las vistas que tenga el proyecto.

mvccoretaghelper03

Bien, espero que con este post hayas entendido el concepto de los Tag Helpers. Te invito a leer la documentación oficial de ASP.NET Core, donde puedes encontrar más información y detalles sobre todo lo relacionado con Tag Helpers. También hay disponible en GitHub una solución con ejemplos de Tag Helpers con bootstrap.

¡Hasta una próxima!