Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / how to generate textbox control using htmlhelper in razor view?
Ask Question
Anonymous User
Anonymous User

Student

I am a content writter !

Message

1 Answers

Nishi Tiwari
Nishi Tiwari 15 Feb 2020
Report Abuse

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

Nishi Tiwari

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

Nishi Tiwari

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.

advertising