Give me the brief explanation of Html Helper in MVC with an example and also with an image.
What is HTML Helper in Asp.Net MVC Razor View?
46805-Feb-2020
Updated on 05-Feb-2020
forum
Home / DeveloperSection / Forums / What is HTML Helper in Asp.Net MVC Razor View?
Nishi Tiwari
05-Feb-2020Usually in asp.net MVC, we use Html helpers in a view so to render Html content. The asp.net MVC Html helper is a method that helps us to return Html content as a string.
The web application’s basic thing is to render HTML as output. In the .NET platform, we have ASP.NET Webforms and ASP.NET MVC frameworks to render HTML but they do rendering things in different ways.
In the ASP.NET Webforms, we only drag and drop the control on Form and in code behind .cs file, we will bind data to server controls to display HTML content on the page and in ASP.NET MVC we have only HTML Controls to display content in the page.
If we came from ASP.NET Webforms development background we will think ASP.NET Webforms are better when compared with ASP.NET MVC because here we need to write bulk of HTML that will get render in browser and writing the whole HTML will make developers bit crazy so to solve this problem ASP.NET MVC came up with HTML Helpers that will help us to render HTML in browser and the HTML helpers and server controls both are used to render HTML on browser.
In the asp.net MVC applications if we use HTML helper it won't maintain any ViewState and loading time of website which will reduce and page performance will increase drastically. In asp.net MVC razor view we have a different type of HTML helpers available these are
1) Basic HTML helpers
2) Strongly type HTML helpers
The list of all basic HTML helpers available in asp.net MVC are given below
1. @Html.BeginForm
2. @Html.EndForm
3. @Html.TextBox
4. @Html.TextArea
5. @Html.Password
6. @Html.Hidden
7. @Html.CheckBox
8. @Html.RadioButton
9. @Html.DropDownList
10. @Html.ListBox
The list of all strongly-typed HTML helpers available in asp.net MVC are given below
1. @Html.TextBoxFor
2. @Html.TextAreaFor
3. @Html.PasswordFor
4. @Html.HiddenFor
5. @Html.CheckBoxFor
6. @Html.RadioButtonFor
7. @Html.DropDownListFor
8. @Html.ListBoxFor
Syntax of Basic HTML Helper Controls
Syntaxes of using basic HTML helper controls in asp.net MVC application are:-
Textbox - @Html.TextBox("UserName")
TextArea - @Html.TextArea("UserAddress")
Password - @Html.Password("UserPassword")
Hidden field - @Html.Hidden("UserID")
Checkbox - @Html.CheckBox("Check")
Radiobutton - @Html.RadioButton("gender", "Male", true)Male
DropdownList - @Html.DropDownList("DrpCountry", new List<SelectListItem> {
new SelectListItem { Text = "select", Value = "0" } ,
new SelectListItem { Text = "India", Value = "1" },
new SelectListItem { Text = "USA", Value = "2" }
})
Listbox - @Html.ListBox("ListName", new List<SelectListItem> {
new SelectListItem { Text = "One", Value = "1" },
new SelectListItem { Text = "Two", Value = "2" },
new SelectListItem { Text = "Three", Value = "3" }
})
DisplayName - @Html.DisplayName("Displayname")
Editor - @Html.Editor("EditID")
Syntax of Strongly Type HTML Controls
The syntaxes of using strongly type HTML controls in asp.net MVC application are:-
Textbox - @Html.TextBoxFor(model => model.UserName)
TextArea - @Html.TextAreaFor(model => model.UserAge)
Password - @Html.PasswordFor(model => model.UserAddress)
Hidden field - @Html.HiddenFor(model => model.UserID)
Checkbox - @Html.CheckBoxFor(m => m.Usergender)
Radiobutton - @Html.RadioButtonFor(m => m.CheckID, true, new { @checked = "checked" })
DropdownList - @Html.DropDownListFor(m => m.UserID, Model.listdropdown)
Listbox - @Html.ListBoxFor(x => x.Listboxid, new SelectList(Model.listboxdata, "Id", "Name"))
DisplayName - @Html.DisplayFor(m => m.Listboxid)
Editor - @Html.EditorFor(model => model.UserMobileno)