TextBox HTML Helper

« Previous Next »

TextBox HTML Helper

I will explore the TextBox HTML Helper in ASP.NET MVC and also demonstrate how to create a TextArea using HTML Helper. Before diving into this topic, I recommend reading our previous article, which covered the fundamentals of HTML Helpers in ASP.NET MVC. Throughout this discussion, we will cover the following key points.

How to Create TextBox using HTML Helper in MVC?

To create a TextBox using HTML Helper Method in the ASP.NET MVC application, we need to use the TextBox Helper method. In the ASP.NET MVC application, we can use two different types of TextBox Helper methods to generates a textbox in a view. Those two extension methods are TextBox() and TextBoxFor(). The TextBox() HTML Helper method is a loosely typed method whereas the TextBoxFor() HTML Helper method is a strongly typed method.

Let’s understand How to Create TextBox using HTML Helper :

Let's build an ASP.NET MVC 5 application named HTML_HELPER. Next, create a class file called Employee.cs inside the Models folder and insert the following code into it.


using System.ComponentModel.DataAnnotations;
namespace HTML_HELPER.Models
{
    public class Employee
    {
        public int EmployeeId { get; set; }
        [Display(Name = "Name")]
        public string EmployeeName { get; set; }
        public string Password { get; set; }
        public string Gender { get; set; }
        public string City { get; set; }
        public Nullable<decimal> Salary { get; set; }
    }
}

We will utilize the Employee model with the TextBox() and TextBoxFor() HTML Helper methods. After creating the Employee model, the next step is to add an MVC 5 Empty Controller named EmployeeController inside the Controllers folder.


namespace HTML_HELPER.Controllers
{
    public class EmployeeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

The EmployeeController includes a single action method, the Index action. Now, create the corresponding Index view with an empty HTML structure.

TextBox() HTML Helper Method:

The Html.TextBox() helper method generates an <input type="text"> element with a specified name, value, and optional HTML attributes. There are seven overloaded versions of this method, as illustrated in the image below. These methods are considered loosely typed.

Example: TextArea HTML Helper Method in ASP.NET MVC

Now, let's update our Employee model as shown below.


using System.ComponentModel.DataAnnotations;
namespace HTML_HELPER.Models
{
    public class Employee
    {
        public int EmployeeId { get; set; }
        [Display(Name = "Name")]
        public string EmployeeName { get; set; }    
        public string Password { get; set; }
        public string Gender { get; set; }
        public string City { get; set; }
        public Nullable<decimal> Salary { get; set; }
        public string Address { get; set; }
    }
}

Update the EmployeeController as shown below.


namespace HTML_HELPER.Controllers
{
    public class EmployeeController : Controller
    {
        public ActionResult Index()
        {
            Employee emp = new Employee()
            {
                EmployeeId = 1,
                Address = "Rehmaniya colony, Aurangabad, 431001, Maharashtra, India"
            };
            return View(emp);
        }
    }
}

Edit 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

« Previous Next »