asp.net mvc 3 html helper examples

How to create a form using HTML helper

Markup in the View:

@using (Html.BeginForm("PostData", "Home", FormMethod.Post, new { id="myForm",whateverParameter="foo"}))

{ 

}

HTML Output:

<form action="/Home/PostData" id="myForm" method="post" whateverParameter="foo">

 </form>

 How to Create a text box using HTML helper

Markup in the View:

@Html.TextBox("clientID","Hello World")

HTML Output:

 <input id="clientID" name="clientID" value="Hello World" type="text" />

How to create a textbox for password using HTML helper

Markup in the view

@Html.Password("myClientID");

HTML output

<input id="myClientID" name="myClientID" type="password" />

How to create a Text Area using HTML helper

Markup in the View:

  @Html.TextArea("clientID","hello  world",10,20,null)

HTML Output:

<textarea cols="20" id="clientID" name="clientID" rows="10">hello  world</textarea>

How to Create a radio button using HTML helper

Markup in the view :

@Html.RadioButton("myClientID", "Ferrari");

HTML Output:

<input id="myClientID" name="myClientID" value="Ferrari" type="radio" />

How to create a radio button list using HTML helper

The trick here is to give the same ID to all the radio buttons

Markup in the view

    @Html.RadioButton("myClientID", "Ferrari", true);

    @Html.RadioButton("myClientID", "Ford");

    @Html.RadioButton("myClientID", "Toyota");

HTML Output:

<input id="myClientID" name="myClientID" type="radio" value="Ferrari" checked="checked" />

<input id="myClientID" name="myClientID" type="radio" value="Ford" />

<input id="myClientID" name="myClientID" type="radio" value="Toyota" />

How to create a checkbox using HTML helper

Markup in the view

@Html.CheckBox("myClientID", true);

HTML output

<input checked="checked" id="myClientID" name="myClientID" value="true" type="checkbox" />

How to create a link to a controller using HTML helper

Markup in the view

@Html.ActionLink("Goes to the Logon Method in Account Controller", "LogOn", "Account");

HTML output

<a href="/Account/LogOn">Goes to the Logon Method in Account Controller</a>

How to create a dropdown list using HTML helper

Creating a drop down list is slightly more complicated than the others. To be able to create a dropdown list, you must have a method that returns an object of the type  System.Web.Mvc.SelectList.

Given is a example of how to return a SelectList which is ordered by name. The selected value is 3.

       public  SelectList myDropDownList()

       {

           Colors c1 = new Colors();

           c1.Name = "Black";

           c1.Value = "1";

           Colors c2 = new Colors();

           c2.Name = "Blue";

           c2.Value = "2";

           Colors c3 = new Colors();

           c3.Name = "Yellow";

           c3.Value = "3";

           List<Colors> li = new List<Colors>();

           li.Add(c1);

           li.Add(c2);

           li.Add(c3);

           SelectList sl = new SelectList(li.OrderBy(x => x.name), "Value", "Name", 3);

           return sl;

       }

This SelectList is bound to a dropdown as shown below

@Html.DropDownList("clientID", Model.myDropDownList())

HTML output

 

<select id="clientID" name="clientID">

        <option value="1">Black</option>

        <option value="2">Blue</option>

        <option selected="selected" value="3">Yellow</option>

    </select>