前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >扩展htmlhelper.DropDownListFor 支持list数据源和option增加属性

扩展htmlhelper.DropDownListFor 支持list数据源和option增加属性

作者头像
旺财的城堡
发布2018-11-20 16:14:01
7830
发布2018-11-20 16:14:01
举报
文章被收录于专栏:calvincalvin

mvc自带的DropDownListFor数据源必须是IEnumerable<SelectListItem>。并且option不支持增加自定义属性。在使用bootstrap-select组件的时候,发现不是很好用。所以扩展了一下。

当然,因为场景的问题,我不需要group,不需要selected,所以这部分没有完成,且相应的重载方法也没有写。只有一个core方法,算是一个半成品吧。

代码语言:javascript
复制
 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         }

调用方式:

代码语言:javascript
复制
depInfos:List<>
代码语言:javascript
复制
 @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

官方例子截图:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-04-13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档