我为字符串字段创建了一个EditorTemplate,它实现了bootstrap,如下所示:
@using MyProject
@model object
<div class="form-group">
@Html.LabelFor(m => m, new { @class = "col-md-3 control-label" })
<div class="col-md-9">
@Html.TextBox(
"",
ViewData.TemplateInfo.FormattedModelValue,
htmlAttributes)
@Html.ValidationMessageFor(m => m, null, new { @class = "help-block" })
</div>
</div>
我可以这样称呼它:
@Html.EditorFor(model => model.FirstName,"BootstrapString")
我的问题: 我如何为DropDownList执行此操作,以便我只能按如下方式调用@ Html.EditorFor:
@Html.EditorFor(model => model.CategoryId,new SelectList(ViewBag.Categories, "ID", "CategoryName"))
所以它基本上是一个带有Twitter Bootstrap样式的Generic DropDownList。
答案 0 :(得分:25)
选项1
创建名为EditorTemplate
BootstrapSelect.cshtml
@model object
<div class="form-group">
@Html.LabelFor(m => m, new { @class = "col-md-3 control-label" })
<div class="col-md-9">
@Html.DropDownListFor(m => m, (SelectList)ViewBag.Items, new { @class = "form-control"})
@Html.ValidationMessageFor(m => m, null, new { @class = "help-block" })
</div>
</div>
并在视图中
@Html.EditorFor(m => m.CategoryId, "BootstrapSelect")
但这意味着你总是需要在控制器中分配`ViewBag.Items
var categories = // get collection from somewhere
ViewBag.Items = new SelectList(categories, "ID", "CategoryName");
选项2
修改EditorTemplate
以接受其他ViewData
@model object
<div class="form-group">
@Html.LabelFor(m => m, new { @class = "col-md-3 control-label" })
<div class="col-md-9">
@Html.DropDownListFor(m => m, (SelectList)ViewData["selectList"], new { @class = "form-control"})
@Html.ValidationMessageFor(m => m, null, new { @class = "help-block" })
</div>
</div>
并在视图中传递SelectList
参数
additionalViewData
@Html.EditorFor(m => m.CategoryId, "BootstrapSelect", new { selectList = new SelectList(ViewBag.Categories, "ID", "CategoryName") })
这样做更好,因为您不需要依赖ViewBag。例如,如果您的视图模型具有属性public SelectList CategoryItems { get; set; }
,那么您可以使用
@Html.EditorFor(m => m.CategoryId, "BootstrapSelect", Model.CategoryItems)
选项3
使用内置辅助方法
创建自己的助手using System;
using System.Linq.Expressions;
using System.Text;
using System.Web.Mvc;
using System.Web.Mvc.Html;
namespace YourAssembly.Html
{
public static class BootstrapHelper
{
public static MvcHtmlString BootstrapDropDownFor<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, SelectList selectList)
{
MvcHtmlString label = LabelExtensions.LabelFor(helper, expression, new { @class = "col-md-3 control-label" });
MvcHtmlString select = SelectExtensions.DropDownListFor(helper, expression, selectList, new { @class = "form-control" });
MvcHtmlString validation = ValidationExtensions.ValidationMessageFor(helper, expression, null, new { @class = "help-block" });
StringBuilder innerHtml = new StringBuilder();
innerHtml.Append(select);
innerHtml.Append(validation);
TagBuilder innerDiv = new TagBuilder("div");
innerDiv.AddCssClass("col-md-9");
innerDiv.InnerHtml = innerHtml.ToString();
StringBuilder outerHtml = new StringBuilder();
outerHtml.Append(label);
outerHtml.Append(innerDiv.ToString());
TagBuilder outerDiv = new TagBuilder("div");
outerDiv.AddCssClass("form-group");
outerDiv.InnerHtml = outerHtml.ToString();
return MvcHtmlString.Create(outerDiv.ToString());
}
}
}
并在视图中
@Html.BootstrapDropDownFor(m => m.CategoryId, new SelectList(ViewBag.Categories, "ID", "CategoryName"))