How we will generate TextArea control using HtmlHelper in razor view?

Question

Nishi Tiwari · Answer

This HtmlHelper class includes the two extension methods to generate a multiline <textarea> element in the razor view that is TextArea() and TextAreaFor() by default, it creates textarea with rows=2 and cols=20.

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

Example of Student Model

public class Student

{

    public int StudentId { get; set; }

    [Display(Name="Name")]

    public string StudentName { get; set; }

    public string Description { get; set; }

}

TextArea()

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

TextArea() method Signature

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

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

Example of 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 given above example, the first parameter is the "Description" property of the Student model class which will be set as a name & id of textarea, the second parameter is a value that displays in a textarea, and the third parameter will be set as a class attribute. The HTML attributes parameter is an object type, so it can be anonymous object and attributes name will be its properties starting with @ symbol.

Example of 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>

This above example would generate elements as shown given below.

TextAreaFor

The TextAreaFor helper method is a strongly typed extension method, it generates a multiline <textarea> element for the property in the model object specified using a lambda expression. This TextAreaFor method binds a specified model object property to the Textarea element and 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)

Example of 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>

The given above example, the first parameter in TextAreaFor() method is a lambda expression which specifies the model property to be bound with the textarea element and it generates <textarea> element with id & name set to property name – Description and the value of textarea will be set to the value of a Description property.

forum

How we will generate TextArea control using HtmlHelper in razor view?

Can you answer this question?

1 Answers