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 create a custom numeric model bound helper using HTML5 element. Open Microsoft Visual Studio, . Create new MVC project and name whatever you want, here we named "CustomTextBox".
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. 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));
}
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));
}
}
}
@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
Kailash Chandra Behera