HTML Helper In ASP.NET MVC

In MVC there is no server side control, we have to use HTML HELPER.

There are the following types of HTML HELPERS:

Non Strongly Typed Html Helper
Strongly Typed Html Helper
Custom Helper

1. Non Strongly Typed Html Helper

Html.TextBox is not strongly typed and it do not require a strongly typed view.

It is not bounded with Model and non-strongly typed html helper is independent of model kind of things.

2. Strongly Typed Html Helper

Html.TextBoxFor is strongly typed and it require a strongly typed view. It is bounded with Model property.

3. Custom Helper: You can design your own helper with.

Through the following charts, I had indirectly designed a form control for FRIEND entry for NON STRONGLY TYPED.

CONTROL NAME	NON STRONGLY TYPED HTML HELPERS
CheckBox	@Html.CheckBox(“chkMarried”,0) HTML RENDER: <input id="chkMarried" name="chkMarried" type="checkbox" value="true" /><input name="chkMarried" type="hidden" value="false" />
Drop Down List	@Html.DropDownList(“ddlEducationLevel”, new SelectList(new[]{“SSC”,”HSC”,”Graducation”,”Post Graducation”})) HTML RENDER: <select id="ddlEducationLevel" name="ddlEducationLevel"><option>SSC</option> <option>HSC</option> <option>Graduation</option> <option>Post Graducation</option> </select>
HiddenField	@Html.Hidden(“hdnDateTime”,@DateTIme.Now.Tostring()) HTML RENDER: <input id="hdnDateTime" name="hdnDateTime" type="hidden" value="01/09/16 20:47:46" />
Label	@Html.Label(“lblFriendName”,”Friend Name”) HTML RENDER: <label for="lblFriendName">Name</label>
ListBox	@{ var items = new List<SelectListItem>{ new SelectListItem {Value = "1", Text = "Visual Foxpro"}, new SelectListItem {Value = "2", Text = "Visual Basic"}, new SelectListItem {Value = "3", Text = "C#", Selected = true}, new SelectListItem {Value = "4", Text = "Javascript", Selected = true}, new SelectListItem {Value = "5", Text = "Java"} }; } @Html.ListBox(“lstLanguageKnow”, items) HTML RENDER: <select id="lstLanguageKnow" multiple="multiple" name="lstLanguageKnow"><option value="1">Visual Foxpro</option> <option value="2">Visual Basic</option> <option selected="selected" value="3">C#</option> <option selected="selected" value="4">Javascript</option> <option value="5">Java</option> </select>
Password	@Html.Password(“txtPassword”) HTML RENDER: <input id="txtPassword" name="txtPassword" type="password" />
Radio Button	Male: @Html.RadioButton(“rbGender”,”Male”) Female:@Html.RadioButton(“rbGender”,”Female”) HTML RENDER: Male: <input id="rbGender" name="rbGender" type="radio" value="Male" /> Female: <input id="rbGender" name="rbGender" type="radio" value="Female" />
TextArea	@Html.TextArea(“txtAddress”) HTML RENDER: <textarea cols="20" id="txtAddress" name="txtAddress" rows="2"> </textarea>
TextBox	@Html.TextBox(“txtName”) HTML RENDER: <input id="txtName" name="txtName" placeholder="Enter Friend Name" type="text" value="" />

Output

Run

VIEW CODE: new.cshtml

@{
ViewBag.Title = "New";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>New Friend</h2>
<form method="post">
<table>
<tr>
<td>
@Html.Label("lblName", "Name")
@Html.Hidden("hdnDateTime", @DateTime.Now.ToString())
</td>
<td>
@Html.TextBox("txtName", "", new { placeholder = "Enter Friend Name" })
</td>
</tr>
<tr>
<td>
@Html.Label("lblAddress", "Address")
</td>
<td>
@*@Html.TextArea("txtAddress", "", 4, 30, new {placeholder="Enter Your Address"})*@
@Html.TextArea("txtAddress")
</td>
</tr>
<tr>
<td>
@Html.Label("lblPlace", "Place")
</td>
<td>
@Html.TextBox("txtPlace")
</td>
</tr>
<tr>
<td>
@Html.Label("lblMobile", "Mobile Number")
</td>
<td>
@Html.TextBox("txtMobile")
</td>
</tr>
<tr>
<td>
@Html.Label("lblGender", "Gender")
</td>
<td>
Male: @Html.RadioButton("rbGender", "Male", new {value="Male"})
Female: @Html.RadioButton("rbGender", "Female",new {value="Female"})
</td>
</tr>
<tr>
<td>
@Html.Label("lblMarital", "Is Married")
</td>
<td>
@Html.CheckBox("chkMarried", 0)
</td>
</tr>
<tr>
<td>
@Html.Label("lblEducationLevel", "Education Level")
</td>
<td>
@Html.DropDownList("ddlEducationLevel", new SelectList(new[] { "SSC", "HSC", "Graduation", "Post Graducation" }))
</td>
</tr>
<tr>
<td>
@Html.Label("lblLanguageKnown", "Language Known")
</td>
<td>
@{
var items = new List<SelectListItem>{
new SelectListItem {Value = "1", Text = "Visual Foxpro"},
new SelectListItem {Value = "2", Text = "Visual Basic"},
new SelectListItem {Value = "3", Text = "C#", Selected = true},
new SelectListItem {Value = "4", Text = "Javascript", Selected = true},
new SelectListItem {Value = "5", Text = "Java"}
};
}
@Html.ListBox("lstLanguageKnow", items)
</td>
</tr>
<tr>
<td>
@Html.Label("lblPassword", "Password")
</td>
<td>
@Html.Password("txtPassword")
</td>
</tr>
</table>
<br />
<input type="submit" id="submit" value="Submit" />
</form>

In the next article, I will explain about Strongly Typed HTML HELPER.

1 Comment

Join the conversation! Your thoughts help the community grow.

Srinadh Honey7y ago
In displayfor() method, i didn't understand that parameter "model=>model.Name" and in foreach loop "modelItem=>item.Name" , item means it iterate every time but what is modelitem here, can u please help me on these.