Hola, anteriormente vimos como es posible personalizar las pantillas tanto para ASPNET MVC como para Web API, así que hoy vamos a ver como personalizar los helpers en MVC, para que cumplan mejor con lo que nuestra aplicación requiere y revisaremos par opciones para llevar a cabo dicha personalización.

Los helpers son una excelente característica cuando trabajamos con ASPNET MVC los cuales permiten generar un determinado HTML que pueda ser enlazado con una propiedad de una clase por ejemplo, sin embargo en algunas ocasiones puede ser necesario personalizar el HTML que es generado por algún determinado helper o crear uno nuevo.

Para iniciar, creamos un nuevo proyecto Web (para el ejemplo he seleccionado la plantilla en blanco y adicionado únicamente la referencia a MVC) y luego una sencilla clase que será el modelo:


public class Author 
{ 
    public int Id { get; set; } 

    public string Name { get; set; } 

    public string LastName { get; set; } 

    public string Bio { get; set; } 

    [DataType("Gender")] 
    public string Gender { get; set; } 
}

Ahora, creamos un controlador AuthorsController utilizando la plantilla que crea las acciones y las vistas usando Entity Framework, desde ahora solo vamos a trabajar con la vista Create.cshtml.

Los helpers generan el HTML basado en el tipo de dato del campo, por lo tanto vamos a personalizar la plantilla para el tipo cadena (string), para ello creamos una carpeta llamada EditorTemplates en la ruta Views/Shared, y allí agregamos una vista parcial llamada String.cshtml, el código de dicha vista es bastante sencillo:


@model string @Html.TextBox("", 
    ViewData.TemplateInfo.FormattedModelValue, htmlAttributes: new { @class = "form-control" })

En la vista anterior el primer parámetro hace referencia al nombre del campo, el segundo al y para no estar repitiendo la clase css asociada en cada helper, acá la dejamos centralizada, entonces pasamos de tener un helper:


@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })

a tener:


@Html.EditorFor(model => model.Name)

El helper ya no tiene la necesidad de referenciar/definir la clase css asociada.

Ahora vamos a ver otra posible forma de cambiar el HTML generado, en el modelo se ha definido una propiedad con el nombre Bio, dicha propiedad puede tener bastantes caracteres, por lo cual necesitamos hacer uso de una caja de texto multilinea, así que primero agregamos una nueva vista parcial con el nombre TextArea.cshtml dentro de EditorTemplates con el siguiente código:


@model string 
@Html.TextArea("", ViewData.TemplateInfo.FormattedModelValue.ToString(), 
    htmlAttributes: new { @class = "form-control", 
    rows = 10 })

Muy parecido al creado anteriormente, sin embargo hemos añadido la propiedad rows = 10 para que sea más alto el campo, ahora para que el helper EditorFor relacionado a la propiedad Bio haga uso de la plantilla creada, utilizamos una de las sobrecargas de dicho helper la cual permite establecer el nombre de la plantilla a usar, en este caso TextArea:


@Html.EditorFor(model => model.Bio, "TextArea")

Y para finalizar, otra forma para personalizar la plantilla a utilizar es definiendo un tipo de dato diferente en la propiedad, como en el caso de la propiedad Gender que se ha decorado con el atributo DataType(“Gender”) y creando una vista parcial llamada Gender.cshtml, el código de dicha vista parcial es:


@model string 
@{ 
    var options = new List() { "Male", "Female" }; 
} 
@Html.DropDownList("", new SelectList(options), 
    htmlAttributes: new { @class = "form-control" })

La vista anterior simplemente crea un combo para seleccionar el género con dos posibles valores.

Finalmente, la vista se ve correctamente:

customhelpers

Espero el post sea interesante y no te olvides de compartir!

Saludos!