In this article, we will learn about HTML Helpers. ASP.NET provides various HTML Helpers using which we can bind our Model to HTML view. There are two types of HTML Helpers like Simple and Strongly Typed HTML Helpers.
The following is the list of Html Helper controls.
- Html.Beginform
- Html.EndForm
- Html.DropDownList
- Html.CheckBox
- Html.RedioButton
- Html.ListBox
- Html.Hidden
- Html.TextArea
- Html.Password
- Html.Label
- Html.TextBox
Below are Strongly Type Html Helper methods
- Html.LabelFor
- Html.TextBoxFor
- Html.TextAreaFor
- Html.DropDownListFor
- Html.CheckBoxFor
- Html.RadioButtonFor
- Html.ListBoxFor
- Html.HiddenFor
First we will see simple HTML Helpers
Here the HTML Helpers are not bounded with the Class we have specified. It is somewhat loosely typed binding.
Add the following code in View and you are done with it.
Razor View
<div>
<h2>
Simple Helpers
</h2>
<br />
<table>
<tr>
<td>@Html.Label("User Name")</td>
<td>@Html.TextBox("UserName")</td>
</tr>
<tr>
<td>@Html.Label("User Phone")</td>
<td>@Html.TextBox("UserPhone")</td>
</tr>
<tr>
<td>@Html.Label("User Email")</td>
<td>@Html.TextBox("UserEmail")</td>
</tr>
<tr>
<td>@Html.Label("User Password")</td>
<td>@Html.Password("UserPassword")</td>
</tr>
<tr>
<td>
@Html.Label("Male")
@Html.RadioButton("Male", new { value = "Male" })
</td>
<td>
@Html.Label("Female")
@Html.RadioButton("Female", new { value = "Female" })
</td>
</tr>
<tr>
<td> @Html.Label("User name")</td>
<td>@Html.DropDownList("Users", NameList)</td>
</tr>
<tr>
<td>@Html.Label("User Terms")</td>
<td> @Html.CheckBox("UserTerms")</td>
</tr>
</table>
<hr />
</div>
HTML View
<div>
<h2>
Simple Helpers
</h2>
<br>
<table>
<tbody><tr>
<td><label for="User_Name">User Name</label></td>
<td><input id="UserName" name="UserName" type="text" value=""></td>
</tr>
<tr>
<td><label for="User_Phone">User Phone</label></td>
<td><input id="UserPhone" name="UserPhone" type="text" value=""></td>
</tr>
<tr>
<td><label for="User_Email">User Email</label></td>
<td><input id="UserEmail" name="UserEmail" type="text" value=""></td>
</tr>
<tr>
<td><label for="User_Password">User Password</label></td>
<td><input id="UserPassword" name="UserPassword" type="password"></td>
</tr>
<tr>
<td>
<label for="Male">Male</label>
<input id="Male" name="Male" type="radio" value="{ value = Male }">
</td>
<td>
<label for="Female">Female</label>
<input id="Female" name="Female" type="radio" value="{ value = Female }">
</td>
</tr>
<tr>
<td> <label for="User_name">User name</label></td>
<td><select id="Users" name="Users"><option value="1">Faisal</option>
<option value="2">Pathan</option>
</select></td>
</tr>
<tr>
<td><label for="User_Terms">User Terms</label></td>
<td> <input id="UserTerms" name="UserTerms" type="checkbox" value="true"><input name="UserTerms" type="hidden" value="false"></td>
</tr>
</tbody></table>
<hr>
</div>
Output:
Now we will see Strongly Typed HTML Helpers
Here the HTML Helpers are bounded with the Class property we have specified.
Add the following code in View.
Razor View
@model HTMLHelpers.Models.Users
@{
ViewBag.Title = "Home Page";
var NameList = new List(){
new SelectListItem(){Value="1",Text="Faisal"},
new SelectListItem(){Value="2",Text="Pathan"}
};
}
<div>
<h2>Strongly Typed Helpers</h2>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<table>
<tr>
<td>@Html.LabelFor(m => m.Name)</td>
<td>@Html.TextBoxFor(m => m.Name)</td>
</tr>
<tr>
<td> @Html.LabelFor(m => m.Phone)</td>
<td> @Html.TextBoxFor(m => m.Phone)</td>
</tr>
<tr>
<td>@Html.LabelFor(m => m.Email)</td>
<td> @Html.TextBoxFor(m => m.Email)</td>
</tr>
<tr>
<td>@Html.LabelFor(m => m.Password)</td>
<td> @Html.PasswordFor(m => m.Password)</td>
</tr>
<tr>
<td>
@Html.Label("Male")
@Html.RadioButtonFor(m => m.Gender, "Male", new { value = "Male" })
</td>
<td>
@Html.Label("Female")
@Html.RadioButtonFor(m => m.Gender, "Female", new { value = "Female" })
</td>
</tr>
<tr>
<td> @Html.LabelFor(m => m.User)</td>
<td>@Html.DropDownListFor(m => m.User, NameList)</td>
</tr>
<tr>
<td>@Html.LabelFor(m => m.Terms)</td>
<td>@Html.CheckBoxFor(m => m.Terms)</td>
</tr>
<tr>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
}
</div>
HTML View
<div>
<h2>Strongly Typed Helpers</h2>
<form action="/" method="post"> <table>
<tbody><tr>
<td><label for="Name">Name</label></td>
<td><input id="Name" name="Name" type="text" value=""></td>
</tr>
<tr>
<td> <label for="Phone">Phone</label></td>
<td> <input id="Phone" name="Phone" type="text" value=""></td>
</tr>
<tr>
<td><label for="Email">Email</label></td>
<td> <input id="Email" name="Email" type="text" value=""></td>
</tr>
<tr>
<td><label for="Password">Password</label></td>
<td> <input id="Password" name="Password" type="password"></td>
</tr>
<tr>
<td>
<label for="Male">Male</label>
<input id="Gender" name="Gender" type="radio" value="Male">
</td>
<td>
<label for="Female">Female</label>
<input id="Gender" name="Gender" type="radio" value="Female">
</td>
</tr>
<tr>
<td> <label for="User">User</label></td>
<td><select id="User" name="User"><option value="1">Faisal</option>
<option value="2">Pathan</option>
</select></td>
</tr>
<tr>
<td><label for="Terms">Terms</label></td>
<td><input data-val="true" data-val-required="The Terms field is required." id="Terms" name="Terms" type="checkbox" value="true"><input name="Terms" type="hidden" value="false"></td>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</tbody></table>
</form></div>
Output:
You can download the source code from here
