w3resource

HtmlHelper - TextArea


In the previous tutorial, we learnt about TextBox HTML helper, and how they can be bounded to model data. In this tutorial, we will learn about TextArea as a HTMLHelper and how it can be used in the razor syntax.

Like we saw in the textbox HtmlHelper, HtmlHelper class has two methods for generating a multi-line <textarea> element in a razor view. These two methods are:

  • TextArea() and
  • TextAreaFor()

By default, both methods render textarea with rows=2 and cols=20.

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

Consider our Activity Model

public class Activity
{
    public int Id {get; set;}
    public string ActivityName {get; set;}
    public string Description {get; set;}
    public string Status {get; set;}
}

TextArea()

The Html.TextArea() method renders a <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 methods like every other method in C# can be overloaded. It is also a loosely typed method. The name parameter can be a property name of model object or just a string. When it is a model object, it binds the specified object property with the textarea. So, it automatically displays a value of the model property in a textarea and visa-versa.

//Demo: Html.TextArea() in Razor View
@Model ActivityTab.Models.Activity
@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 Activity model class which will be set as a name and id of the 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.

Since the textarea is loosely typed, you can also specify any name for the textarea. However, it will not be bound to a model, as shown in the demo below:

//Demo: Html.TextArea() in Razor View
@Html.TextArea("myTextArea", "This is a placeholder", new {@class = "form-control"})  
//Html Result:
<textarea class="form-control" 
            cols="20" 
            id="myTextArea" 
            name="myTextArea" 
            rows="2">This is a placeholder</textarea>

TextAreaFor

TextAreaFor helper method is a strongly typed 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. Just like every other methods, TextBoxFor can also be overloaded.

TextBoxFor() method Signature

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

//Demo: TextAreaFor() in Razor View
@Model ActivityTab.Models.Activity
@Html.TextAreaFor(a => a.Description, new {@class = "form-control" })  
Html Result:
<textarea class="form-control" 
            cols="20" 
            id="Description" 
            name="Description" 
            rows="2"></textarea>

In the above demo, 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 and name set to property name - Description. The value of textarea will be set to the value of a Description property.



Inviting useful, relevant, well-written and unique guest posts