We will learn Standard HTML Helpers in MVC 5 example and we will learn about the advantages of using Standard HTML helpers in ASP.NET MVC 5. Use of Standard HTML helpers in ASP.NET MVC 5 with example.
We are designing the student registration page using standard Html helpers as follow:
In this article, you will learn the following points about Standard HTML Helpers in MVC 5.
What is Standard HTML Helper in Asp.NET MVC5?
List of standard HTML Helpers
How to use Standard HTML helpers on View?.
Example of Standard HTML helpers?
Advantages of using Standard HTML Helpers
Interview Question & Home Work
Following are the previews article on ASP.NET MVC 5
- HTML Helpers with example In MVC 5
- Razor View Engine in ASP.NET MVC 5
- Model in ASP.NET MVC 5
- Action Method in MVC 5 with example
What is Standard HTML Helper in Asp.NET MVC5?
- Standard HTML Helpers are used to render the most common type of HTML controls like Label,TextBox, Password, TextArea, CheckBox, RadioButtion, DropDownList, Listbox,Display,Editor and ActionLink etc.
- Html helpers are always starting with @HTML and It is an object of Html helper class.@ symbol is used to access the server-side code. The extension method of the Html helper class has several overloaded methods. we can use it as per our requirement.
- Html is a property of type HtmlHelper included in base class of razor view WebViewPage. TextBox() or TextBoxFor()... is extension methods included in HtmlHelper class.
- HtmlHelper class generates html elements. For example,@Html.ActionLink("Add Empoyee", "Create","Employee") would generate anchor tag <a href="/Employee/Create">Add Empolyee</a>.
List of Standard HTML Helpers In ASP.NET MVC 5
- @Html.TextBox
- @Html.Password
- @Html.TextArea
- @Html.CheckBox
- @Html.RadioButton
- @Html.DropDownList
- @Html.ListBox
- @Html.Hidden
- @Html.Display
- @Html.Editor
- @Html.ActionLink
- @Html.BeginForm
- @Html.Label
@Html.TextBox() :
Html helper class is used to generates Html elements. TextBox() helper method is a loosely typed extension method which is used to create textbox(<input type=”text”>) element in razor view.
@Html.TextBox() method inside the “System.Web.Mvc.Html” namespace. And the return type is “MvcHtmlString”.
TextBox() Method Signature:
MvcHtmlString Html.TextBox(string name, string value, object htmlAttributes)
The TextBox() method is a loosely typed method because It has a name parameter is a string. So it does not depends on the model. So it automatically displays the value of the model property in a textbox and visa-Versa. The name parameter can be model class property. The value should be the value of the property. The third parameter is Html Attribute can provide CSS or Id to the textbox. It has several overload methods we can use as per our requirement.
How to use TextBox() in Razor view
@Html.TextBox("txtUserName", "", new { @class = "form-control" })
Html Result:
<input class="form-control" id="txtUserName" name="txtUserName" type="text" value="">
Output:
How to set default value to TextBox() in Razor view
@Html.TextBox("txtUserName", "Test Value", new { @class = "form-control" })
@Html.Password():
Html helper class is used to generates Html elements. The password () helper method is a loosely typed extension method that is used to create a textbox(<input type=”password”>) element in the razor view.
@Html.Password() method inside the “System.Web.Mvc.Html” namespace. And the return type is “MvcHtmlString”.
Password() Method Signature:
MvcHtmlString Html.Password(string name, string value, object htmlAttributes).
The Password() 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 binding the property. So it automatically displays a value of the model property in a password and visa-Versa. The third parameter is Html Attribute can provide CSS or Id to the Password. It has several overload methods we can use as per our requirement.
How to use Password() Helper in Razor view
@Html.Password("Password", "", new { @class = "form-control" }
Html Result:
<input class="form-control" id="Password" name="Password" type="password" value="">
Output:
@Html.TextArea():
Html helper class is used to generates html elements. TextArea() helper method is loosely typed extension method which is used to create TextArea(<textarea cols="20" id="Address" name="Address" rows="2"> </textarea>) element in razor view.
@Html.TextArea() method inside the “System.Web.Mvc.Html” namespace. And the return type is “MvcHtmlString”.
TextArea() Method Signature:
MvcHtmlString Html.TextArea(string name, string value, object htmlAttributes)
The TextArea() 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 textarea and visa-Versa. The third parameter is Html Attribute can provide CSS, ID to the TextArea. It has several overload methods we can use as per our requirement.
How to use TextArea() Helper in Razor view
@Html.TextArea("Address", " ", new { @class = "form-control",id="IdAddress" })
Html Result:
<textarea class="form-control"
cols="20"
id="IdAddress"
name="Address"
rows="2">
</textarea>
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:
- Standard HTML Helpers In MVC 5 (Video)
- Standard HTML Helpers In MVC 5
- Standard HTML Helpers In MVC 5(MSDN)
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:
- Subscribe my YouTube Chanel
- Like the Facebook page.
- Follow on Twitter
- Share with your friends
- Add your valuable comment.
Thanks you so much.
ReplyDelete