Built-In HTML Helper Class in MVC

In this article we will see various extension methods of the HTML helper class in MVC. The HTML helper class was added to MVC version 2. So, to understand the example on hand you need to have MVC 2 and later the project one in Visual Studio.

Now, let's discuss the HTML helper class and why it is needed. We know that MVC stands for Model-View-Controller and the functionality of a View is to display output, we can treat it as a client or Web Form in a traditional web form application.

For rapid development of a View we can use a HTML helper class. It contains many extension methods that we can use to create a HTML element.

There are the following three types of HTML helpers and again a built-In helper can be categorized into the following three categories. The hierarchy is as in the following.

• Inline HTML helper
• Built-In HTML helper
  1. Standard HTML helper
  2. Strongly typed HTML helper
  3. Template HTML helper
• Custom HTML helper

Now, in this article I am interested in discussing the built-In helper and it's sub-categories. In our next article we will discuss the Custom HTML helper class.

Let's clarify some possible confusion that frequently occurs in the mind of new MVC developers. The HTML helper classes and their functions are C# code or probably VB.NET code, so how is it generated and becomes a HTML element?

Yes, it is compiled in the same way as Web Forms are. Various view engines are responsible for compiling the view and at the day's end each one generates a raw HTML element. So, whatever your View engine is, it will all produce the same HTML. There are many view engines associated with MVC and .NET. Razor is one of the popular among them. The syntax is very simple and lightweight. In this example we will use the Rozar view as the view Engine.

So, let's try to understand the various built in HTML helper functions.

Standard HTML helper

These helpers are used to render the most common types of HTML elements such as HTML text boxes, checkboxes and so on.

Form

To create a HTML form, we can use the BeginForm() and EndForm() extension methods of the HTML helper class. The BeginForm has 13 overloaded versions that accept various parameters as needed. In the following screen, we have highlighted the number of overloaded functions.



The most common and popular signature is as in the following.

<div>
    @{
        Html.BeginForm("action", "controller", "POST");
        Html.EndForm();
    }
</div>

It takes three parameters, the first one is the action name that is so called the function within the controller and the second one is the controller name and the third one is the method, in other words GET, POST, PUT and so on.

TextBox

We can create a text box using the TextBox() method of HTML helper, it has 7 overloaded versions, we are seeing it in the following screen.



And the most common and simplest one is to pass the name as the parameter, although we can set the value and decorate it by supplying many properties. Here is the most common one.

@{
Html.TextBox("name");
}

CheckBox

The Checkbox function of HTML helper can produce checkboxes in the view, there are 6 overloaded versions of it.



The second version is the most common, it will use the name as the first argument and a Boolean value as the second. We are supplying true, in other words it's checked by default.

Radio Button

A Radio Button can be created using the RadioButton() extension function. There are six overloaded versions of it, we can choose the second one for general purposes.



Drop Down list

There are eight overloaded functions for a Drop down list. In this example we have chosen the second one that takes name as the first argument and a collection of strings as a SelectList in the second argument.



Strongly Typed HTML Helpers

These helpers are used to render the most common types of HTML elements in a strongly typed view such as HTML text boxes, checkboxes and so on. The HTML elements are created based on model properties.

The strongly typed HTML helpers work on lambda expressions. The model object is passed as a value to the lambda expression and you can select the field or property from the model object to be used to set the id, name and value attributes of the HTML helper.

To implement a strongly typed HTML helper we need to first implement a strongly typed view. Let's create one Model like the following and then we will create one strongly typed view from this mode.

namespace WebAPI.Models
{
    public class strongView
    {
        public string name { get; set; }
        public string password { get; set; }
        public string HiddenValue { get; set; }
        public string[] MultiSelect { get; set; }
    }
}

Now, I have added one strongly typed view as in the following.



It's pointing to the “strongView” model that we created earlier. Now we are allowed to create a strongly typed HTML helper.

Text Box

The TextBoxFor() extension method will help to create a string type TextBox. We can use a lambda expression for that and currently the following TextBox is pointing to the name property of one model.



Hidden Field

The hidden field we can create using a HiddenFor() extension method and the example is as in the following, it's pointing to the HiddenValue property of the Model class.



Password Type

The Password type we can be created using the PasswordFor() extension method. This method will generate a HTML password element and currently it's pointing to the password field of the Model class.



Multi Select List

We can implement a Multi-select list using a ListBoxFor() extension method of HTML helper function. The implementation is as in the following.



Template HTML helper

These helpers determine what HTML elements are required to be rendered based on properties of the model class. This is a very flexible approach for displaying data to the user, although it requires some initial care and attention to set up. To set up a HTML element properly with a Templated HTML Helper, use the DataType attribute of the DataAnnitation class.

For example, when you use DataType as Password, a templated helper automatically renders a Password type HTML input element.

Display

Renders a read-only view of the specified model property and selects an appropriate HTML element based on the property's data type and metadata. DisplayFor() is to point to a model property in the strongly typed view.



Editor

Renders an editor for the specified model property and selects an appropriate HTML element based on the property's data type and metadata,



Conclusion

In this article we saw various types of Built-In HTML helper functions associated with a HTML helper class. I hope this will help to understand the basic concepts of HTML helpers to create views in MVC applications.