DropDownList 的编辑器模板答案

【问题标题】：EditorTemplate for DropDownListDropDownList 的编辑器模板
【发布时间】：2014-11-27 12:35:20
【问题描述】：

我已经为实现引导的字符串字段创建了一个 EditorTemplate，如下所示：

@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。

【问题讨论】：

标签： asp.net twitter-bootstrap asp.net-mvc-4 razor

【解决方案1】：

选项 1

创建一个名为BootstrapSelect.cshtml的EditorTemplate

@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>

并在视图中传递additionalViewData 参数中的SelectList

@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"))

【讨论】：