Tag Helper para Input

Hablamos acerca del Tag Helper para Form en un artículo previo, pero todos los formularios deben contener algún elemento o control. Uno bastante común es el control INPUT, que puede ser de varios tipos para soportar distintas entradas. El tipo mas usado es el control de entrada de texto, el que será representado como un caja de texto con una línea simple. Sin embargo, la etiqueta HTML input puede hacer mucho mas que aceptar un simple texto - demostrare eso en este artículo.

El atributo "for"

Mientras algunos "Tag Helpers" tienen varios atributos disponibles para distintos propósitos, el "Tag helper" para Input solo tiene uno: El atributo asp-for. Por otra parte, este atributo es extremadamente poderoso! te permitirá enlazar el control Input a una propiedad específica del Modelo. Como ejemplo, piensa que tienes un modelo llamado Movie con una propiedad llamada Title (string). podrías crear un campo de entrada fácilmente, usando el atributo asp-for:

<input asp-for="Title" />

"ASP.NET MVC" lo convertirá automáticamente en una etiqueta INPUT apropiada, de la siguiente forma:

<input type="text" id="Title" name="Title" value="The Godfather">

Fíjate como un simple atributo del "Tag Helper" que hemos especificado (asp-for) fue automáticamente convertido en cuatro atributos HTML (type, id, name y value). Esto puede ahorrarte algún tiempo cuando creas Formularios.

Usando tipos de dato

El valor para los atributos name e id proviene directamente del nombre de la propiedad Title, mientras que value naturalmente viene del valor de la propiedad Title. Pero que del atributo type? en realidad, el Framework .Net simplemente ve el tipo de dato de la propiedad y luego genera un tipo apropiado para este atributo HTML. En éste caso, porque la propiedad Title ha sido definida como string, el valor text es usado para el atributo type.

Usando anotaciones de datos

Sin embargo, una cadena puede ser muchas cosas - podría ser una dirección de correo electrónico, un número de teléfono (con guiones y/o espacios) o una contraseña. Todos estos ejemplos podrían definirse como una cadena, pero requieren un poco de atención adicional. Afortunadamente para nosotros, ASP.NET MVC nos permite especificar el propósito de un miembro con anotaciones de datos, y no solo para cadenas. Este es un ejemplo:

public class WebUser        
{        
    [Phone]        
    public string PhoneNumber { get; set; }        

    [EmailAddress]        
    public string MailAddress { get; set; }        

    [DataType(DataType.Password)]        
    public string Password { get; set; }        

    [DataType(DataType.Date)]        
    public DateTime Birthday { get; set; }        

    public bool IsActive { get; set; }
}

Hay dos tipos de anotaciones de datos que se han usado aquí para especificar el propósito de cada miembro: El tipo [Phone], donde la intension es descrita directamente en la anotación y [DataType], donde usamos la enumeración de DataType para especificar el propósito. Sin embargo, el resultado es el mismo. Fíjate además que se usó para strings, pero también para la propiedad Birthday. Por defecto, un tipo DateTime es mostrado como un campo de entrada que toma ambos valores una fecha y una hora. pero un cumpleaños es usualmente especificado solo como fecha. podemos anotar este requerimiento usando el valor DataType.Date.

Ahora podemos crear una Vista donde estas propiedades sean usadas, y por medio de "Tag Helpers", éstas propiedades serán entregadas con los tipos de entrada deseados, sin esfuerzo extra:

@model HelloMVCWorld.Models.WebUser  
<div>  
    <label asp-for="MailAddress"></label>  
    <input asp-for="MailAddress" />  
</div>  
<div>  
    <label asp-for="PhoneNumber"></label>  
    <input asp-for="PhoneNumber" />  
</div>  
<div>  
    <label asp-for="Password"></label>  
    <input asp-for="Password" />  
</div>  
<div>  
    <label asp-for="Birthday"></label>  
    <input asp-for="Birthday" />  
</div>
<div>
    <label asp-for="IsActive"></label>
    <input asp-for="IsActive" />
</div>

Los "Tag Helpers" convertirán esto en el siguiente código HTML:

<div>  
    <label for="MailAddress">MailAddress</label>  
    <input type="email" data-val="true" data-val-email="The MailAddress field is not a valid e-mail address." id="MailAddress" name="MailAddress" value="" />  
</div>  
<div>  
    <label for="PhoneNumber">PhoneNumber</label>  
    <input type="tel" data-val="true" data-val-phone="The PhoneNumber field is not a valid phone number." id="PhoneNumber" name="PhoneNumber" value="" />  
</div>  
<div>  
    <label for="Password">Password</label>  
    <input type="password" id="Password" name="Password" />  
</div>  
<div>  
    <label for="Birthday">Birthday</label>  
    <input type="date" data-val="true" data-val-required="The Birthday field is required." id="Birthday" name="Birthday" />  
</div>
<div>
    <label for="IsActive">IsActive</label>
    <input type="checkbox" data-val="true" data-val-required="The IsActive field is required." id="IsActive" name="IsActive" value="true" /><input name="IsActive" type="hidden" value="false" />
</div>

Las propiedades type son automáticamente llenadas con el valor apropiado de acuerdo a la especificación HTML ("tel", "phone", etc.). Además la propiedad IsActive es transformada automáticamente an un checkbox, incluso sin tener anotaciones de datos, por que es del tipo bool.

Sumario

El "Tag Helper" para el control Input puede acelerar el proceso de hacer formularios HTML, por muy complejos que sean, especialmente si se usa un modelo propiamente anotado.