MVC helper creation is very easy and its only requires
static method which should return string. Below code is shown how to create
textbox with attached jquery date time popup controller.
public static MvcHtmlString DatePickerFor ( this HtmlHelper
htmlHelper, Expression<Func> expression, object htmlAttributes = null)
{
var body = (MemberExpression)expression.Body;
var propertyName = body.Member.Name; // get controller id
string textbox = htmlHelper.EditorFor(expression).ToString();
$('#" + propertyName + "').datepicker();
return MvcHtmlString.Create(textbox + "\n" + script);
}
In the view you can access this helper as below
@Html.DatePickerFor
(model => model.dateField)
Above code is
shown the basic steps of required html helper. Assume that want to add more
html attributes, date format and other specific filter criteria inside the
method and can be pass parameter from view page. This helper is useful you need to add business logic and validation required before binding data to view.
public static MvcHtmlString DatePickerFor( this HtmlHelper
htmlHelper, Expression<Func> expression, object htmlAttributes = null)
{
var body = (MemberExpression)expression.Body;
var propertyName = body.Member.Name; // get controller id
var attr = new RouteValueDictionary(htmlAttributes); // html attributes
string propertyDateFormat = ModelMetadata.FromLambdaExpression(expression,
htmlHelper.ViewData).DisplayFormatString;
string dateFormat = "";
if (propertyDateFormat == "{0:dd/MM/yyyy}")
dateFormat = "dd/mm/yy";
else
dateFormat = "dd/mm/yy";
string textbox = htmlHelper.EditorFor(expression).ToString(); // render html text box
var script = "'<'script
type=\"text/javascript\"'>'$('#" +
propertyName + "').datepicker({
dateFormat: '" + dateFormat + "' }); $('#" +
propertyName + "').removeClass('text-box');";
if (attr["style"] != null)
script += "$('#" +
propertyName + "').attr('style','" + attr["style"] + "');";
if (attr["class"] != null)
script += "$('#" +
propertyName + "').addClass('" + attr["class"] + "');";
script += "'<'/script'>'";
return MvcHtmlString.Create(textbox + "\n" + script); }
without above helper we can used jquery date picker but if need to add some server side validation and server side controlled then this way is more easy.