你的位置:首页 > ASP.net教程

[ASP.net教程]在ASP.NET MVC中实现Select多选


我们知道,在ASP.NET MVC中实现多选Select的话,使用Html.ListBoxFor或Html.ListBox方法就可以。在实际应用中,到底该如何设计View Model, 控制器如何接收多选Select的选中项呢?

 

实现效果如下:

1

初始状态某些选项被选中。

 

当按着ctrl键,进行重新选择多项,点击"提交"按钮,把选中项的id拼接。
2

 

对于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());
      }
    }
  }