Krishan Dutt Sharma

Web Developer

Element in ASP.NET MVC View

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, Radio button, 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.

  • Hidden Fields in Razor HTML Helper

If we just need to create a hidden form element, we use @Html.Hidden HTML helper method.

@Html.Hidden("Name", "Value Optional")

If the hidden element needs to be created for the property of the Model in the view, we can use @Html.HiddenFor HTML helper method.

@Html.HiddenFor(model => model.AutoId)

In some scenario, we can also use

<input type="hidden" name="myHiddendData" value="@Model.AutoId" />

Here, the value of the AutoId from the model will be stored into the myHiddenData hidden element.

  • TextBox in Razor HTML Helper

To create a Textbox, use @Html.TextBox helper method.

@Html.TextBox("FirstName", "Value Optional") 

If the view is using Model and we need to create a Textbox corresponding to the Model property, we can use @Html.TextBoxFor helper method

@Html.TextBoxFor(model => model.FirstName) 

Or

@Html.EditorFor(model => model.FirstName) 

The difference between @Html.TextBoxFor and @Html.EditorFor are following

  • Radio Button in Razor HTML Helper

 

To create radio buttons, we can use @Html.RadioButton helper method. We need to ensure that the name of the radio buttons are same if we want to make them mutually exclusive.

@using (Html.BeginForm())
{ 
<text> 
@Html.RadioButton("Active", "true") Yes 
@Html.RadioButton("Active", "false", true) No 
</text>
}

Despite the fact that we have @Html.RadioButtonFor, it is not so useful in this context as it only creates one radio button that is not going to be useful as if it is selected, you can’t deselect it.

  • CheckBox in Razor HTML Helper

To create a CheckBox, we can use @Html.CheckBox HTML helper method.

@Html.CheckBox("Active1")

Above code snippet creates a checkbox whose name attribute would be “Active1”

Output

<input type="checkbox" name="Active1" />

If the View is using Model and the property is of type Bit (Boolean), we can use @Html.CheckBoxFor

 @Html.CheckBoxFor(model => model.Active) 

Output

<input type="checkbox" name="Active" />
  • DropDown in Razor HTML Helper

There are few scenarios when we need to create a dropdown in the ASP.NET MVC Razor view.

To bind static items in the DropDownList

@Html.DropDownList("dropRoles", new List<SelectListItem>() 
{ 
new SelectListItem() { Text= "Yes", Value = "true" }, 
new SelectListItem() { Text= "No", Value = "false", Selected = true } 
}, "Select ...")

Here, the name of the DropDownList is droproles and items will be Yes and No. The first item will be “Select …”.

In case the requirement is to bind the DropDownList items from action method of the Controller, we need to set the items collection into ViewBag and use it as source code.

CONTROLLER ACTION METHOD CODE

var data = from p in db.PersonalDetails 
join f in db.Files 
on p.AutoId equals f.PersonalDetailsId 
select new 
{ 
PersonName = p.FirstName, 
MyFileName = f.FileName 
}; 
SelectList list = new SelectList(data, "MyFileName", "PersonName"); 
ViewBag.Roles = list;

VIEW CODE

@Html.DropDownList("MultipleTables", ViewBag.Roles as SelectList)

Here SelectList instance accepts the collection of the object as a parameter from which the source of the DropDown to build, the second parameter is the name of the data value field and the third parameter is the text value field that would be used in the item of the DropDownList.

  • ListBox in Razor HTML Helper

Creating ListBox is similar to DropDownList except that instead of using @Html.DropDownList, we use @Html.ListBox or @Html.ListBoxFor. Remaining all other approaches to populate items in the ListBox is same as DropDownList.