Asp .Net MVC - SPLessons

ASP.Net MVC HTML Helpers

Home > Lesson > Chapter 13
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

ASP.Net MVC HTML Helpers

ASP.Net MVC HTML Helpers

What is HTML Property?

shape Description

HTML property of a view page is used to create HTML Helper Controls. Namespace: System.Web.MVC.HTML <Object>

HTML Helper Controls

shape Description

HTML Helper Controls are methods which returns any type of strings.HTML Helper Controls are similar to HTML Controls or ASP.Net Webform Controls. The following are some features of HTML Helper Controls.
  • HTML Helper Controls are Light Weight Controls compared with ASP.Net Webform Controls.
  • HTML Helper Controls do not support Event Handling.
  • HTML Helper Controls do not support View State or Control State.
  • Every HTML Helper Control method will render the appropriate or Equivalent HTML code to the client.

shape Types

There are mainly 3 types of  HTML Helper Controls.
  • Built-in HTML Helper Controls
  • Inline HTML Helper Controls
  • Custom HTML Helper Controls

List of Built-in HTML Helper Controls

shape List

Built-in HTML helper Control
  • Label(String Expression,String labelText)
  • Action(String Action Name)
  • ActionLink(string Text, String ActionName)
  • CheckBox(String Name, Bool Checked)
  • Display(String Expression, String TemplateName, Object AdditionalData)
  • DisplayName(String Expression)
  • DisplayText(String Name)
  • DropdownList(String Name, IEnumerable List, String Optionlabel)
  • Editor(String Expression, String TemplateName. Object Additional View Data)
  • EnableClientValidation(bool Enabled)
  • Encode(Object Value)
  • FormatValue(Object Value,Format String)
  • Hidden(StringName, Object Value)
  • HTTPMethodOverride(String HTTPMethod)
  • Id(String Name)
  • ListBox(String Name, IEnumarable List)
  • Partial(String Partial ViewName)
  • Password(String Name, Object Value)
  • RadioButton(String Name, Object Value, bool Checked)
  • RenderAction(String Action Name,String Controller Name)
  • RenderPartial(String Partial ViewName)
  • RouteLink(String Text, ObjectRoute Value)
  • TextArea(String Name, String Value)
  • TextBox(String Name,Object Value, String Format)
  • Validate(String ModelName)
  • ValidationMessage(String ModelName, String ValidationMessage)
  • ValidationSummary(bool ExcludePropertyErrors, String Message)
  • Value(String Name, String Format)

shape Example

Requirement: Bind a List Box and a Combo Box Using HTML Helper Controls.
  • Open Visual Studio Ultimate 2013.
  • Create a new MVC Application.
  • Create a view page with the name "ComboBoxExample".
  • Write the below code in the ComboBoxExample.cshtml
[html] @{ ViewBag.Title = "ComboBoxExample"; } <h2>ComboBox and ListBox Example</h2> <div> @Html.Label("lblBranch", "Select Branch"); @*Creates a label controlnamed as "lblBranch"*@ @Html.DropDownList("cmbBranch"); @*Creates a combo Box Controlnamed as "cmbBranch"*@ @Html.Label("lblCountry", "Select Your Country"); @*Creates a label control named as "lblCountry"*@ @Html.ListBox("cmbCountry"); @*Creates a combo Box Controlnamed as "cmbCountry"*@ </div> [/html]
  • Go to Solution Explorer and Click on the HomeController.cs under the Controllers->Home.
  • Write the following code in the  HomeController.cs file.
[csharp] public ActionResult ComboBoxExample() { List<string> Branch = new List<string> { "CSE", "ECE", "Civil" }; //Creates a list with name "Branch" List<string> Country = new List<string> { "Astrelia", "India", "Usa" };//Creates a list with name "Country" ViewData["cmbBranch"] = new SelectList(Branch); //Binds the "Branch" list to "cmbBranch" combo box ViewData["cmbCountry"] = new SelectList(Country); //Binds the "Country" list to "cmbCountry" combo box return View(); } [/csharp]
  • Change the Action Name as "ComboBoxExample" in the RouteConfig.cs
  • Press F5 to run the Application. Then the output will appear in the browser as follows.