如何用ASP.NET MVC实现下拉框多选功能，让用户轻松选择长尾关键词？

本文共计820个文字，预计阅读时间需要4分钟。

在ASP.NET MVC中实现多选Select控件，可以使用Html.ListBoxFor或Html.ListBox方法。在实际应用中，设计ViewModel和控制器的关键在于：

1. ViewModel设计：ViewModel应包含一个集合属性，用于存储选中的项。

2.控制器方法：控制器方法应接收ViewModel，并处理选中的项。

示例ViewModel和控制器方法如下：

csharp

public class SelectViewModel{ public IEnumerable Items { get; set; } public List SelectedItems { get; set; }}

public class MyController : Controller{ public ActionResult MyView() { var viewModel=new SelectViewModel { Items=GetItems(), // 获取所有选项的方法 SelectedItems=new List() }; return View(viewModel); }

[HttpPost] public ActionResult MyView(SelectViewModel viewModel) { // 处理表单提交，更新SelectedItems viewModel.SelectedItems=viewModel.SelectedItems ?? new List(); // 进行逻辑处理，如保存到数据库等

return View(viewModel); }

private IEnumerable GetItems() { // 返回所有选项的方法 return new List { new SelectListItem { Value=1, Text=Option 1 }, new SelectListItem { Value=2, Text=Option 2 }, // 更多选项... }; }}

在视图中，使用Html.ListBoxFor来渲染多选列表：

@model SelectViewModel

@using (Html.BeginForm(MyView, MyController, FormMethod.Post)){ @Html.ListBoxFor(model=> model.SelectedItems, Model.Items, new { multiple=multiple }) }

这样，当用户提交表单时，控制器将接收包含选中项的ViewModel。

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

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对易盾网络的支持。如果你想了解更多相关内容请查看下面相关链接