我們知道，在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()); } } }

轉載于:https://www.cnblogs.com/darrenji/p/4377157.html

總結

以上是生活随笔為你收集整理的在ASP.NET MVC中实现Select多选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。