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

namespace System.Web.Mvc
{
   public class HtmlHelper
   {

   }
}

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 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

 

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

Explanation

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



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.



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



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



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.

public static MvcHtmlString CheckBox(this HtmlHelper htmlHelper, string name);
public static MvcHtmlString Password(this HtmlHelper htmlHelper, string name);
public static MvcHtmlString RadioButton(this HtmlHelper htmlHelper, string name, object value, bool isChecked);
public static MvcHtmlString TextBox(this HtmlHelper htmlHelper, string name);

These are the method of controllers. It has different overloaded methods.



HTML Helper Controls

Text Box

Create text box using Html Helper like below.

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

If you want to accept maximum length of character in text box, create the following:

@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.

@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.

@Html.CheckBox("chkTamil",true)Tamil
@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.

@Html.RadioButton("rdoSex",'m',true)Male
@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.

@Html.DropDownList("ddlCountry", new SelectList(new List < Object >
{
    new
    {
        value = 0, text = "--Select--"
    },
    new
    {
        value = 1, text = "India"
    },
    new
    {
        value = 2, text = "UK"
    },
    new
    {
        value = 3, text = "Kondankatture"
    }
}, "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.

 

<style>
   .clss {
         color: red; font-family: 'Times New Roman'; font-size: 15px;
         background-color: yellow;
   }
</style>

@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:

• Simple Login Application Using ASP.NET MVC
• jQuery DatePicker With Month And Year In ASP.NET MVC