Output:
@Html.CheckBox():
Html helper class is used to generates html elements. CheckBox() helper method is loosely typed extension method which is used to create CheckBox(<input type="checkbox" >) element in razor view.
@Html.CheckBox() method inside the “System.Web.Mvc.Html” namespace. And the return type is “MvcHtmlString”.
CheckBox() Method Signature:
MvcHtmlString CheckBox(string name, bool isChecked, object htmlAttributes)
The CheckBox() method is a loosely typed method because It has a name parameter is a string. The name parameter can be model class property. The value should be an object value of the property. So it automatically displays a value of the model property in a CheckBoxand visa-Versa. The third parameter is Html Attribute can add CSS, Id to the CheckBox. It has several overload methods we can use as per our requirement.
How to use CheckBox() Helper in Razor view
@Html.CheckBox("Dancing").
How to set CheckBox() the default as checked
@Html.CheckBox("Cricket", true)
Html Result:
<input checked="checked" id="Cricket" name="Cricket" type="checkbox" value="true">
<input id="Dancing" name="Dancing" type="checkbox" value="false">
Output:
@Html.RadioButton():
Html helper class is used to generates html elements. RadioButton() helper method is loosely typed extension method which is used to create RadioButton(<input type="radio" >) element in razor view.
@Html.RadioButton() method inside the “System.Web.Mvc.Html” namespace. And the return type is “MvcHtmlString”.
RadioButton() Method Signature:
MvcHtmlString RadioButton(string name, object value, bool isChecked, object htmlAttributes)
The RadioButton() method is a loosely typed method because It has a name parameter is a string. The name parameter can be model class property. The value should be an object value of the property. So it automatically displays a value of the model property in a RadioButton and visa-Versa. The third parameter is Html Attribute can add CSS, Id to the RadioButton. It has several overload methods we can use as per our requirement.
How to use RadioButton() Helper in Razor view
Example: Male and Female
@Html.RadioButton("Gender", "Male", true, new { id = "male" }) Male
@Html.RadioButton("Gender", "Female", false, new { id = "female" }) Female
How to set RadioButton() default as checked
@Html.RadioButton("Gender", "Male", true, new { id = "male" }) Male
Html Result:
<input checked="checked" id="male" name="Gender" type="radio" value="Male">
<input id="female" name="Gender" type="radio" value="Female">
Output:
@Html.DropDownList():
Html helper class is used to generates html elements. DropDownList() helper method is loosely typed extension method which is used to create DropDownList(<select id="" name="">) element in razor view with specified name, list items and html attributes.
@Html.DropDownList() method inside the “System.Web.Mvc.Html” namespace. And the return type is “MvcHtmlString”.
DropDownList() Method Signature:
MvcHtmlString Html.DropDownList(string name, IEnumerable<SelectLestItem> selectList, string optionLabel, object htmlAttributes)
The DropDownList() method is a loosely typed method because It has a name parameter is a string. The name parameter can be model class property. The second parameter to include the list. So it automatically displays a value of the model property in a DropDownList and visa-Versa. The third parameter is Html Attribute can add CSS, Id to the DropDownList. It has several overload methods we can use as per our requirement.
How to use DropDownList() Helper in Razor view
@{
IEnumerable<string> strList = new List<string> { "BCA", "BCS", "MCA", "MCS" };
}
@Html.DropDownList("ddlCourse", new SelectList(strList, strList.FirstOrDefault()), "--Select Course----")
Html Result:
<select id="ddlCourse" name="ddlCourse">
<option value="">--Select Course----</option>
<option selected="selected">BCA</option>
<option>BCS</option>
<option>MCA</option>
<option>MCS</option>
</select>
Output:
@Html.ListBox():
Html helper class is used to generates html elements. ListBox() helper method is loosely typed extension method which is used to create ListBox(<select id="" multiple="multiple" name="">) element in razor view with specified name, list items and html attributes.
@Html.ListBox() method inside the “System.Web.Mvc.Html” namespace. And the return type is “MvcHtmlString”.
ListBox() Method Signature:
MvcHtmlString Html.ListBox(string name, IEnumerable<SelectLestItem> selectList, string optionLabel, object htmlAttributes).
The ListBox() method is a loosely typed method because It has a name parameter is a string. The name parameter can be model class property. The value should be an object value of the property. So it automatically displays a value of the model property in a ListBox and visa-Versa. The third parameter is Html Attribute can add CSS, Id to the ListBox. It has several overload methods we can use as per our requirement.
How to use ListBox() Helper in Razor view
@Html.ListBox("Select Skills",new List<SelectListItem> {
new SelectListItem{Text= "C#",Value="1"},
new SelectListItem{ Text="ASP.NET",Value="2" },
new SelectListItem{ Text="ASP.NET Core",Value="3" },
new SelectListItem{ Text="Azure",Value="4" }
})
Html Result:
<select id="Select_Skills" multiple="multiple" name="Select Skills">
<option value="1">C#</option>
<option value="2">ASP.NET</option>
<option value="3">ASP.NET Core</option>
<option value="4">Azure</option>
</select>
Output:
@Html.Label():
Html helper class is used to generates Html elements. The label () helper method is a loosely typed extension method that is used to create a Label(<label>) element in the razor view.
@Html.Label() method inside the “System.Web.Mvc.Html” namespace. And the return type is “MvcHtmlString”.
Label() Method Signature:
MvcHtmlString Html.Label(string name, string value, object htmlAttributes)
The Label() method is a loosely typed method because It has a name parameter is a string. The name parameter can be model class property. The value should be an object value of the property. So it automatically displays a value of the model property in a Label and visa-versa. The third parameter is Html Attribute can provide CSS, Id to the Password. It has several overload methods we can use as per our requirement.
How to use Label() Helper in Razor view
@Html.Label("User Name ")
Html Result:
<label for="User_Name_">User Name </label>
@Html.ActionLink():
Html helper class is used to generates html elements. ActionLink() helper method is loosely typed extension method which is used to create Label(<a href="/"> element in razor view.
@Html.ActionLink() method inside the “System.Web.Mvc.Html” namespace. And the return type is “MvcHtmlString”.
ActionLink() Method Signature:
MvcHtmlString ActionLink(string linkText, string actionName, object routeValues, object htmlAttributes);
How to use ActionLink() Helper in Razor view
@Html.Label("User Name ")
Html Result:
<a href="/Home/About">Go to About</a>
Output:
@Html.BeginForm():
Html helper class is used to generates Html elements. BeginForm() helper method is loosely typed extension method which is used to create Form (<a href="/"> element in razor view.
@Html.BeginForm() method inside the “System.Web.Mvc.Html” namespace. And the return type is “MvcHtmlString”.
BeginForm() Method Signature:
MvcHtmlString ActionLink(string linkText, string actionName, object routeValues, object htmlAttributes);
How to use BeginForm() Helper in Razor view
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{}
Html Result:
<form action="/" method="post">
</form>
How to use Standard HTML helpers on View?
We will create a student registration form using Standard Html Helper in MVC 5.
Add the following code in index.cshtml page
<div class="container">
<h3>Student Registration Form: </h3>
@Html.ActionLink("Go to About", "About", new { })
@Html.Hidden("StudentId", "100")
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<div>
<table border="1" class="table table-bordered" style="background-color:antiquewhite;width:500px;">
<tbody>
<tr>
<td>
@Html.Label("User Name ")
</td>
<td>
@Html.TextBox("txtUserName", "", new { @class = "form-control" })
</td>
</tr>
<tr>
<td>
@Html.Label("Password", "Password")
</td>
<td>
@Html.Password("Password", "", new { @class = "form-control" })
</td>
</tr>
<tr>
<td>
Gender:
</td>
<td>
@Html.RadioButton("Gender", "Male", true, new { id = "male" }) Male
@Html.RadioButton("Gender", "Female", false, new { id = "female" }) Female
</td>
</tr>
<tr>
<td>
Address:
</td>
<td>
@Html.TextArea("Address", " ", new { @class = "form-control", id = "IdAddress" })
</td>
</tr>
<tr>
<td>
Hobbies :
</td>
<td>
@Html.CheckBox("Cricket", true) Cricket
@Html.CheckBox("Dancing") Dancing
@Html.CheckBox("Drawing") Drawing
</td>
</tr>
<tr>
<td>
Cources:
@{
IEnumerable<string> strList = new List<string> { "BCA", "BCS", "MCA", "MCS" };
}
</td>
<td>
@Html.DropDownList("ddlCourse", new SelectList(strList, strList.FirstOrDefault()), "--Select Course----")
</td>
</tr>
<tr>
<td>Skills</td>
<td>
@Html.ListBox("Select Skills",new List<SelectListItem> {
new SelectListItem{Text= "C#",Value="1"},
new SelectListItem{ Text="ASP.NET",Value="2" },
new SelectListItem{ Text="ASP.NET Core",Value="3" },
new SelectListItem{ Text="Azure",Value="4" }
})
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" class="btn-primary" />
</td>
</tr>
</tbody>
</table>
</div>
}
</div>
Output:
Advantages of using Standard HTML Helpers
- It is easy to use and simple to understand.
- It is loosely typed HTML helpers.
Interview Question & Home Work
Interview Question:
- What is Standard HTML Helper in Asp.NET MVC 5?
- How to display DropDownList using standard HTML Helpers
- Tell me an example of ListBox in MVC 5
- Advantages of using Standard HTML Helpers
Homework:
Create an Employee registration form using Standard Html Helper in MVC 5.
Related Articles:
References:
I hope you understand the concepts of Standard HTML Helpers in ASP.NET MVC 5. If you like this article then please share this article that will help other people to increase there knowledge.
Thanks for reading.
Don't Forget To:
