Back to: ASP.NET Core Tutorials For Beginners and Professionals
TextArea HTML Helper in ASP.NET Core MVC
In this article, I am going to discuss TextArea HTML Helper Method in ASP.NET Core MVC Application with Examples. Please read our previous article, where we discussed the TextBox HTML Helper in ASP.NET Core MVC Application.
How to Create TexArea using HTML Helper in ASP.NET Core MVC Application?
To create TextArea using the HTML Helper in the ASP.NET Core MVC application, we need to use the TextArea Helper methods. The IHtmlHelper class provides two extension methods to generate the textarea, i.e., multiline textbox in a razor view: They are TextArea() and TextAreaFor().
The TextArea HTML Helper in ASP.NET Core MVC is used to generate an HTML <textarea> element for capturing multi-line text input from users. It’s commonly used for capturing longer pieces of text, such as comments, descriptions, or messages. Like other HTML Helpers, the TextArea HTML Helper supports model binding, simplifying associating the input with a model property.
TextArea() HTML Helper Method in ASP.NET Core MVC:
The Html.TextArea() method creates an input HTML element of textarea with a specified name, value, and HTML attributes. The TextArea() HTML Helper method is a loosely typed helper method because the name parameter is a string.
The name parameter can also be the name of a model object’s property. It binds the specified property with the textarea. As a result, it automatically displays that property value within the textarea. There are 4 overloaded versions available for TextArea() HTML Helper Method in ASP.NET Core MVC, as shown in the below image.
Parameters:
- htmlHelper: The HTML helper instance that this method extends.
- expression: Expression name relative to the current model.
- value: If non-null, value to include in the element.
- htmlAttributes: An object that contains the HTML attributes for the element.
Returns: Returns the IHtmlContent element with the specified textarea element by using the specified HTML helper, the name of the form field, the text content, the number of rows and columns, and the specified HTML attributes.
Example to Understand TextArea HTML Helper Method in ASP.NET Core MVC
Let’s first modify the Employee Model as shown below.
namespace HTML_HELPER.Models
{
public class Employee
{
public int EmployeeId { get; set; }
public string? EmployeeName { get; set; }
public string? Password { get; set; }
public string? Gender { get; set; }
public string? City { get; set; }
public decimal Salary { get; set; }
public string? Address { get; set; }
}
}
Modify the Home Controller as shown below:
using HTML_HELPER.Models;
using Microsoft.AspNetCore.Mvc;
namespace HTML_HELPER.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
Employee emp = new Employee()
{
EmployeeId = 1,
Address = "Andheri, Sakinaka, Mumbai, 400097, Maharashtra, India"
};
return View(emp);
}
}
}
Modify the Index View:
Copy and paste the following code into the Index view
@model HTML_HELPER.Models.Employee
@Html.TextArea("Address", null, new { @class = "form-control" })
If you inspect the text area, then you will see that it will produce the following HTML
<textarea class=”form-control” id=”Address” name=”Address”>Andheri, Sakinaka, Mumbai, 400097, Maharashtra, India</textarea>
In the above example, the first parameter is the “Address” property of the Employee model class, which will be set as the name and id of the textarea. The second parameter is the value to display in the textarea, which is null in the above example because the TextArea() method will automatically display a value of the Address property in the textarea. The third parameter will be set as a class attribute. The HtmlAttributes parameter is an object type, so that it will be an anonymous object, and the attributes name will be its properties starting with @ symbol.
We can also specify any name for the textarea. However, it will not be bound to a model.
@Html.TextArea("MyTextArea", "This is value", new { @class = "form-control" })
It will produce the following HTML
<textarea class=”form-control” id=”MyTextArea” name=”MyTextArea”>This is value</textarea>
TextAreaFor() HTML Helper Method in ASP.NET Core MVC:
The TextAreaFor() HTML Helper Method is a strongly typed extension method. It generates a text area input element. We need to specify the name using a lambda expression. The TextAreaFor() HTML Helper Method binds that specified model object property to the textarea element. So, it automatically displays that model property value within the textarea. There are 2 overloaded versions available for TextAreaFor() HTML Helper Method in ASP.NET core MVC as shown in the below image.
Parameters:
- htmlHelper: The HTML helper instance that this method extends.
- expression: An expression that identifies the object that contains the properties to render. An expression to be evaluated against the current model.
- htmlAttributes: An object that contains the HTML attributes for the element
Type parameters:
- TModel: The type of the model.
- TProperty: The type of property.
Returns: Returns an IHtmlContent containing the textarea element.
Example to Understand TextAreaFor HTML Helper Method in ASP.NET Core MVC:
Copy and paste the following code into the index view
@model HTML_HELPER.Models.Employee
@Html.TextAreaFor(m => m.Address, new { @class = "form-control" })
It will produce the following HTML
<textarea class=”form-control” id=”Address” name=”Address”>Andheri, Sakinaka, Mumbai, 400097, Maharashtra, India</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. In our example, we have specified the Address property. So, it generates the input type <textarea> element with id and name property set to the property name Address. The value of textarea will be set to the value of the Address property.
Using the TextArea HTML Helper, you can simplify creating textarea input fields in your ASP.NET Core MVC views. It ensures that your textarea inputs are properly associated with model properties, supports model binding, handles validation, and provides consistency in your form elements.
What are the Differences Between Html.TextArea and Html.TextAreaFor in ASP.NET Core MVC application?
In ASP.NET Core MVC, both Html.TextArea and Html.TextAreaFor is the HTML Helper method used to generate HTML <textarea> elements for capturing user-generated multi-line text input. They serve similar purposes, but there are differences in how they are used and the scenarios in which they are suitable. Let’s compare Html.TextArea and Html.TextAreaFor in the context of ASP.NET Core MVC:
Html.TextArea:
The Html.TextArea method is a basic HTML Helper that directly generates a <textarea> element with specified content and attributes. It’s used when you want to create a <textarea> input without the need for model binding. You manually specify the content, rows, columns, and other attributes of the <textarea>.
Example usage of Html.TextArea:
@Html.TextArea("Address", "Default Address", 4, 40, new { @class = "form-control" })
Html.TextAreaFor:
The Html.TextAreaFor method is a more advanced HTML Helper that is designed to work with model binding. It generates an <textarea> element associated with a property of your model. This method is useful when you want to create an <textarea> input field that is automatically linked to a property in your model, facilitating data binding during form submission.
Example usage of Html.TextAreaFor with model binding:
@Html.TextAreaFor(m => m.Address, new { @class = "form-control", rows = 4, cols = 40 })
Key Differences Between Html.TextArea and Html.TextAreaFor:
Model Binding:
- Html.TextArea: This does not provide automatic model binding. You need to manually retrieve the content of the <textarea> from the Request.Form collection during form submission.
- Html.TextAreaFor: Provides automatic model binding. The content of the <textarea> will be bound to the corresponding property in the model when the form is submitted.
Strongly Typed:
- Html.TextArea: Not strongly typed. You specify the name, content, and other attributes of the <textarea> as parameters, which can lead to potential naming conflicts and mismatched names during form submission.
- Html.TextAreaFor: Strongly typed. The <textarea> is associated with a property expression, ensuring accurate model binding.
Code Refactoring and Safety:
- Html.TextArea: This can lead to runtime errors if the name and content of the <textarea> do not match the expected values. Prone to typos and naming conflicts.
- Html.TextAreaFor: Reduces the chance of runtime errors, as the <textarea> attributes and content are generated from the property expression.
Validation:
- Html.TextArea: Does not inherently handle model validation attributes.
- Html.TextAreaFor: Automatically renders validation attributes based on model validation attributes (e.g., [Required]).
Code Maintenance and Readability:
- Html.TextArea: More manual and less readable, especially when dealing with complex views and models.
- Html.TextAreaFor: More readable and maintainable, especially when working with strongly typed views and models.
The Html.TextAreaFor is the preferred choice in ASP.NET Core MVC when you’re working with models and want to leverage model binding, automatic validation, and cleaner code. Html.TextArea can be used when you need more manual control over <textarea> generation and don’t require the benefits of model binding.
In the next article, I am going to discuss How to Generate Drop Down List using HTML Helper in ASP.NET Core MVC Application. In this article, I explain How to Create a Text Area using HTML Helper Methods in the ASP.NET Core MVC application. I hope you enjoy this How to Generate Text Area using the HTML Helper Methods in ASP.NET Core MVC article.
