コンボボックスとは、テキスト入力できるドロップダウンリスト（プルダウンメニュー）のことである。
今回は、HTML5 の datalist 要素を使用して、コンボボックス用の HtmlHelper を作成する。
(1) HtmlHelper の作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
using System; using System.Collections.Generic; using System.Linq.Expressions; using System.Text; using System.Web; using System.Web.Mvc; using System.Web.Mvc.Html; using System.Web.Routing; namespace Hoge.Helpers { public static class ComboBoxHelper { public static IHtmlString DataListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList) { return ComboBoxFor(htmlHelper, expression, selectList, null); } public static IHtmlString ComboBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList, object htmlAttributes) { var inputId = ExpressionHelper.GetExpressionText(expression); var dataListId = inputId + "_datalist"; if (htmlAttributes == null) { htmlAttributes = new object(); } // Object型データのプロパティに文字列でアクセスできる。 RouteValueDictionary dictionary = new RouteValueDictionary(htmlAttributes); dictionary["list"] = dataListId; // <input type="text" list="xxx_datalist" /> var inputTag = htmlHelper.TextBox(inputId, "", dictionary); // <datalist id="xxx_datalist"> var dataListTag = new TagBuilder("datalist"); dataListTag.GenerateId(dataListId); StringBuilder items = new StringBuilder(); foreach (var item in selectList) { items.AppendLine(ItemToOption(item)); } dataListTag.InnerHtml = items.ToString(); return new MvcHtmlString(inputTag + dataListTag.ToString()); } private static string ItemToOption(SelectListItem item) { TagBuilder builder = new TagBuilder("option"); builder.MergeAttribute("value", item.Value); builder.SetInnerText(item.Text); return builder.ToString(TagRenderMode.Normal); } } } |
(2) View へのリストの渡し方
Controller 上で View を呼び出す前に ViewBag にセットする方法が簡単。
|
1 2 3 4 5 6 7 |
List<SelectListItem> msgList = new List<SelectListItem>(); msgList.Add(new SelectListItem { Value = "Good Morning", Text = "朝の挨拶" }); ViewBag.MessageList = msgList; |
(3) View での使用方法
他の HtmlHelper と同じように呼べる。
忘れずに、@using Hoge.Helpers とすること。
|
1 |
@Html.ComboBoxFor(model => model.Messages, (IEnumerable<SelectListItem>)ViewBag.MessageList, htmlAttributes: new { @list = "msg", @value = "" }) |
(4) 実行結果
以上