Strongly Typed Custom HTML Helpers in MVC

In this article we learn how to create strongly typed custom HTML Helpers in MVC.

In previous article ‘Custom HTML helpers in MVC’ we learn how to create custom html helpers. In This article we learn to create strongly typed custom html helpers.

To create a strongly typed helper we need to understand what makes them different from regular HTML Helpers. Strongly typed helpers are used to pass data from the Model to the helper using expression syntax. The ‘HtmlHelper<TModel>’ class is a strongly typed subclass of the ‘HtmlHelper’ class. 

Creating Strongly Custom Helper:

To create strongly typed custom helper we write extension method for ‘HtmlHelper<TModel>’ class**.** We also use following to classes

1 .Expression:

While using strongly typed helper on view we use lambda expression like ‘@Html.TextBoxFor(m=>m.Name)’. Expression class is used to get the model information from this lambda expression. 

2. ModelMetaData:

This class is used to get model information with its data from lambda expression.

Example:

Add new class in MVC application and give it meaningful name. Add one model class as User as below.

public class User
{
    public string UserName { get; set; }
}

In this application add class “CustomHelper”. As we are going to create extension method make this class static. Write the following code in class

using System;
using System.Linq.Expressions;
using System.Web.Mvc;
 
namespace StrongCustomHelpers
{
    public static class CustomHelper
    {    
        public static MvcHtmlString CustomTextBoxFor<TModel, TProperty>
        (this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
        {
            var name = ExpressionHelper.GetExpressionText(expression);
            var metadata = ModelMetadata.FromLambdaExpression(expression,     htmlHelper.ViewData);
            TagBuilder tb = new TagBuilder("input");
            tb.Attributes.Add("type", "text");
            tb.Attributes.Add("name", name);
            tb.Attributes.Add("value", metadata.Model as string);
            tb.Attributes.Add("style","color:red");
            return new MvcHtmlString(tb.ToString());
        }
    }
}

In above code we create static method CustomTextBoxFor for HtmlHelper<TModel> class. In this method we create html tag with the help of TagBulider class. We get name of model’s property with help of ‘GetExpressionText()’ method of ‘Expression’ class. This name is used as Id for helper element on view. We get model data with the help of ‘FromLambdaExpression()’ method. And then use this data as value for helper element. We also set the forcolor of text input to red.

Now we can use this helper on view as below

Add this helper to view for UserName property as below

Html.CustomTextBoxFor(m=>m.UserName)

Run application and check output.

Advantages of creating custom helpers:

The advantage of custom helper is that suppose we create helper with some style attributes or other properties. Then we don’t need to write the same code on multiple views for those properties. We just need to add custom helper. Like in above example we create text field with red fore-color. So when we need a text field with red color we don’t need to write style, we just use this new helper instead of inbuilt helper.

Conclusion:

In this article we learned to create strongly typed custom html helper. This will helps us to remove some redundant code from application.