EditorTemplate for DropDownList

Question

I created a Template editor 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 it just like that:

 @Html.EditorFor(model => model.FirstName,"BootstrapString") 

My question is: How do I do this for DropDownList so that I can simply call @ Html.EditorFor as follows:

 @Html.EditorFor(model => model.CategoryId,new SelectList(ViewBag.Categories, "ID", "CategoryName")) 

So this is basically a generic DropDownList with Twitter Bootstrap style.

Answer 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 presentation

 @Html.EditorFor(m => m.CategoryId, "BootstrapSelect") 

but that means you always need to assign `ViewBag.Items in the controller

 var categories = // get collection from somewhere ViewBag.Items = new SelectList(categories, "ID", "CategoryName"); 

Option 2

Change the EditorTemplate to accept additional ViewData p>

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

it's better that you don't have to rely on ViewBag. For example, if you had a view model with the public SelectList CategoryItems { get; set; } property public SelectList CategoryItems { get; set; } public SelectList CategoryItems { get; set; } public SelectList CategoryItems { get; set; } , you could use

 @Html.EditorFor(m => m.CategoryId, "BootstrapSelect", Model.CategoryItems) 

Option 3

Create your own helper using 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 presentation

 @Html.BootstrapDropDownFor(m => m.CategoryId, new SelectList(ViewBag.Categories, "ID", "CategoryName"))