Creating Custom Model Bound HTML Helper using Extension Method

Introduction

In my previous article we have discussed how to create (The stpes need to be done for creating) Custom Strongly Type or Model Bound HTML Helpe. This artcile demonstrates for creating Custom Model Bound HTML Helper.

Getting Started

This demonstration is done with Visual Studio 2015 and it creates a custom numeric model bound helper using HTML5 element. Open Microsoft Visual Studio, create a new MVC project, and name whatever you want, here we named "CustomTextBox".

Add a new class into your project by adding .cs file and name it "MyTextBox". Make this MyTextBox class static by using static key work like below code.

 public static class MyTextBox  
 {  
 }  

Again add new a static function into this class and name it "NumTextBoxFor" as we are going to create numeric helper for rendering numeric text box like below code.

  public static MvcHtmlString NumTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes)  
  {  
  }  

The first parameter is htmlHelper, because we are going to create extension method of HTML class. fore more about extension method visit my previous article. The second parameter is for getting meta data details of model like field name, id, validation details etc.and the last parameter is for getting htmlAttributes that user has provided in view like classes, javascript functions etc.

Now we will follow the steps that We have discussed in my previous article, according to my previous article first we need to retrieve metadata information of model> hence add below code into function "NumTextBoxFor" that retrieves metadata information.

 var fieldName = ExpressionHelper.GetExpressionText(expression);  
 var fullBindingName=  
 htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(fieldName);  
 var fieldId = TagBuilder.CreateSanitizedId(fullBindingName);  
 var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);  
 var value = metadata.Model;  
 IDictionary<string, object> validationAttributes = htmlHelper.GetUnobtrusiveValidationAttributes(fullBindingName, metadata);  

Again we will add below code for creating input object of numeric textbox

 TagBuilder NumTextBoxTag = new TagBuilder("input");  
 NumTextBoxTag.MergeAttribute("type", "number");  
 NumTextBoxTag.MergeAttribute("name", fullBindingName);  
 NumTextBoxTag.MergeAttribute("id", fieldId);  
 NumTextBoxTag.MergeAttribute("value", value.ToString());  

Above code creates object of numeric textbox, add below codes for apply validation and htmlAttributes

 foreach (var key in validationAttributes.Keys)  
 {  
    NumTextBoxTag.Attributes.Add(key, validationAttributes[key].ToString());  
 }  
 foreach(var key in htmlAttributes.Keys)  
 {  
    NumTextBoxTag.Attributes.Add(key, htmlAttributes[key].ToString());   
 }  

Now we will add code for rendering textbox in view, below code helps to render numeric textbox in view

 return MvcHtmlString.Create(NumTextBoxTag.ToString(TagRenderMode.SelfClosing));  

Overlas view of NumTextBoxFor function

 Public static MvcHtmlString NumTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IDictionary<string, object> htmlAttributes)  
     {  
       var fieldName = ExpressionHelper.GetExpressionText(expression);  
       var fullBindingName = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(fieldName);  
       var fieldId = TagBuilder.CreateSanitizedId(fullBindingName);  
       var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);  
       var value = metadata.Model;  
       IDictionary<string, object> validationAttributes = htmlHelper.GetUnobtrusiveValidationAttributes(fullBindingName, metadata);  
       TagBuilder NumTextBoxTag = new TagBuilder("input");  
       NumTextBoxTag.MergeAttribute("type", "number");  
       NumTextBoxTag.MergeAttribute("name", fullBindingName);  
       NumTextBoxTag.MergeAttribute("id", fieldId);  
       NumTextBoxTag.MergeAttribute("value", value.ToString());  
       foreach (var key in validationAttributes.Keys)  
       {  
         NumTextBoxTag.Attributes.Add(key, validationAttributes[key].ToString());  
       }  
       foreach(var key in htmlAttributes.Keys)  
       {  
         NumTextBoxTag.Attributes.Add(key, htmlAttributes[key].ToString());  
       }  
       return MvcHtmlString.Create(NumTextBoxTag.ToString(TagRenderMode.SelfClosing));  
     }  

Full Code

 namespace CustomHelpers  
 {  
   public static class TextBoxes  
   {  
      public static MvcHtmlString NumTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IDictionary<string, object> htmlAttributes)  
     {  
       var fieldName = ExpressionHelper.GetExpressionText(expression);  
       var fullBindingName = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(fieldName);  
       var fieldId = TagBuilder.CreateSanitizedId(fullBindingName);  
       var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);  
       var value = metadata.Model;  
       IDictionary<string, object> validationAttributes = htmlHelper.GetUnobtrusiveValidationAttributes(fullBindingName, metadata);  
       TagBuilder NumTextBoxTag = new TagBuilder("input");  
       NumTextBoxTag.MergeAttribute("type", "number");  
       NumTextBoxTag.MergeAttribute("name", fullBindingName);  
       NumTextBoxTag.MergeAttribute("id", fieldId);  
       NumTextBoxTag.MergeAttribute("value", value.ToString());  
       foreach (var key in validationAttributes.Keys)  
       {  
         NumTextBoxTag.Attributes.Add(key, validationAttributes[key].ToString());  
       }  
       foreach(var key in htmlAttributes.Keys)  
       {  
         NumTextBoxTag.Attributes.Add(key, htmlAttributes[key].ToString());  
       }  
       return MvcHtmlString.Create(NumTextBoxTag.ToString(TagRenderMode.SelfClosing));  
     }  
      }  
      }  

Code For View

 @HTML.NumTextBoxFor(model=>model.Age,new {@class="abc"})  

Summary

In this article we demonstrate how to create Strongly Type or Model Bound HTML Helper using Extension Method, hope this article will help ful to you.

Thanks