mvc自带的DropDownListFor数据源必须是IEnumerable<SelectListItem>。并且option不支持增加自定义属性。在使用bootstrap-select组件的时候,发现不是很好用。所以扩展了一下。
当然,因为场景的问题,我不需要group,不需要selected,所以这部分没有完成,且相应的重载方法也没有写。只有一个core方法,算是一个半成品吧。
1 public static MvcHtmlString DropDownListForEx<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, 2 Expression<Func<TModel, object>> expression, Func<TModel, IEnumerable<TProperty>> options, 3 Func<TProperty, string> optionText, Func<TProperty, string> optionValue, string optionLabel = null, 4 Func<TProperty, IDictionary<string, object>> optionHtmlAttributes = null, IDictionary<string, object> htmlAttributes = null) 5 { 6 7 var tagNameAttr = ExpressionHelper.GetExpressionText(expression); 8 TagBuilder tag = new TagBuilder("select"); 9 if (htmlAttributes != null) 10 tag.MergeAttributes(htmlAttributes); 11 tag.MergeAttribute("name", tagNameAttr, true); 12 tag.GenerateId(tagNameAttr); 13 14 StringBuilder optionsHtml = new StringBuilder(); 15 var os = options(htmlHelper.ViewData.Model); 16 if (optionLabel != null) 17 { 18 TagBuilder tag3 = new TagBuilder("option"); 19 tag3.SetInnerText(optionLabel); 20 optionsHtml.AppendLine(tag3.ToString(TagRenderMode.Normal)); 21 } 22 23 foreach (var item in os) 24 { 25 TagBuilder tag2 = new TagBuilder("option"); 26 tag2.SetInnerText(optionText(item)); 27 if (optionHtmlAttributes != null) 28 tag2.MergeAttributes(optionHtmlAttributes(item)); 29 tag2.MergeAttribute("value", optionValue(item), true); 30 var oHtml = tag2.ToString(TagRenderMode.Normal); 31 optionsHtml.AppendLine(oHtml); 32 } 33 34 tag.InnerHtml = optionsHtml.ToString(); 35 return new MvcHtmlString(tag.ToString(TagRenderMode.Normal)); 36 }
调用方式:
depInfos:List<>
@Html.DropDownListForEx(p => p.DepCode, p => depInfos, p => p.Name, p => p.Id, "请选择", p => new Dictionary<string, object>() { { "data-tokens", p.NamePinYin+" "+p.NameFirstPinYin } }, new Dictionary<string, object> { { "class", "selectpicker" }, { "data-live-search", true } })
顺便介绍一下bootstrap-select组件。bootstrap框架下面的下拉选择组件,支持下拉搜索选择,关键字可自定义。上面的我的例子就是一个地址选择例子,使用地址的全拼,首字母拼音搜索
具体例子参考官方地址。有详细说明和demo
官方地址:http://silviomoreto.github.io/bootstrap-select
git地址:https://github.com/silviomoreto/bootstrap-select
官方例子截图: