Creating Custom Model Bound HTML Helper using Static 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 using static method.

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>( Expression<Func<TModel, TProperty>> expression, object htmlAttributes)  
  {  
  }  

In my previous article (Creating Custom Model Bound HTML Helper using Extension Method) I have used "this HtmlHelper HTML helper" as the first parameter because I had created extension method of HTML class, we will not use that parameter here because here we are going to create helper using a static method. The first parameter is for getting metadata details of a model like a field name, id, validation details etc.and the last parameter is for getting HTML attributes that the 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>(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>(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));  
     }  
      }  
      }  

In order to make this extension method available in all Views, we will add namespace of this helper to namespace section of View’s web.config as follows:

 <add namespace=”CustomHelpers” />  

Code For View

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

Summary

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

Thanks