The Textarea Tag Helper

For general text input, the HTML specification offers two types of elements: The Input element, which handles all kinds of input, from the generic "text" type to the more exotic radio and check buttons. And while the text input is great for short, singleline text input, it's not built for longer texts. For this purpose, we have the Textarea element. It generally looks like a normal text input element, but it can span multiple lines by default and comes with support for scrollbars - in other words, it's built for longer texts. ASP.NET Core comes with a nice Tag Helper for the Textarea, just like for the Input element, so let's look into it.

The for property

Just like several of the other Tag Helpers, the connection to the Model is created with the "for" property, and as with any other Tag Helper property, it requires a prefix. This prefix is usually "asp", unless you specifically change this. In other words, a Tag Helper enabled Textarea, in its most simple form, would look like this:

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

This will give you a very basic Textarea - the resulting HTML looks like this:

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

Since no size or anything else is specified, the rendered size will be decided by the browser. If you want more control over this, and you probably do, you will need to use the relevant HTML properties - either the old-school "cols" and "rows" or through the Style property using CSS. Here's an example of each - notice how easy it is to mix the Tag Helper attribute (for) with regular HTML attributes:

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

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

There are of course many more styling options using CSS, but that's a subject for another tutorial.

Controlling minimum and maximum lengths

Both the Input and the Textarea HTML elements allows you to specify a maxlength attribute, to control the maximum amount of characters allowed in the element. However, when using Tag Helpers, there's no need to specify this in the markup - instead, define it directly on the Model. This will allow you to only define it in one place, to be used anywhere you use this property, including validation before saving to a database etc. Here's an example of a Movie class where we define a MaxLength for the Description property:

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

    public DateTime ReleaseDate { get; set; }

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

These Data Annotations are now used when generating HTML for your Model - in other words, the following Tag Helper based markup will automatically use the MaxLength Data Annotations. Example:

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

And the result:

<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">

Notice how the maxlength attributes are added to the markup, but on top of that, data-attributes are generated to support Client-side Model Validation. If you test this simple FORM in a browser, you will see that it's no longer possible to input anymore characters than what the maxlength attributes specifies.

But what about minimum lengths? Well, that isn't really a part of the HTML specification, so there's no relevant attribute for the browser to work with. However, it's still relevant to specify on the Model, especially if you use Model Validation:

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; }
}

The rendered result will show you that only a maximum length is directly supported by the HTML specification - the minimum length is only rendered as a data attribute, to be used by client-side Model Validation:

<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">

Summary

Just like the Tag Helper for the Input element, the Textarea Tag Helper makes it easier to make a strong connection between the Model and the Textarea's you need in your Views.