Create TextArea in ASP.NET MVC

The HtmlHelper class includes two extension methods to render multi-line <textarea> HTML control in a razor view: TextArea() and TextAreaFor<TModel, TProperty>(). By default, it creates a textarea with rows=2 and cols=20.

We will use the following Student model class throughout this article.

public class Student
{
    public int StudentId { get; set; }
    [Display(Name="Name")]
    public string StudentName { get; set; }
    public string Description { get; set; }
}

Html.TextAreaFor()

The TextAreaFor<TModel, TProperty>() is the generic extension method that creates <textarea></textarea> control.

It is recommended to use the generic TextAreaFor<TModel, TProperty>() method, which is less error prons and performs fast.

public static MvcHtmlString TextAreaFor<TModel,TProperty> (this HtmlHelper<TModel>> htmlHelper, Expression<Func<TModel,TProperty>> expression, object htmlAttributes);

Visit docs.microsoft.com to know all the overloads of TextAreaFor().

The following example creates and binds the Description property to a textarea control in the MVC view.

@model Student

@Html.TextAreaFor(m => m.Description)  

<textarea cols="20" id="Description" name="Description" rows="2"></textarea>

The following example renders a textarea with the class attribute.

@model Student

@Html.TextAreaFor(m => m.Description, new { @class = "form-control" })  

In the above example, the first parameter m => m.Description is a lambda expression that specifies the model property to bind with the textarea element. The second parameter specifies the class attribute.

<textarea class="form-control" cols="20" id="Description" name="Description" rows="2"></textarea>

Html.TextArea()

The Html.TextArea() method creates a <textarea> HTML control with specified name, value and html attributes.

The TextArea() method is a loosely typed method because the name parameter is a string. The name parameter can be a property name of the model class.

@model Student

@Html.TextArea("Description", "This is dummy description.", new { @class = "form-control" })  

<textarea class="form-control" id="Description" name="Description" rows="2"cols="20">This is dummy description.</textarea>