Home > ASP.NET MVC > Strongly-typed Custom HtmlHelper in ASP.NET MVC 4

Strongly-typed Custom HtmlHelper in ASP.NET MVC 4


In this post you are going to see how  we can create Strongly-typed Custom  HtmlHelpers in ASP.NET MVC , you can see simple Custom  HtmlHelpers in ASP.NET MVC here .

So before creating Custom  Strongly-typed HtmlHelpers  , let’s see why we need Strongly-typed HtmlHelpers  if we have HtmlHelpers  in mvc already . So lets see below that use an untyped Html helper.

    <%= Html.TextBox(“Name”) %>

It is working as expected but sometime in future  you changed your class Name property from Name to EmplyeeName and same time you did not update View for this property and now your site is in live as you would be not getting any error about this mismatch between view and model at compile time and user on site experiencing that name is not working properly as this is expected as  EmplyeeName while binding view stuff to model property. So I need a mechanism that gets checked at compile time rather than run time that’s where  Strongly typed Html helper come into the picture.  Now see how Strongly typed HTML helper work and its syntax

 <%= Html.TextBoxFor(model => model.Name) %> //Strongly typed HTML helper

If you using Strongly typed HTML helper and changes Name to EmplyeeName then view compilation will be failed. Now , I think you got typed and untyped HTML Helper and its advantage too, so lets proceed to create Strongly-typed Custom  HtmlHelpers.

To create Strongly-typed Custom  HtmlHelpers , you use two classes

ExpressionHelper — Gets the model name from a lambda expression . This is used as ID and name of the field.
ModelMetadata    —  Gets other information about the lambda expression, including its value

so lets see code for it that will use both ExpressionHelper and ModelMetadata    classes

[sourcecode language="csharp"]
namespace MVC4CustomHelper.Helper
{
    public static class CustomHelper
    {
       public static MvcHtmlString CustomTextBox(this HtmlHelper htmlHelper,string name, string value)
        {
            var builder = new TagBuilder("input");
            builder.MergeAttribute("type", "text");
            builder.MergeAttribute("name", name);
            builder.MergeAttribute("value", value);
            return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
        }
       public static MvcHtmlString CustomTextBoxFor<TModel, TProperty>
                  (this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
        {
	    // name and ID for Html output
            var name =     ExpressionHelper.GetExpressionText(expression);

            //value for html control
            var metadata = ModelMetadata.FromLambdaExpression(expression,htmlHelper.ViewData);

            return CustomTextBox(htmlHelper, name, metadata.Model as string);
        }

    }
}
[/sourcecode]

Now take references in View or can take references in web config too

[sourcecode language="csharp"]
<%@ Import Namespace="MVC4CustomHelper.Helper" %>
[/sourcecode]

Using created Custom Html Helper method in view

[sourcecode language="csharp"]
<%= Html.CustomTextBoxFor(model => model.Name )%>
[/sourcecode]

you you like this post then do not forget to like and comments 🙂

Advertisements
Categories: ASP.NET MVC Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: