How to write your own HtmlHelper render input text in asp.net mvc and working with Date Range Picker

When I was built a tourist website my client’s like have a date range picker. So I search internet found there is this bootstrap date range picker, I am big fun with bootstrap and this is the frond end css framework I am very confident with it.

You could just write html to your view to display it, but what happen if I need use in multiply place and different projects. So I like customize one HtmlHelper to render it.

For how to figure it out in html,.here is the github links.

https://github.com/dangrossman/bootstrap-daterangepicker

I also have picture show:customizeHtmlHelperRenderDateRange02

This date range pick also allow single date pick, how see the help document, because in here I focus how to make it to a Htmlhelper.

Step1: download it, and you only need the moment.js(this is big, if you worries the speed,use the CDN, why CDN help the speed? this is because when the moment.js also used in another projects online, and it already open, then someone go to your website and click it, then you don’t need download it) and daterangepicker-bs3.css

customizeHtmlHelperRenderDateRange01

For me I used it in my asp.net mvc project, I simple just put it inside my bundle.

Step2: start HtmlHelper to render text input box, this time I like also bind it to my model, so it will just like the existing htmlhelper render input text,but write your own one helper you understand how the HtmlHelper works.

here is the method

public static MvcHtmlString MyOwnTextBoxFor<TModel, TValue>(
     this HtmlHelper htmlHelper,
     Expression<Func<TModel, TValue>> expression,
     string type,
     string title,
     string placeholder,
     bool isRequired,
     bool isAutoFocus,
     object htmlAttributes = null)
        {
            MvcHtmlString html = default(MvcHtmlString);
            Dictionary<string, object> attributesOptions = new Dictionary<string, object>();

            if (htmlAttributes != null)
            {
                var attributes =
                  HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
                foreach (var item in attributes)
                {
                    attr.Add(item.Key, item.Value);
                }
            }

            attr.Add("type", type);
            attr.Add("class", "form-control");
            if (!string.IsNullOrEmpty(title))
            {
                attr.Add("title", title);
            }
            if (!string.IsNullOrEmpty(placeholder))
            {
                attr.Add("placeholder", placeholder);
            }
            if (isAutoFocus)
            {
                attr.Add("autofocus", "autofocus");
            }
            if (isRequired)
            {
                attr.Add("required", "required");
            }

            html = InputExtensions.TextBoxFor(htmlHelper,
                                              expression,
                                              attr);

            return html;
        }

And here is the several over load method, so in the view you have more options

public static MvcHtmlString MyOwnTextBoxFor<TModel, TValue>(
      this HtmlHelper htmlHelper,
      Expression<Func<TModel, TValue>> expression,
      object htmlAttributes = null)
        {
            return MyOwnTextBoxFor(htmlHelper, expression,"text", string.Empty, string.Empty, false, false, htmlAttributes);
        }


        public static MvcHtmlString MyOwnTextBoxFor<TModel, TValue>(
          this HtmlHelper htmlHelper,
          Expression<Func<TModel, TValue>> expression,
          string type,
          object htmlAttributes = null)
        {
            return MyOwnTextBoxFor(htmlHelper, expression, type, string.Empty, string.Empty, false, false, htmlAttributes);
        }


        public static MvcHtmlString MyOwnTextBoxFor<TModel, TValue>(
          this HtmlHelper htmlHelper,
          Expression<Func<TModel, TValue>> expression,
          string title,
          object htmlAttributes = null)
        {
            return MyOwnTextBoxFor(htmlHelper, expression, "text", title, title, false, false, htmlAttributes);
        }

        public static MvcHtmlString MyOwnTextBoxFor<TModel, TValue>(
          this HtmlHelper htmlHelper,
          Expression<Func<TModel, TValue>> expression,
          string type,
          string title,
          object htmlAttributes = null)
        {
            return MyOwnTextBoxFor(htmlHelper, expression, type, title, title, false, false, htmlAttributes);
        }


        public static MvcHtmlString MyOwnTextBoxFor<TModel, TValue>(
          this HtmlHelper htmlHelper,
          Expression<Func<TModel, TValue>> expression,
          string title,
          bool isRequired,
          bool isAutoFocus,
          object htmlAttributes = null)
        {
            return MyOwnTextBoxFor(htmlHelper, expression, "text", title, title, isRequired, isAutoFocus, htmlAttributes);
        }

and in the view simple just use it like this

@Html.MyOwnTextBoxFor(m=>m.StartDate)

For date range pick you need a piece of javascript

@section scripts
{// }//for more option could read the github helper document

actually the input text type could be “text”, “email”, “number”, so make it more useful create a enum hoder it,then for the type replace it with that enum method.

public enum MyInputTypesOption
        {
            text,
            color,
            date,
            datetime,
            email,
            month,
            number,
            password,
            range,
            search,
            tel,
            time,
            url,
            week
        }

After this you need change

//string type, //comment out this
MyInputTypesOption type,//use this

//so for the overload method instead of type "text", could use MyInputTypesOption.text

And in the method this time for the attribute I put it in

Dictionary<string, object> attributesOptions = new Dictionary<string, object>();

that is because in the end there use the

InputExtensions.TextBoxFor(htmlHelper,
                                              expression,
                                              attributesOptions);

the big benefit for this just you don’t need send a anonymous objects, and you could pass the html attributes straight way and with intelligence.

And one thing is important, is the date range need input type is “text”.
to create the string.

Have fun!

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s