MVC HTML Helper methods - Inline, Standard and Strongly Typed HTML Helpers

Topics Overview

• HTML Helper method
• Types of HTML Helpers
• Features of HTML Helper Methods

HTML Helper method

HTML Helper method is a method which returns HTML code as string. Using this method, we can get HTML tags such as <input>, <img>, <button> etc.

The question is why HTML helper method is used to create HTML control on the view page instead of usual form tags. We can use either of the techniques to create a HTML control on view page but HTML helper method is preferred in MVC project. This will become obvious at the end of the post. First we see how HTML helper methods are used to create HTML controls on view page in MVC project.

Types of HTML Helpers

1. Inline HTML Helpers
2. Standard HTML Helpers
3. Strongly Typed HTML Helpers

1. Inline HTML helper

Inline HTML helper is created in .NET MVC View file using @helper directive followed by method-name and then its body. The syntax is as follows.

@helper MethodName{} 

The return type is implicitly string datatype. The method may have arguments.

To call the Inline HTML helper in the view page, the syntax is as follows:

• @HTMLMethodName()

• @HTMLMethodName(arguments)

Example

@helper Add(int a, int b)  
{  
    <span>@(a + b)</span>  
}  

<div style="background-color:cyan;">  
    <p>Number1 is 100</p>
    <p>Number2 is 200</p>
    <p>The sum of above two numbers is @Add(100, 200)</p>  
</div> 

2. Standard Html Helper

Standard Html Helper is in-built HTML helper method. We do not have to define them. To call this type of methods, the syntax is as follows:

• @Html.StandardHtmlHelperMethodName()
• @Html.StandardHtmlHelperMethodName(arguments)

NOTE: Here @Html is an object of the HtmlHelper class. Html is a property of the HtmlHelper class included in base class of razor view WebViewPage.

Example

<input id="textbox1" name="textbox1" type="text" value="value1" />

can be written as 

@Html.TextBox("textbox1", "value1") 

using Standard Html Helper. Here, textbox1 refers to name parameter of input tag.

Some other examples of Standard Html Helper methods:

• @Html.ActionLink(args)
• @Html.TextBox(args)
• @Html.CheckBox(args)
• @Html.RadioButton(args)
• @Html.BeginForm(args)
• @Html.Hidden(args)
• @Html.DropDownList(args)

Note: Many overloaded versions of Standard Html Helper method exists depending upon the arguments of the method. We can create different kinds of HTML form controls using Standard Html Helper methods.

Tips: We do not have to remember different overloaded versions of the above methods. In Visual Studio, in view page, simply enter comma inside the parentheses of the method, it will show different overloads of the method. Press down-arrow to see the next overloaded method's arguments.

3. Strongly typed Html Helper

Strongly typed Html Helper is extension of in-built Standard HTML helper method. The method name ends with For word. The standard HTML helper method name followed by For word is a strongly typed HTML helper method corresponding to the Standard HTML helper method. For example,

Example

<input id="StudentName" name="StudentName" type="text" value="value1" />

can be written as 

@Html.TextBoxFor(m=>m.StudentName) 

using Strongly Typed Html Helper.

Here m is a dummy variable denoting the model used in the view where the above code is used. Also, note that StudentName is a property of the model. 

@model directive

In fact, property of model is bound with HTML control. The view page uses the @model directive to denote the particular model used in the view page. In this way, view is strongly bound with model. Remember that only one model can be bound with a view, otherwise exception will occur. 

The syntax is 

• @model ProjectName.Models.modelName

Example: @model MyFirstProject.Models.Student

In fact, a model data of MVC is strongly bound with Strongly Typed HTML helper method via its argument. The argument of Strongly Typed HTML helper method appears in form of lambda expression as shown above.

Syntax of Lambda Expression

• (model => model.PropertyofModel)
• (dummyVar => dummyVar .PropertyofModel)
• => is called goes operator
• What appears in the L.H.S. of => are input parameter(s)
• What appears in the R.H.S. of => is output criteria expression
• Lambda expression is a kind of anonymous method which input parameters are in LHS of => and body statements are in RHS of => 

Features of HTML Helper Methods

1. They always return a string of HTML tags.
2. They are used on view pages.
3. They create HTML controls programmatically.
4. They help in binding model data with controls and hence facilitate faster development using less codes. This is the reason of using HTML helper methods instead of form tags directly in the view page in MVC project.
5. They are  lightweight as they do not use ViewState and event models.