HTML Helpers In ASP.NET MVC

Ankur Mistry
8y
73.2k
0
11

Article

It provides an easy way to Render HTML in our View.

The following is the list of Html Helper controls.

Html.Beginform
Html.EndForm
Html.Label
Html.TextBox
Html.TextArea
Html.Password
Html.DropDownList
Html.CheckBox
Html.RedioButton
Html.ListBox
Html.Hidden

Below are Strongly Type Html Helper methods, this will allow us to check compile time errors. We get Model's Property intelligence at Runtime.

Html.LabelFor
Html.TextBoxFor
Html.TextAreaFor
Html.DropDownListFor
Html.CheckBoxFor
Html.RadioButtonFor
Html.ListBoxFor
Html.HiddenFor

Let's dig intothe details, we have to design one registration form using above controls shown as per below screen.

Here we have Label, Textbox, Password, Rediobutton, DropDown and Checkbox.

In ASP.NET Application we have Server Controls, so we just need to drag and drop from the Toolbox and design the page easily, but here in MVC Application we don't have Server Control so either we can use html or Html Helper Class Controls.

One more important thing here is in MVC there is no ViewState, so managing controls value here is challenging.

Create a new MVC Project, go to Files - > New Project -> ASP.NET Web Application and Select MVC Template. Give a name and Click on Ok.

Right click on Model folder and add new Class 'Register.cs'.

Create a property for the Register class as follows.

public class Register
{
public string Name { get; set; }
public string Phone { get; set; }
public string Email { get; set; }
public string Gender { get; set; }
public string Password { get; set; }
public string Country { get; set; }
public bool Terms { get; set; }
}

Let's use HomeController and it's view 'Index.cshtml'

In the html part let's start the with Html.BeginForm.

That is the main container, we will place all controls inside the tag.

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
}

Here in Html.Beginform we are passing View name (Index), Controller name (Home) and declare formMethod = Post Method.

If you are not passing any parameter like View name and Controller name then it will automatically call the current controller action method having [HttpPost] attribute.

Inside the Form Let's Start with Html.Lable : @Html.Label("UserName").

This will create a Lable Named UserName, so for Creating Label we will use @Html.Lable

Next, We need Textbox for the UserName, for that we use Html.TextBox same as @Html.TextBox("UserName").

This will Create a TextBox Named UserName.

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<br />
@Html.Label("UserName")
@Html.TextBox("UserName")
<br />
}

Same way we will design UserPhone, UserEmail etc.

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<br />
@Html.Label("UserName")
@Html.TextBox("UserName")
<br />
@Html.Label("UserPhone")
@Html.TextBox("UserPhone")
<br />
@Html.Label("UserEmail")
@Html.TextBox("UserEmail")
<br />
}

For Password Type Textbox We can use Html.Password : @Html.Password("UserPassword")

@Html.Label("UserPassword")
@Html.Password("UserPassword")
<br />

For Gender (Male/Female) we can use RadioButton and for that you can use Html.RadioButton as follows

@Html.Label("M")
@Html.RadioButton("M", new { value = "Male" })
@Html.Label("F")
@Html.RadioButton("F", new { value = "Female" })
<br />

For Country selection we can use dropdown and for that we have Html.DropDownList.

Here we have to create a list for the country for that I have added below code outside of BeginForm tag.

@{
var MyList = new List<SelectListItem>(){
new SelectListItem(){Value="1",Text="India"},
new SelectListItem(){Value="2",Text="UK"}
};
}

Now Use this MyList in your Html.DropDownList as follows.

@Html.Label("UserCountry")
@Html.DropDownList("UserCountry", MyList)
<br />

Same way for Checkbox we use Html.CheckBox

<br />
@Html.Label("UserTerms")
@Html.CheckBox("UserTerms")
<br />

Add Submit button in the view as follows.

<input type="submit" value="Submit" />

Now run your application. It will display your html helper contols like label, textbox, rediobutton, etc.

Below is the view of html which shows Render of controls. Here you can see the id and name property of control id="UserName" and Name = "UserName".

<form action="/" method="post">
<br />
<label for="UserName">UserName</label>
<input id="UserName" name="UserName" type="text" value="" />
<br />
<label for="UserPhone">UserPhone</label>
<input id="UserPhone" name="UserPhone" type="text" value="" />
<br />
<label for="UserEmail">UserEmail</label>
<input id="UserEmail" name="UserEmail" type="text" value="" />
<br />
<label for="UserPassword">UserPassword</label>
<input id="UserPassword" name="UserPassword" type="password" />
<br />
<label for="M">M</label>
<input id="M" name="M" type="radio" value="{ value = Male }" />
<label for="F">F</label>
<input id="F" name="F" type="radio" value="{ value = Female }" />
<br />
<label for="UserCountry">UserCountry</label>
<select id="UserCountry" name="UserCountry">
<option value="1">India</option>
<option value="2">UK</option>
</select>
<br />
<label for="UserTerms">UserTerms</label>
<input id="UserTerms" name="UserTerms" type="checkbox" value="true" />
<input name="UserTerms" type="hidden" value="false" />
<br />
<input type="submit" value="Submit" />
</form>

Same thing but we will bind this with our model. I have already created the model class which is 'Register.cs'

Go to your HomeController and add Model reference.

using WebHelper.Models;

and in the Index method write below code.

I have added [HrtpPost] Attributes here, and pass object r of Register class.

[HttpPost]
public ActionResult Index(Register r)
{
return View();
}

Now, I have designed the same form by binding it through Model property using Html Helper methods.

For Label we can use Html.LabelFor and assign it with the property 'Name', 'Email', 'Phone' Etc.

By writing m => m.Name we are binding label with the model property 'Name'.

Same way for Textbox we can use Html.TextBoxFor and assign it with the property 'Name', 'Email', 'Phone' Etc

Html.PasswordFor for Password field, Html.RadioButtonFor for Password field, Html.DropDownListFor for dropdown field, Html.CheckBoxFor for checkbox field etc.

Check below html code for the same form.