Home > ASP.NET MVC > ASP.NET # MVC # 16 – Html.TextBox and Html.TextBoxFor Helper Methods

ASP.NET # MVC # 16 – Html.TextBox and Html.TextBoxFor Helper Methods

Hi Friends,

In our post HTML HELPER CLASS AND METHODS INTRODUCTION we see how Html Helper Class works and how HTML Helper Methods are important and how they are helpful in rendering the HTML.

Today we will see the very important HTML Helper method

1) HTML.TextBox

2) HTML.TextBoxFor

1) HTML.TextBox 

The TextBox helper renders an input tag with the type attribute set to text.

I) This is one of the form helpers most commonly used to accept free-form input from a user;

for example

<%: Html.TextBox(“name”) %>

Results in

<input id=”name” name=”name” type=”text” value=”“ />

 

II) We can also set the value of the textbox by sending the ViewData from controller to view as follows

 

   public ActionResult Edit(int id)
       {
           ViewData["Name"] = "My name is XYZ";
           return View();
       }
which results in

<input id=” Namename=”Name” type=”text” value=”My name is XYZ/>

III) A ViewData lookup can also look up properties of objects in the View Data.

For example, going back to the previous example, let’s change it to add the whole Product to ViewData:

    public ActionResult Edit(int id)
        {
            var product = new * { Name = "My name is XYZ" };
            ViewData["Product"] = product;
            return View();
        }

You can use the following code to display a textbox with the product’s name as the current value:

<%: Html.TextBox("Product.Name") %>

which will result in

<input id=” Product_Namename=”Product.Name” type=”text” value=”My name is XYZ/>

NOTE :

If there are now values matching “Product.Name” in the View data, then it attempts to look up a value for the portion of the name before the first dot, “Product”, in which case it finds a Product instance. It then evaluates the remaining portion of the name “Name” against the product it found, yielding the value.

One other thing to note is that the id of the attribute replaced the dot in the name with an underscore. This behavior is controllable via the static HtmlHelper.IdAttributeDotReplacement property.

IV) The TextBox helper also works well against strongly typed View data. For example, given the following Controller action:

   public ActionResult Edit(int id)
       {
           var product = new { Name = "My name is XYZ" };
           return View(product);
       }

you can supply the TextBox helper with the name of a property in order to display that property:

<%: Html.TextBox("Product.Name") %>

which results in:

<input id=” Namename=”Name” type=”text” value=”My name is XYZ/>

2)Html.TextBoxFor

If you wish to specify HTML attributes, you’ll need to call an overload that also supplies an explicit value. If you want to use View data lookup in these cases, just pass in null to the TextBox helper.For example:

<%:Html.TextBoxFor(m => m.Name, null, new{@class="lotsofit"}) %>

will result in:
<input class=”lotsofit” id=”Name” name=”Name” type=”text” value=”ASP.NET MVC/>

The strongly typed equivalent of Html.TextBox is Html.TextBoxFor. It supports the same overloads demonstrated above, so we could replace the above call with the following code:

<%:Html.TextBox(m => m.Name, null, new{@class="lotsofit"}) %>

(REFERENCE – Professional.ASP.NET.MVC.2 Wrox publication)

Thanks.

Advertisements
Categories: ASP.NET MVC
  1. October 7, 2011 at 4:30 am

    Just as good as your last post. Do you accept advertisers?

  2. hyt
    January 29, 2014 at 3:41 pm

    nice article

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: