TextBox HTML Helper in MVC

TextBox HTML Helper in MVC Application

In this article, I am going to discuss TextBox HTML Helper in MVC Application and along the way, we will also discuss how to create TextArea using HTML Helper in an ASP.NET MVC application. Please read our previous article before proceeding to this article where we discussed the basis of HTML Helpers in MVC Application. As part of this article, we are going to discuss the following pointers.

  1. How to Create TextBox using HTML Helper in MVC?
  2. TextBox() HTML Helper Method in ASP.NET MVC.
  3. TextBoxFor() HTML Helper Method in ASP.NET MVC application
  4. What are the Differences between Html.TextBox and Html.TextBoxFor in MVC Application?
  5. How to Create TexArea using HTML Helper in MVC?
  6. Understanding TextArea() and TextAreaFor() HTML Helper Method in MVC.
How to Create TextBox using HTML Helper in MVC?

To create TextBox using HTML Helper in MVC application you need to use the TextBox Helper method. The HtmlHelper class in ASP.NET MVC Framework provides two extension 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 in MVC with one example:

Let’s create an ASP.NET MVC5 application with the name HTML_HELPER. Then Create Employee.cs class file within the Models folder and then copy and paste the following code in 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 are going to use the above Employee model with TextBox() and TextBoxFor() HTML Helper method. Once you create the Employee model next we are going to create an Empty Controller with the name EmployeeController within the Controllers Folder.

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

The EmployeeController is created with one action method i.e. the Index action method. So, create the respective Index view with empty HTML.

TextBox() HTML Helper Method in MVC:

The Html.TextBox() Helper method creates an element of type <input type=”text” > with specified name, value and HTML attributes. The signature of the TextBox() HTML Helper method as shown below.

TextBox HTML Helper in MVC

The above TextBox() HTML Helper method is a loosely typed method because the name parameter is a string. The name parameter can also be the property name of a model.

Note: Replace Home with Employee in RouteConfig class.

Modify the Index View:

Please modify the Index View as shown below to use the TextBox Helper method. 

@model HTML_HELPER.Models.Employee
@Html.TextBox(“EmployeeName”, null, new { @class = “form-control” })

Run the application and inspect the Html and you will see that it will produce the following HTML for the textbox.

<input class=”form-control” id=”EmployeeName” name=”EmployeeName” type=”text” value=””>

In the above example, the first parameter is “EmployeeName” which is a property of the Employee model which will be set as the name and id of the textbox. The second parameter is the value that we need to display in the textbox, which is null in the above example because TextBox() method will automatically display the value of the EmployeeName property of the Employee model. The third parameter will be set as the class attribute. The HTML attributes parameter is an object type, so it can be an anonymous object and attributes name will be its properties starting with @ symbol.

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

@Html.TextBox(“myTextBox”, “This is value”, new { @class = “form-control” })

It will produce the following HTML

<input class=”form-control” id=”myTextBox” name=”myTextBox” type=”text” value=”This is value”>

TextBoxFor() HTML Helper Method in ASP.NET MVC application:

The TextBoxFor() HTML Helper method is a strongly typed extension method. It generates an element of type <input type=”text” >  for the model property which need to be specified using a lambda expression. The TextBoxFor() HTML Helper method binds the specified model object property to the input element. So it automatically displays that model property value within the textbox. The TextBoxFor() HTML Helper Method signature is given below.

TextBoxFor HTML Helper in MVC

Example to understand the TextBoxFor() HTML Helper method:

Copy and Paste the following code in Index.cshtml view

@model HTML_HELPER.Models.Employee
@Html.TextBoxFor(m => m.EmployeeName, new { @class = “form-control” })

It will produce the following Html

<input class=”form-control” id=”EmployeeName” name=”EmployeeName” type=”text” value=””>

In the above example, the first parameter in TextBoxFor() HTML Helper Method is a lambda expression which specifies the EmployeeName property of the Model object to bind with the textbox. It generates an input type text element with id and name property and both the properties value are set to EmployeeName. The value attribute will be set to the value of the EmployeeName property of the Model Object.

What are the Differences between Html.TextBox and Html.TextBoxFor in ASP.NET MVC application?

As we already discussed that the @Html.TextBox() is a loosely typed helper method whereas the @Html.TextBoxFor() is a strongly typed helper method.

The Html.TextBox() Helper method is not strongly typed and hence they don’t require a strongly typed view. This means that we can hardcode whatever name we want. On the other hand the Html.TextBoxFor() HTML Helper method is a strongly typed method and hence it requires a strongly typed view and the name should be given using the lambda expression. What is a strongly typed view that we will discuss in our upcoming articles.

The Strongly typed HTML helper methods also provide compile-time error checking. In real-time applications, we mostly prefer to use strongly typed HTML Helper methods. 

But the most important point that we need to keep in mind whether we use Html.TextBox Helper method or Html.TextBoxFor() Helper method the end result is the same that is they generate the same HTML.

The Strongly typed HTML helpers are introduced in MVC2. 

How to Create TexArea using HTML Helper in MVC?

To create TextArea using HTML Helper in MVC application you need to use the TextArea Helper methods.  The HtmlHelper class provides two extension methods to generate the textarea i.e. multiline textbox in a razor view: They are TextArea() and TextAreaFor(). By default, the textarea is created with rows=2 and cols=20 size.

The Html.TextArea() method creates an input HTML element of type <textarea rows=”2″ cols=”20″> with a specified name, value and HTML attributes. The TextArea() HTML Helper Method Signature is given below.

TextArea HTML Helper in ASP.NET MVC

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 property of a model object. It binds the specified property with the textarea. As a result, it automatically displays that property value within the textarea.

Example to understand the TextArea HTML Helper Method in ASP.NET MVC Application:

Let’s modify 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; }
    }
}

Modify the Employee Controller as shown below:

namespace HTML_HELPER.Controllers
{
    public class EmployeeController : 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 in the Index view

@model HTML_HELPER.Models.Employee
@Html.TextArea(“Address”, null, new { @class = “form-control” })

If we inspect the text area it will produce the following HTML

<textarea class=”form-control” cols=”20″ id=”Address” name=”Address” rows=”2″></textarea>

In the above example, the first parameter is the “Address” property of the Employee model class which will be set as 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 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 it can be an anonymous object and 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” cols=”20″ id=”myTextArea” name=”myTextArea” rows=”2″>This is value</textarea>

TextAreaFor() HTML Helper Method in 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. The TextAreaFor() method signature is given below.

TextAreaFor HTML Helper in ASP.NET MVC

Example to understand TextAreaFor HTML Helper Method in MVC:

Copy and paste the following code in 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” cols=”20″ id=”Address” name=”Address” rows=”2″>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 Address property.

In the next article, I am going to discuss how to generate Dropdownlist using HTML helper in ASP.NET MVC application. Here, In this article, I try to explain How to Create TextBox and TextArea using HTML Helper Methods in ASP.NET MVC application.

Leave a Reply

Your email address will not be published. Required fields are marked *