[ASP.net MVC] 如何自建User control

在建構框架 (framework)時, 會有機會須要重覆使用一堆指定的 user control. 其實透過 extend HtmlHelper, 便可以將coding變得簡單, 將來修改時亦只須要修改一部份便可.

在這裡, 用了一個Bootstrap control 做例子.

public static class HtmlHelperExtend
    {
        public static MvcHtmlString DateTimePicker(this HtmlHelper helper, string divDayTimePickerId, string txtBoxdayTimePickerId, DateTime? value, string labelId, string labelText="Label 1")
        {
            /*
            Example
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
             */
            MvcHtmlString result = new MvcHtmlString(
                String.Format(
                "<div class=\"form-group\">" +
                    "<label id='{3}' for='{0}'>{4}</label>"+
                    "<div id='{0}'>"+
                        "<input type='text' id='{1}' value='{2}' class=\"form-control\" />"+
                    "</div>"+
                "</div>",
                divDayTimePickerId, txtBoxdayTimePickerId, value, labelId, labelText)
                );
            return result;
        }
    }

若須要做data binding 的話, 可以利用expression將其指向model.

public static MvcHtmlString DateTimePickerFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, object htmlAttributes)
        {
            var fieldName = ExpressionHelper.GetExpressionText(expression);
            var fullBindingName = html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(fieldName);
            var fieldId = TagBuilder.CreateSanitizedId(fullBindingName);

            var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
            var value = metadata.Model;

            TagBuilder dateTimePickerTag = new TagBuilder("input");
            dateTimePickerTag.Attributes.Add("name", fullBindingName);
            dateTimePickerTag.Attributes.Add("id", fieldId);
            dateTimePickerTag.Attributes.Add("type", "text");
            dateTimePickerTag.Attributes.Add("value", value == null ? "" : value.ToString());
            dateTimePickerTag.MergeAttributes(new RouteValueDictionary(htmlAttributes));

            var validationAttributes = html.GetUnobtrusiveValidationAttributes(fullBindingName, metadata);
            foreach (var key in validationAttributes.Keys)
            {
                dateTimePickerTag.Attributes.Add(key, validationAttributes[key].ToString());
            }
            return new MvcHtmlString(dateTimePickerTag.ToString(TagRenderMode.SelfClosing));
        }

Reference:
http://stackoverflow.com/questions/11232041/how-to-create-an-html-helper-to-extend-textboxfor-to-add-css-style