Tag Helper para área de texto

Para entradas de texto en general, HTML ofrece dos tipos de elementos: El control Input, que maneja todo tipo de entradas, desde el tipo "text" genérico, hasta los más exóticos radio y check buttons. y mientras el tipo "text" es bueno para entradas de texto cortas y de una línea, no está hecho para textos mas largos. Para este propósito tenemos los elementos Textarea. Generalmente luce como una entrada de texto normal, pero puede contener múltiples líneas y por defecto viene con soporte para barras de desplazamiento. ASP.NET Core tiene un "Tag Helper" para áreas de texto, tal como para el elemento Input, veamos esto.

La propiedad "for"

Tal como varios de los otros "Tag Helpers", la conexión con el Modelo es creado con la propiedad "for", y como cualquier otra propiedad de "Tag Helper", requiere un prefijo. Este prefijo es usualmente "asp", a menos que especifiques algo distinto. Un "Tag Helper" para areas de texto en su forma simple, se vería así:

<textarea asp-for="Description"></textarea>

Con esto tendrás un área de texto básica - a continuación el código HTML resultante:

<textarea id="Description" name="Description"></textarea>

Como no se ha especificado tamaño, éste será decidido por el navegador. Si quieres un mayor control sobre esto, y probablemente así sea, necesitaras usar propiedades HTML adecuadas - ya sea "cols" y "rows" o por medio de la propiedad "Style" usando CSS. Aquí un ejemplo de ambos - fíjate lo fácil que es mezclar el atributo de "Tag Helper" (for) con los atributos regulares de HTML:

<textarea asp-for="Description" cols="25" rows="3"></textarea>

<textarea asp-for="Description" style="height: 40px; width: 200px;"></textarea>

Por supuesto existen más opciones de estilo usando CSS, pero eso es tema para otro tutorial.

Controlando el largo máximo y mínimo

Ambos elementos HTML, Input y Textarea, permiten especificar el atributo maxlength, para controlar la cantidad máxima de caracteres permitidas en el elemento. Sin embargo, cuando se usan "Tag Helpers" no hay necesidad de especificar esto - en su lugar, se definen directamente en el Modelo. Esto permitirá definirlo en un solo lugar, para ser usados donde sea que uses esta propiedad, incluyendo validaciones antes de almacenar en una base de datos, etc. He aquí un ejemplo de la clase Movie donde se define un largo máximo para la propiedad "Description":

public class Movie
{
    [MaxLength(50)]
    public string Title { get; set; }

    public DateTime ReleaseDate { get; set; }

    [MaxLength(250)]
    public string Description { get; set; }
}

Esas anotaciones de datos son ahora usadas cuando se genera el HTML para tu Modelo - el siguiente código basado en "Tag Helpers" usará automáticamente la anotación de datos MaxLength. Ejemplo:

<input asp-for="Title" /><br />
<textarea asp-for="Description"></textarea>

y su resultado:

<input type="text" data-val="true" data-val-maxlength="The field Title must be a string or array type with a maximum length of &#x27;50&#x27;." data-val-maxlength-max="50" id="Title" maxlength="50" name="Title" value="" /><br />
<textarea data-val="true" data-val-maxlength="The field Description must be a string or array type with a maximum length of &#x27;250&#x27;." data-val-maxlength-max="250" id="Description" maxlength="250" name="Description">

Los atributos maxlength son agregados al código, pero además de eso, atributos de dato son generados para apoyar la Validacion del Modelo por el lado del Cliente. Si pruebas este formulario simple en un navegador, veras que ya no es posible ingresar más caracteres de los especificados en el atributo maxlength.

Y que sobre los largos mínimos? Bueno, eso no es realmente parte de la especificación HTML, así que no hay atributos relevantes con los que el navegador pueda trabajar. sin embargo, aún es relevante el especificarlos en el Modelo, especialmente si se usa Validación de Modelo:

public class Movie
{
    [MinLength(2)]
    [MaxLength(50)]
    public string Title { get; set; }
    public DateTime ReleaseDate { get; set; }

    [MinLength(10)]
    [MaxLength(250)]
    public string Description { get; set; }
}

El resultado te mostrará que solo el largo máximo es directamente soportado por la especificación HTML - el largo mínimo solo es mostrado como atributo de datos, para ser usado en la Validación de modelo por el lado del Cliente:

<input type="text" 
    data-val="true" 
    data-val-maxlength="The field Title must be a string or array type with a maximum length of &#x27;50&#x27;." 
    data-val-maxlength-max="50" 
    data-val-minlength="The field Title must be a string or array type with a minimum length of &#x27;2&#x27;." 
    data-val-minlength-min="2" 
    id="Title" 
    maxlength="50" 
    name="Title" 
    value="" /><br />
<textarea data-val="true" 
    data-val-maxlength="The field Description must be a string or array type with a maximum length of &#x27;250&#x27;." 
    data-val-maxlength-max="250" 
    data-val-minlength="The field Description must be a string or array type with a minimum length of &#x27;10&#x27;." 
    data-val-minlength-min="10" 
    id="Description" 
    maxlength="250" 
    name="Description">

Sumario

Tal como el "Tag Helper" para el elemento Input, el "Tag Helper" para área de texto facilita crear conexiones fuertes entre el Modelo y las áreas de texto que necesites en tus Vistas.