EditorTemplate for DropDownList

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0