在ASP.NET MVC中實現Select多選

我們知道，在ASP.NET MVC中實現多選Select的話，使用Html.ListBoxFor或Html.ListBox方法就可以。在實際應用中，到底該如何設計View Model， 控制器如何接收多選Select的選中項呢？

 

實現效果如下：

初始狀態某些選項被選中。

 

當按着ctrl鍵，進行重新選擇多項，點擊"提交"按鈕，把選中項的id拼接。

 

對於Select中的項，包含顯示值，Value值，以及是否選中，抽象成如下的類。

 

    public class City
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public bool IsSelected { get; set; }
    }

 

對於整個多選Select來說，在ASP.NET MVC中，所有的選項被看作SelectListItem類型，選中的項是一個string類型的集合。於是多選Select的View Model設計為：

 

    public class CityVm
    {
        public IEnumerable<SelectListItem>  Cities { get; set; }
        public IEnumerable<string> SelectedCities { get; set; }
    }

 

在HomeController中，把SelectListItem的集合賦值給CityVm的Cities屬性。

 

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var cities = new List<City>
            {
                new City(){Id = 1, Name = "青島", IsSelected = true},
                new City(){Id = 2, Name = "膠南", IsSelected = false},
                new City(){Id = 3, Name = "即墨", IsSelected = true},
                new City(){Id = 4, Name = "黃島", IsSelected = false},
                new City(){Id = 5, Name = "濟南", IsSelected = false}
            };
            var citiesToPass = from c in cities
                select new SelectListItem() {Text = c.Name, Value = c.Id.ToString(),Selected = c.IsSelected};
            
            CityVm cityVm = new CityVm();
            cityVm.Cities = citiesToPass;
            ViewData["cc"] = citiesToPass.Count();
            return View(cityVm);
        }
        ......
    }    

 

在Home/Index.cshtml中,是一個CityVm的強類型視圖，對於選中的項會以IEnumerable<string>集合傳遞給控制器。

 

@model MvcApplication1.Models.CityVm
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
@using (Html.BeginForm("GetCities", "Home", FormMethod.Post, new {id = "myForm"}))
{   
    @Html.ListBoxFor(c => c.SelectedCities, Model.Cities, new {size = ViewData["cc"]})
    <br/>
    <input type="submit" value="提交"/>
}

 

在HomeController中，再把從視圖傳遞過來的IEnumerable<string>拼接並呈現。

 

    public class HomeController : Controller
    {
        ......
        [HttpPost]
        public ActionResult GetCities(IEnumerable<string> selectedCities)
        {
            if (selectedCities == null)
            {
                return Content("沒有選中任何選項");
            }
            else
            {
                StringBuilder sb = new StringBuilder();
                sb.Append("選中項的Id是：" + string.Join(",", selectedCities));
                return Content(sb.ToString());
            }
        }
    }