w3resource

HtmlHelper - TextBox


In the previous tutorials, we discussed HTMLHelpers as helper classes used in the generation of html tags in the views. In this tutorial we will discuss HtmlHelper- TextBox.

The creation of textbox can be done using two HtmlHelper methods:

  • TextBox()
  • TextBoxFor()

The TextBox() method is loosely typed method whereas TextBoxFor() is a strongly typed method.

Consider the code snippet below, and observe how the TextBox() and TextBoxFor() methods can be used in each of them.

An example Activity Model

public class Activity
{
    public int Id {get; set;}
    public string ActivityName {get; set;}
    public string Description {get; set;}
    public string Status {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)

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.

//Demo: Html.TextBox() in Razor View
@Model ActivityTab.Models.Activity

@Html.TextBox("ActivityName", null, new {@class = "form-control"})  
//Html Result:
<input class="form-control" 
        id="ActivityName" 
        name="ActivityName" 
        type="text" 
        value="" />

In the above example, the first parameter is "ActivityName" property of Activity model class which will be set as a name and 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 ActivityName 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.

//Demo: 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" />

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. This method binds a specified model object property to the input text.

Hence, 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)

//Demo: TextBoxFor() in Razor View
@model ActivityTab.Models.Activity
@Html.TextBoxFor(a => a.ActivityName, new {@class = "form-control"})  
//Html Result:
<input class="form-control" 
        id="ActivityName" 
        name="ActivityName" 
        type="text" 
        value="Your Activty Name" />

In the above example, the first parameter in TextBoxFor() method is a lambda expression which specifies ActivityName property to bind with the textbox. It generates an input text element with id and name set to property name.

The value attribute will be set to the value of a ActivityName property example: "Write C# Tutorials".

Differences between TextBox and TextBoxFor

  1. @Html.TextBox() is loosely typed method whereas @Html.TextBoxFor() is a strongly typed (generic) method.
  2. TextBox() requires property name as string parameter where as TextBoxFor() requires lambda expression as a parameter.
  3. TextBox doesn't give you compile time error if you have specified wrong property name. It will throw run time exception.
  4. TextBoxFor is generic method so it will give you compile time error if you have specified wrong property name.

We have successfully discussed the TextBoxHtml helper, in the upcoming sections, we will explore yet another HtmlHelper method.



Inviting useful, relevant, well-written and unique guest posts