ASP.NET  

HTML Helper Methods In MVC

Synopsis

  1. Introduction
  2. Definition
  3. Advantages
  4. Different Controls

Introduction

Html helper is one of the main advantages of MVC. HTML Helper uses any view engine in MVC. It contains many methods, using these methods we create controls like Text box, Check box, Radio button and so on.

Definition

Html Helper is a class. It supports the rendering of Html controls in view.

  • Namespace: System.Web.Mvc
  • Assembly: System.Web.Mvc (in System.Web.Mvc.dll)

Syntax

  1. namespace System.Web.Mvc  
  2. {  
  3.    public class HtmlHelper  
  4.    {  
  5.   
  6.    }  
  7. }  
Advantages

Html Helper is very fast. The browser only knows html if any application is developed and gives request to application from browser. This will take time to convert from server control to html control.

Using Html Helper control do not need to convert html control because it is default html control.

Without Html Helper

With Out Html Helper

With Html Helper

With Html Helper

HTML Class

Html Helper is a class. Create object for Html helper class then call html helper method and that method is an html helper control.

Example

 

  1. @Html.TextBox("txtName", "")  
Explanation

Here, @Html is an object for Html helper class. It is inside of WebViewPage of abstract class.

object

Above image can see the Html object marked in screen line. If you right click on the HtmlHelper and click go to definition, you can see html helper class.

see html helper class

Clicking Go To Definition we can see the HtmlHelper<TModel>; HtmlHelper inherited in HtmlHelper<TModel> class.

HtmlHelper inherited

In the above image we can see Html helper inherited in HtmlHelper<TModel>. Now,  right click on Html class and click go to definition.

Html class

Inside the Html class contains many variables, methods and properties. ViewBag, ViewData are also in Html Helper class. ViewBag is a dynamic variable and ViewData is a ViewDataDictionary object.

All controller methods are in InputExtensions static class. It contains all controller methods.
  1. public static MvcHtmlString CheckBox(this HtmlHelper htmlHelper, string name);  
  2. public static MvcHtmlString Password(this HtmlHelper htmlHelper, string name);  
  3. public static MvcHtmlString RadioButton(this HtmlHelper htmlHelper, string name, object value, bool isChecked);  
  4. public static MvcHtmlString TextBox(this HtmlHelper htmlHelper, string name);  
These are the method of controllers. It has different overloaded methods.

overloaded methods

HTML Helper Controls

Text Box

Create text box using Html Helper like below.
  1. @Html.TextBox("txtName", "")  
If you want to accept maximum length of character in text box, create the following:
  1. @Html.TextBox("txtName", "", new { style="width:250px;",maxlength="5"})  
Text Area

We need to enter content when there is not enough text box so we use text area. In text area we have two attributes, one is row and another one is cols.
  1. @Html.TextArea("txtNotes", "", new { style = "width:250px;", rows="3",cols="10" })  
Check box

If you need to select more than one option use check box. Check box can be created using html helper.
  1. @Html.CheckBox("chkTamil",true)Tamil 
  2. @Html.CheckBox("chkEnglish")English  
Radio Button

If you need to select any one option, use radio button. Radio button can be created in html helper like below.
  1. @Html.RadioButton("rdoSex",'m',true)Male 
  2. @Html.RadioButton("rdoSex",'f')Female  
Drop Down List

Normally, drop down list reduce the space in design of application. If you need to select more than one from the list, use drop down list.
  1. @Html.DropDownList("ddlCountry", new SelectList(new List < Object >  
  2. {  
  3.     new  
  4.     {  
  5.         value = 0, text = "--Select--"  
  6.     },  
  7.     new  
  8.     {  
  9.         value = 1, text = "India"  
  10.     },  
  11.     new  
  12.     {  
  13.         value = 2, text = "UK"  
  14.     },  
  15.     new  
  16.     {  
  17.         value = 3, text = "Kondankatture"  
  18.     }  
  19. }, "value", "text", 0))  
We can set default selected value in drop down list.

Note

Create a style or create CSS and apply for html helper controls. We can see example below.

 

  1. <style>  
  2.    .clss {
  3.          color: red; font-family: 'Times New Roman'; font-size: 15px;  
  4.          background-color: yellow;  
  5.    }  
  6. </style>  
  7.   
  8. @Html.TextBox("txtAddress", "", new { style = "width:250px;",@class="clss"})  
Created CSS class as clss and apply like @class="clss"
 
@class attribute is used to call CSS class.

Conclusion

We can create many controls using html helper. We can create our own controls using html helper. This article helps those who are learning MVC for the first time. Html Helper is the main advantage of MVC.

Read more articles on MVC:

Membership not found