Sunday, August 12, 2012 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">


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


           SelectList sl = new SelectList(li.OrderBy(x =>, "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>

1 comment:

Comments will appear once they have been approved by the moderator