2014年8月26日 星期二

Select2套件搭配MVC專案

首先開一個MVC專案

透過NuGet引用Select2.js套件

因為MVC使用Bootstrap框架,所以需要搭配select2-bootstrap.css來修正畫面的輸出

新增一個HomeModel用來傳遞資料
public class HomeModel
{
    public IEnumerable<int> DataList { get; set; }
}

在Controler中透過ViewBag,傳入一個MultiSelectList
public ActionResult Index()
{
    this.ViewBag.DataList = new MultiSelectList(
        new List<SelectListItem>()
        {
            new SelectListItem{ Text="aaa", Value="1"},
            new SelectListItem{ Text="bbb", Value="2"},
            new SelectListItem{ Text="ccc", Value="3"},
        }, "Value", "Text");

    return View();
}

在View中透過@Html.ListBoxFor輸出下拉選單
@using WebApplication1.ViewModels
@model HomeModel
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div class="form-horizontal">
    <div class="form-group">
        @Html.LabelFor(x => x.DataList, new { @class = "col-md-2 label-control" })
        <div class="col-md-10">
            @Html.ListBoxFor(x => x.DataList, null, new { @class = "form-control" })
        </div>
    </div>
</div>

@section scripts
{
    <script type="text/javascript">
        $("#DataList").select2();
    </script>
}

Select2套件在MVC專案中的樣子

如果是編輯頁面,初始化要有值的話,只要在model上面指定值
public ActionResult Edit(int? id)
{
    this.ViewBag.DataList = new MultiSelectList(
        new List<SelectListItem>()
    {
        new SelectListItem{ Text="aaa", Value="1"},
        new SelectListItem{ Text="bbb", Value="2"},
        new SelectListItem{ Text="ccc", Value="3"},
    }, "Value", "Text");

    HomeModel model = new HomeModel { DataList = new int[] { 1, 3 } };
    return View(model);
}

初始化的時後就有值了