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);
}

初始化的時後就有值了