Please tell me how we generate textbox control using HtmlHelper in Razor view with a suitable example.
How to generate textbox control using HtmlHelper in razor view?
6712
15-Feb-2020
Updated on 15-Feb-2020
Nishi Tiwari
15-Feb-2020This HtmlHelper class mainly includes two extension methods which creates a textbox element in razor view that is TextBox() and TextBoxFor(). These element that is TextBox() method is loosely typed method whereas TextBoxFor() is a strongly typed method.
Now we will use following Student model with TextBox() and TextBoxFor() method.
Example of Student Model
TextBox()
This Html.TextBox() method creates <input type="text" > element with specified name, value and html attributes.
TextBox() method signature
The TextBox() method is a loosely typed method because the name parameter is a string and the name parameter can be a property name of the model object and it binds specified property with a textbox and so, it automatically displays a value of the model property in a textbox and visa-versa.
Example of Html.TextBox() in Razor View
Given in the above example, the first parameter is "StudentName" property of Student model class that will be set as a name & id of textbox and the second parameter is the value which is to be displayed in a textbox and this is null in the above example because this TextBox() method will automatically display a value of the StudentName in the textbox and at last the third parameter will be set as class attribute. This 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 textbox.
Example of Html.TextBox() in Razor View
@Html.TextBox("myTextBox", "This is value", new { @class = "form-control" })Html Result:
Output of TextBox() Html Helper method
TextBoxFor
The TextBoxFor helper method is a strongly typed extension method, it generates a text input element for the model property specified using a lambda expression. This TextBoxFor method binds a specified model object property to input text and so it automatically displays a value of the model property in a textbox and visa-versa.
TextBoxFor() method Signature
Example of TextBoxFor() in Razor View
@model Student
@Html.TextBoxFor(m => m.StudentName, new { @class = "form-control" })
Html Result:
In the above example, the first parameter in the TextBoxFor() method is a lambda expression which specifies StudentName property to bind with the textbox also it generates an input text element with id & name set to the property name and the value attribute will be set to the value of a StudentName property e.g John. Output of TextBoxFor() Html Helper method is given below
Difference between TextBox and TextBoxFor
• The @Html.TextBox() is a loosely typed method whereas @Html.TextBoxFor() is a strongly typed that is a generic extension method.
• The TextBox() requires property name as string parameter whereas the TextBoxFor() requires lambda expression as a parameter.
• The TextBox doesn't give us compile-time error if we have specified the wrong property name but it will throw run time exception.
• The TextBoxFor is the generic method so it will give us compile-time error if we have specified wrong property name or property name changes.