forum

Home / DeveloperSection / Forums / How to generate textbox control using HtmlHelper in razor view?

Ask Question

How to generate textbox control using HtmlHelper in razor view?

Anonymous User6354 15-Feb-2020

Please tell me how we generate textbox control using HtmlHelper in Razor view with a suitable example.

asp.net mvc asp.net mvc 
Updated on 15-Feb-2020
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Nishi Tiwari

Nishi Tiwari

15-Feb-2020

This 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 

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()

This 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)

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 

@model Student



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

Html Result:

<input class="form-control" 

        id="StudentName" 

        name="StudentName" 

        type="text" 

        value="" />

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: 

<input class="form-control" 

        id="myTextBox" 

        name="myTextBox" 

        type="text" 

        value="This is value" />

 Output of TextBox() Html Helper method

How to generate textbox control using HtmlHelper in razor view?

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 

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

Example of 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 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

How to generate textbox control using HtmlHelper in razor view?

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.

Liked By