MVC Topics
  1. Home
  2. ASP.NET MVC
  3. TextArea

ASP.NET MVC Tutorials

Create TextArea using HtmlHelper:

Learn how to generate TextArea control using HtmlHelper in razor view in this section.

HtmlHelper class includes two extension methods to generate a multi line <textarea> element in a razor view: TextArea() and TextAreaFor(). By default, it creates textarea with rows=2 and cols=20.

We will use the following Student model with the TextArea() and TextAreaFor() method.

Example: Student Model 

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

TextArea():

The Html.TextArea() method creates <textarea rows="2" cols="20" > element with specified name, value and html attributes.

TextArea() method Signature:

MvcHtmlString Html.TextArea(string name, string value, object htmlAttributes)

TextArea method has many overloads. Please visit MSDN to know all the overloads of TextArea method.

The TextArea() method is a loosely typed method because the name parameter is a string. The name parameter can be a property name of model object. It binds a specified property with the textarea. So it automatically displays a value of the model property in a textarea and visa-versa.

Example: Html.TextArea() in Razor View

@model Student

@Html.TextArea("Description", null, new { @class = "form-control" })
Html Result:

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

In the above example, the first parameter is the "Description" property of Student model class which will be set as a name & id of textarea. The second parameter is a value to display in a textarea, which is null in the above example because TextArea() method will automatically display a value of the Description property in the textarea. The third parameter will be set as class attribute. HtmlAttributes parameter is an object type, so it can be anonymous object and attributes name will be its properties starting with @ symbol.

You can also specify any name for the textarea. However, it will not be bound to a model.

Example: Html.TextArea() in Razor View

@Html.TextArea("myTextArea", "This is value", new { @class = "form-control" })
Html Result:

<textarea class="form-control" 
   cols="20" 
   id="myTextArea" 
   name="myTextArea" 
   rows="2">This is value</textarea>

The above example would generate input elements as shown below.

Output of TextArea() Helper method

TextAreaFor:

TextAreaFor helper method is a strongly typed extension method. It generates a multi line <textarea> element for the property in the model object specified using a lambda expression. TextAreaFor method binds a specified model object property to textarea element. So it automatically displays a value of the model property in a textarea and visa-versa.

TextBoxFor() method Signature:

MvcHtmlString TextAreaFor(<Expression<Func<TModel,TValue>> expression, object htmlAttributes)

Visit MSDN to know all the overloads of TextAreaFor().

Example: TextAreaFor() in Razor View

@model Student

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

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

In the above example, the first parameter in TextAreaFor() method is a lambda expression that specifies the model property to be bound with the textarea element. We have specified Description property in the above example. So, it generates <textarea> element with id & name set to property name - Description. The value of textarea will be set to the value of a Description property.

;