HTML Helpers in ASP.NET MVC

What is HTML Helper?

HTML Helpers are methods that return a string value to render HTML information in a view, allowing for faster development in ASP.NET MVC applications. They are more lightweight than ASP.NET Web Form controls since they do not rely on ViewState or event models. ASP.NET MVC has built-in Helper functions.

Different types of HTML Helpers

There are three types of HTML helpers, as listed below:

1. Inline
2. Built-in
3. Custom

Inline HTML Helpers

In MVC 5, an inline HTML Helper is used to construct a reusable Helper method with the Razor @helper tag. These are built in the same view using the Razor @helper tag, and they can only be reused on the same view.

Advantages of Inline HTML Helpers

• It saves code repetition and is simple to design and utilize.
• The approach can easily be customized to meet specific requirements.
• Inline helpers can only be reused within the same view.
• We are unable to use the Inline Helper for the various view pages.
• We can define our Inline helper method according to our needs.

Built-in HTML Helpers

Built-in HTML Helpers are extension methods for the HTMLHelper class. The built-in HTML helps are separated into three categories:

1. Standard Html Helpers
2. Strongly Typed HTML Helpers
3. Templated HTML Helpers

Standard HTML Helpers

These helpers are used to render the most popular HTML components, such as text boxes and checkboxes. A list of the most frequent standard html helpers is provided below.

• TextBox: Creates a <input> element of type text.
• TextArea: Generates a <textarea> element for multiline text input.
• Password: Creates a <input> element of type password.
• Hidden Field: Creates an input> element of type hidden.
• CheckBox: Displays a checkbox input (<input type="checkbox">).
• RadioButton: Makes a radio button input (<input type="radio">).
• Drop-down list: A drop-down list generates a <select> element for single item selection.
• Multiple-select: Generates a <select> element to choose multiple items (via the multiple property).

Strongly Typed HTML Helpers

ASP.NET MVC's strongly typed HTML helpers use model properties to render HTML components such as text boxes and checkboxes. They use lambda expressions to bind model data, dynamically assigning properties like id, name, and value.

• TextBoxFor: Generates a text-based <input> element with a given model property.
• TextAreaFor: Creates a <textarea> element for multiline text input, tied to a model property.
• PasswordFor: Generates a <input> element of the password type, linked to a model property.
• HiddenFor: Creates a hidden <input> element for a model property.
• CheckBoxFor: Creates a checkbox input (<input type="checkbox">) that corresponds to a boolean model property.
• RadioButtonFor: Generates a radio button input (<input type="radio">) linked to a model property.
• DropDownListFor: Creates a <select> element for single-item selection, tied to a model property.
• ListBoxFor: Generates a <select> element for selecting multiple items using various attributes, linked to a model property.

Templated HTML Helpers

These utilities dynamically render HTML elements based on the characteristics of your model, giving you more control over how your data is displayed to users. To successfully configure these aids, use properties such as DataType from the DataAnnotation class to ensure proper HTML element configuration.

• Display: Creates a read-only display of a model property's value, formatted according to the data type.
• DisplayFor: Creates a read-only display for a given model property, with suitable formatting based on the data type.
• Editor: Creates an editable input control for a model property based on its data type.
• EditorFor: Creates an editable input control for a specified model property, applying the relevant settings based on the data type and other information.

Custom HTML Helpers

You may create your custom helper methods by adding an extension method to the HTMLHelper class or by writing static methods within a utility class.

URL Helpers

Url helpers allow you to display both HTML links and raw URLs. The output of these helpers depends on the routing setup of your ASP.NET MVC application.

• Relative URL: Generates a URL based on the current request context, without specifying the protocol or domain.
• Based on action/controller: Creates a URL using the supplied controller and action names, allowing parameters to be passed to the action method.
• Raw URL for Action: Generates a URL based on the action method and controller names, with the possibility to put arguments directly in the URL string.

Validation Summary

The ValidationSummary helper in ASP.NET MVC displays an unordered collection of validation errors from the ModelState dictionary. It accepts a boolean input that specifies whether to display only model-level errors (true) or both model and property-level problems (false).