Create TextBox using HtmlHelper

Learn how to generate textbox control using HtmlHelper in razor view in this section.

HtmlHelper class includes two extension methods which creates a textbox (<input type="text">) element in razor view: TextBox() and TextBoxFor(). The TextBox() method is loosely typed method whereas TextBoxFor() is a strongly typed method.

We will use following Student model with TextBox() and TextBoxFor() method.

Example: Student Model

public class Student
{
    public int StudentId { get; set; }
    [Display(Name="Name")]
    public string StudentName { get; set; }
    public int Age { get; set; }
    public bool isNewlyEnrolled { get; set; }
    public string Password { get; set; }
}

TextBox():

The Html.TextBox() method creates <input type="text" > element with specified name, value and html attributes.

TextBox() method signature:

MvcHtmlString Html.TextBox(string name, string value, object htmlAttributes)

TextBox method has many overloads. Please visit MSDN to know all the overloads of TextBox() method.

The TextBox() method is a loosely typed method because name parameter is a string. The name parameter can be a property name of model object. It binds specified property with textbox. So it automatically displays a value of the model property in a textbox and visa-versa.

Example: Html.TextBox() in Razor View

@model Student

@Html.TextBox("StudentName", null, new { @class = "form-control" })  

Html Result:

<input class="form-control" 
        id="StudentName" 
        name="StudentName" 
        type="text" 
        value="" />

In the above example, the first parameter is "StudentName" property of Student model class which will be set as a name & id of textbox. The second parameter is a value to display in a textbox, which is null in the above example because TextBox() method will automatically display a value of the StudentName property in the textbox. The third parameter will be set as class attribute. HtmlAttributes parameter is an object type, so it can be 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.

Example: Html.TextBox() in Razor View

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

Html Result:

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

Output of TextBox() Html Helper method

TextBoxFor:

TextBoxFor helper method is a strongly typed extension method. It generates a text input element for the model property specified using a lambda expression. TextBoxFor method binds a specified model object property to input text. So it automatically displays a value of the model property in a textbox and visa-versa.

TextBoxFor() method Signature:

MvcHtmlString TextBoxFor(Expression<Func<TModel,TValue>> expression, object htmlAttributes)

Visit MSDN to know all the overloads of TextBoxFor() method.

Example: TextBoxFor() in Razor View

@model Student

@Html.TextBoxFor(m => m.StudentName, new { @class = "form-control" })  

Html Result:

<input class="form-control" 
        id="StudentName" 
        name="StudentName" 
        type="text" 
        value="John" />

In the above example, the first parameter in TextBoxFor() method is a lambda expression which specifies StudentName property to bind with the textbox. It generates an input text element with id & name set to property name. The value attribute will be set to the value of a StudentName property e.g John. The following figure shows the input text element genered by above example.

Output of TextBoxFor() Html Helper method

Difference between TextBox and TextBoxFor:

• @Html.TextBox() is loosely typed method whereas @Html.TextBoxFor() is a strongly typed (generic) extension method.
• TextBox() requires property name as string parameter where as TextBoxFor() requires lambda expression as a parameter.
• TextBox doesn't give you compile time error if you have specified wrong property name. It will throw run time exception.
• TextBoxFor is generic method so it will give you compile time error if you have specified wrong property name or property name changes. (Provided view is not compile at run time. )