Best resource for Online free Education
In this Video, I am going to discuss TextBox HTML Helper in ASP.NET MVC Application and along the way, we will also discuss how to create TextArea using HTML Helper in ASP.NET MVC application. Please read our previous Video before proceeding to this Video where we discussed the basis of HTML Helpers in the ASP.NET MVC Application. As part of this Video, we are going to discuss the following pointers.
- How to Create TextBox using HTML Helper in MVC?
- TextBox() HTML Helper Method in ASP.NET MVC.
- TextBoxFor() HTML Helper Method in ASP.NET MVC application
- What are the Differences between Html.TextBox and Html.TextBoxFor in MVC Application?
- How to Create TexArea using HTML Helper in MVC?
- Understanding TextArea() and TextAreaFor() HTML Helper Method in MVC.
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.
Lets understand How to Create TextBox using HTML Helper in MVC with one example:
Lets create an ASP.NET MVC 5 application with the name HTML_HELPER. Then Create Employee.cs class file within the Models folder and then copy and paste the following code into it.
We are going to use the above Employee model with TextBox() and TextBoxFor() HTML Helper methods. Once you create the Employee model next we are going to create an MVC 5 Empty Controller with the name EmployeeController within the Controllers Folder.
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 ASP.NET MVC:
The Html.TextBox() Helper method creates an element of with specified name, value and HTML attributes. There 7 overloaded versions of this Html.TextBox() Helper method is available as shown in the below image. The following method are loosely typed method
Parameters:
- htmlHelper: The HTML helper instance that this method extends. It indicates that it is an extension method that belongs to HtmlHelper class.
- name: The name of the form field and the System.Web.Mvc.ViewDataDictionary key that is used to look up the value.
- value: The value of the text input element. The value is retrieved in this order – the System.Web.Mvc.ModelStateDictionary object, the value of this parameter, the System.Web.Mvc.ViewDataDictionary object, and lastly, a value attribute in the HTML attributes.
- format: A string that is used to format the input.
- htmlAttributes: An object that contains the HTML attributes to set for the element.
Returns: This method returns an input element whose type attribute is set to “text”.
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.
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 the 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 the 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
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 for the model property which needs 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 has 6 overloaded versions available in ASP.NET MVC Framework are 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 display.
- format: A string that is used to format the input.
- htmlAttributes: An object that contains the HTML attributes to set for the element.
Type parameters:
- TModel: The type of model.
- TProperty: The type of the value.
Returns: An input element whose type attribute is set to “text”.
Example to understand the TextBoxFor() HTML Helper Method in MVC:
Copy and Paste the following code in Index.cshtml view
@model HTML_HELPER.Models.Employee
@Html.TextBoxFor(m => m.EmployeeName, new { @class = “form-control” })
Run the application and insepct the element and you will see that, it will produce the following Html
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 dont 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 Videos?
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 is 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.
Note: The Strongly typed HTML helpers are introduced in MVC2.
How to Create TexArea using HTML Helper in ASP.NET MVC Application?
To create TextArea using HTML Helper in ASP.NET MVC application, we 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.
TextArea() HTML Helper Method in MVC:
The Html.TextArea() method creates an input HTML element of