我为字符串字段创建了一个 EditorTemplate，它实现了引导程序，如下所示:
@using MyProject@model 对象<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,html属性)@Html.ValidationMessageFor(m => m, null, new { @class = "help-block" })我可以简单地这样称呼它:
@Html.EditorFor(model => model.FirstName,"BootstrapString")我的问题:我将如何为 DropDownList 执行此操作，以便我只能按如下方式调用 @Html.EditorFor:
@Html.EditorFor(model => model.CategoryId,new SelectList(ViewBag.Categories, "ID", "CategoryName"))所以它基本上是一个带有 Twitter Bootstrap 样式的通用 DropDownList.
选项 1
创建一个名为 BootstrapSelect.cshtml
EditorTemplate@model 对象<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" })在视图中
@Html.EditorFor(m => m.CategoryId, "BootstrapSelect")但这意味着你总是需要在控制器中分配`ViewBag.Items
var Categories =//从某处获取集合ViewBag.Items = new SelectList(categories, "ID", "CategoryName");选项 2
修改EditorTemplate 以接受额外的ViewData
@model 对象<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" })并在视图中传递additionalViewData参数中的SelectList
@Html.EditorFor(m => m.CategoryId, "BootstrapSelect", new { selectList = new SelectList(ViewBag.Categories, "ID", "CategoryName") })这更好，因为您不需要依赖 ViewBag.例如，如果您的视图模型具有属性 public SelectList CategoryItems { get;放;} 然后你可以使用
@Html.EditorFor(m => m.CategoryId, "BootstrapSelect", Model.CategoryItems)选项 3
利用内置的辅助方法创建您自己的辅助方法
使用系统；使用 System.Linq.Expressions;使用 System.Text;使用 System.Web.Mvc;使用 System.Web.Mvc.Html;命名空间 YourAssembly.Html{公共静态类 BootstrapHelper{public static MvcHtmlString BootstrapDropDownFor<TModel, TValue>(这个HtmlHelper<TModel>助手，Expression<Func<TModel，TValue>>表达式，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 验证 = ValidationExtensions.ValidationMessageFor(helper, expression, null, new { @class = "help-block" });StringBuilder innerHtml = new StringBuilder();innerHtml.Append(选择);innerHtml.Append(验证);TagBuilder innerDiv = new TagBuilder("div");innerDiv.AddCssClass("col-md-9");innerDiv.InnerHtml = innerHtml.ToString();StringBuilder outerHtml = new StringBuilder();externalHtml.Append(label);externalHtml.Append(innerDiv.ToString());TagBuilder outerDiv = new TagBuilder("div");externalDiv.AddCssClass("form-group");externalDiv.InnerHtml = externalHtml.ToString();返回 MvcHtmlString.Create(outerDiv.ToString());}}}在视图中
@Html.BootstrapDropDownFor(m => m.CategoryId, new SelectList(ViewBag.Categories, "ID", "CategoryName"))I've created an EditorTemplate for string fields that implements bootstrap as follows:
@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>
And I can call this simply like this:
@Html.EditorFor(model => model.FirstName,"BootstrapString")
My Question:How would I do this for a DropDownList so that I can merely call @Html.EditorFor as follows:
@Html.EditorFor(model => model.CategoryId,new SelectList(ViewBag.Categories, "ID", "CategoryName"))
So it's basically a Generic DropDownList with Twitter Bootstrap styling.
Option 1
Create an EditorTemplate named 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>
and in the view
@Html.EditorFor(m => m.CategoryId, "BootstrapSelect")
but this means you would alway need to assign `ViewBag.Items in the controller
var categories = // get collection from somewhere
ViewBag.Items = new SelectList(categories, "ID", "CategoryName");
Option 2
Modify the EditorTemplate to accept additional 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>
and in the view pass the SelectList in the additionalViewData parameter
@Html.EditorFor(m => m.CategoryId, "BootstrapSelect", new { selectList = new SelectList(ViewBag.Categories, "ID", "CategoryName") })
this is better in that you don't need to rely on ViewBag. For example, if you had a view model with a property public SelectList CategoryItems { get; set; } then you could use
@Html.EditorFor(m => m.CategoryId, "BootstrapSelect", Model.CategoryItems)
Option 3
Create your own helper utilizing the built-in helper methods
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());
}
}
}
and in the view
@Html.BootstrapDropDownFor(m => m.CategoryId, new SelectList(ViewBag.Categories, "ID", "CategoryName"))
这篇关于DropDownList 的 EditorTemplate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！