我们知道,在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多选相关推荐

  1. 在 asp.net mvc中的简单分页算法 (续)

    在上个月发表的 http://www.cnblogs.com/bwangel/p/mvcpager.html 中,讨论了一下asp.net mvc中结合Entity framework框架进行的分页, ...

  2. 在ASP.NET MVC中使用DropDownList

    在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...

  3. ASP.NET MVC中使用DropDownList

    在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...

  4. ASP.NET MVC中controller和view相互传值的方式

    ASP.NET MVC中Controller向view传值的方式: ViewBag.ViewData.TempData 单个值的传递 Json 匿名类型 ExpandoObject Cookie Vi ...

  5. mvc html dropdownlist,ASP.NET MVC中使用DropDownList地详解

    DropDownList控件又称下拉列表框控件,DropDownList控件动态连接到数据库,按指定 条件从数据库 中查询 出列表选项数据,然后绑 定到控件,可以方便快速地显示出多个下拉选 项 . 同 ...

  6. 通过源代码研究ASP.NET MVC中的Controller和View(二)

    通过源代码研究ASP.NET MVC中的Controller和View(一) 在开始之前,先来温习下上一篇文章中的结论(推论): IView是所有HTML视图的抽象 ActionResult是Cont ...

  7. 在Asp.Net MVC中实现RequiredIf标签对Model中的属性进行验证

    在Asp.Net MVC中可以用继承ValidationAttribute的方式,自定制实现RequiredIf标签对Model中的属性进行验证 具体场景为:某一属性是否允许为null的验证,要根据另 ...

  8. ASP.NET MVC中你必须知道的13个扩展点

         ScottGu在其最新的博文中推荐了Simone Chiaretta的文章13 ASP.NET MVC extensibility points you have to know,该文章为我 ...

  9. Asp.net mvc中的Ajax处理

    在Asp.net MVC中的使用Ajax, 可以使用通用的Jquery提供的ajax方法,也可以使用MVC中的AjaxHelper. 这篇文章不对具体如何使用做详细说明,只对于在使用Ajax中的一些需 ...

最新文章

  1. c# html文本编辑器,C#实现简单文本编辑器
  2. c web文件服务器,使用C++制作简单的web服务器(续).pdf
  3. 在Java中将时间单位转换为持续时间
  4. 【转】第00课导读:生活中的设计模式——启程之前,请不要错过我
  5. The Two Routes CodeForces - 601A(水最短路)
  6. jupyter notebook 安装教程
  7. 从Exchange 通往Office 365系列(五)部署MailBox服务器
  8. ​ [RHEL7.1]重新封装系统(制作模板)
  9. FreeSwitch明明已经设置了H264,为什么通话时还是别的格式(如VP8)
  10. LaTeX论文模板(附源码)
  11. 《别闹了,费曼先生》1
  12. alexa工具条下载_如何聆听(和删除)您给Alexa的每条命令
  13. 计算机学院部长换届答辩,未来可期,各自精彩——记计算机科学学院2020年两委换届竞职答辩活动...
  14. 给C盘释放五个G的空间
  15. 计算机芯片的形成和发展,计算机中将cpu集成在一块芯片上所形成的元器件是什么...
  16. win7虚拟机安装VMware tools失败
  17. 关于淘客软件的那些事儿
  18. 房地产销售技巧:形成客户的信任心理
  19. Blender软件使用Maps Models Importer插件导入Google地图3d模型(非常简单)
  20. Android磁盘管理-之vold源码分析(2)

热门文章

  1. java学习(125):简单异常处理
  2. java学习(49):方法重载
  3. python 计算小于某个数_python 列表寻找满足某个条件的开始索引和结束索引、区间范围...
  4. linux快速php,Linux 下的这些高效指令,是你快速学习的神器
  5. graphpad导出图片不居中_从GraphPad Prism一键导出满足期刊要求的图表
  6. el replace 表达式_EL表达式运算符、常用函数详解
  7. java 递归调整为队列
  8. Silverlight4.0教程之WebBrowser控件(Silverlight内置HTML浏览器控件)
  9. 电脑w ndows无法自动修复,windows 10自动修复无法修复你的电脑
  10. tomcat9-jenkins:insufficient free space available after evicting expired cache entries-consider