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

转载于:https://www.cnblogs.com/darrenji/p/4377157.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/423640.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

shiro学习(5):ini文件和自定义realm

工具idea 首先创建maven项目 配置文件 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http…

关于python中带下划线的变量和函数 的意义

转载:https://www.cnblogs.com/wangshuyi/p/6096362.html总结:变量:1. 前带_的变量: 标明是一个私有变量, 只用于标明, 外部类还是可以访问到这个变量2. 前带两个_ ,后带两个_ 的变量: 标明是内置变量,3. 大写加下划线的变量: 标明是 不会发生改变的全局变量函数:1. 前带…

几个简单的正则小例子

1 ^[\w][\w\.-]*[\w][\w-]*(?<val>\.\w){0,2}$ 电子邮件2 ^http://([\w-]*\.)([\w-]*)(/\w)*([\w-\.?%&]*)$ URL3 ^1[3,5]{1}\d{9}$ 手机号码4 ^(0\d{2,3})[-]?\d{7,8}(-\d{4})*$|\(0\d{2,3}\)[-]?\d{7,8}(-\d{4})*$ 电话号码5 Js替换字符串两边非空字符6 String…

康拓展开学习笔记

康拓展开 给出一个全排列&#xff0c;求他是第几个全排列称为康拓展开。 暴力康拓展开 对于一个全排列来说&#xff0c;从左往右第i位&#xff0c;有 n 1 - i 种选择。如果用变进制数表示的话&#xff0c;这一位就是 n 1 - i 进制的数&#xff0c;如果这一位选择了第k种情况&…

歌谣对自己的“自勉“

前言 为什么突然想写一篇文章呢&#xff0c;可能是源于个人吧&#xff0c;每天睡觉前都会思考一下是否达到了以后想要的生活。很显然答案是没有&#xff0c;不然我现在也不和大家在一起侃侃而谈。讲真&#xff08;这是我室友经常说的一句话&#xff09;&#xff0c;我是参与安…

网页中的按钮无法显示问题解决

今天有朋友反映她的电脑有问题&#xff0c;打开的网页中按纽无法显示&#xff0c;例如&#xff1a;163.com的邮箱中&#xff0c;发送邮件的按钮无法显示。 问了她一下是不是修改过背景色&#xff0c;她说是。就知道问题所在了。 解决方法&#xff1a;IE-工具-Internet选项-辅助…

python之Map函数 reduce 函数

转载&#xff1a;https://www.cnblogs.com/gongxr/p/7247855.htmlpython之Map函数# map()函数使用举例 # 功能&#xff1a;map()接受一个函数f和一个或多个list&#xff0c;将f依次作用在list的每个元素&#xff0c;得到一个新的列表 # 语法&#xff1a;map(方法名&#xff0c;…

你的心事我全知晓——心情日记小程序丨实战

闲暇之余&#xff0c;听媳妇嘀咕说要给她做一个能表达她每日心情的小程序&#xff0c;只能她在上面发东西。既然媳妇发话了&#xff0c;就花点心思做一个吧&#xff0c;因为没有UI图&#xff0c;所有布局全靠自己瞎编&#xff0c;下面结合图片和代码跟大家讲解下实现过程&#…

java面试题28 牛客 下面有关java classloader说法错误的是?

java面试题28 牛客 下面有关java classloader说法错误的是? A Java默认提供的三个ClassLoader是BootStrap ClassLoader&#xff0c;Extension ClassLoader&#xff0c;App ClassLoader B ClassLoader使用的是双亲委托模型来搜索类的 C JVM在判定两个class是否相同时&#x…

css居中无效的解决办法

前几天自己用css做居中的效果 margin: 0 auto,平时我都事这样来写的&#xff0c;不过这次就是不能实现居中的效果&#xff0c;检查代码&#xff0c;原来是自己没有添加DTD语句&#xff0c;即&#xff1a;&#xff1c;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitiona…

spark on yarn 部署问题

spark on yarn 部署报:java.io.IOException: Resource file:/usr/local/spark-1.6.3-bin-hadoop2.6/lib/spark-assembly-1.6.3-hadoop2.6.0.jar changed on src filesystem (expected 1530607524000, was 1478125561000 解决&#xff1a;spark-env.sh 之前配置 export HADOOP_C…

java面试题29 牛客 以下关于集合类ArrayList、LinkedList、HashMap描述

java面试题29 牛客 以下关于集合类ArrayList、LinkedList、HashMap描述错误的是&#xff08;&#xff09; A HashMap实现Map接口&#xff0c;它允许任何类型的键和值对象&#xff0c;并允许将null用作键或值 B ArrayList和LinkedList均实现了List接口 C 添加和删除元素时&am…

使用python爬取东方财富网机构调研数据

最近有一个需求,需要爬取东方财富网的机构调研数据.数据所在的网页地址为: 机构调研 网页如下所示: 可见数据共有8464页,此处不能直接使用scrapy爬虫进行爬取,因为点击下一页时,浏览器只是发起了javascript网络访问,然后将服务器返回的数据插入网页,无法通过网址直接获取对应页…

spark on yarn webUI logs不能查看

执行spark on yarn 执行&#xff1a;./bin/spark-submit --class org.apache.spark.examples.SparkPi --master yarn-cluster --executor-memory 1G --num-executors 3 ./lib/spark-examples-1.6.3-hadoop2.6.0.jar 10 命令执行成功后在yarn 资源管理界面查看不了logs 参考博…

post提交,WPF,Silverlight(加深记忆写一遍)

asp.net当<form id"form1" runat"server">默认post提交是提交到本页&#xff0c;每次提交会验证viewstate所以想提交到其它页会出错&#xff0c;如果真想提交到其它页&#xff0c;那么把其它页的viewstate标识改成和这个页一样 当去掉runat"ser…

java面试题30:牛客 下列哪项不属于jdk1.6垃圾收集器?

java面试题30&#xff1a;牛客 下列哪项不属于jdk1.6垃圾收集器&#xff1f; A:Serial收集器 B&#xff1a;parNew收集器 C:CMS收集器 D:G1收集器 1.Serial收集器 单线程收集器&#xff0c;收集时会暂停所有工作线程&#xff08;我们将这件事情称之为Stop The World&…

2019最新Python爬虫高频率面试题总结(一)

今天给大家出一个关于Python爬虫面试题的总结&#xff0c;相对于来说出现频率比较高的一些&#xff01;1. 为什么 requests 请求需要带上 header&#xff1f;原因是&#xff1a;模拟浏览器&#xff0c;欺骗服务器&#xff0c;获取和浏览器一致的内容header 的形式&#xff1a;字…

Silverlight专题(15) - 你自己的视频播放器之自定义MoveToPointSlider

前言&#xff1a; 这几天在网络上看到不少人在问如何创建一个Video Player&#xff08;Silverlight版本&#xff09; 而我在微软和这方面打了不少交道 所以计划用两篇文章解答下大家的问题 本篇文章先介绍下如何创建一个自定义的滚动条 下篇文章创建完整的一个Video Player 问题…

java面试题31:结构型模式中最体现扩展性的模式是()

java面试题31&#xff1a;结构型模式中最体现扩展性的模式是&#xff08;&#xff09; A:装饰模式 B&#xff1a;合成模式 C:桥接模式 D:适配器 蒙蔽树上蒙蔽果&#xff0c;蒙蔽树下你和我 结构型模式是描述如何将类对象结合在一起&#xff0c;形成一个更大的结构&#x…

hive 多用户访问模注意问题

首先是安装mysql 安装mysql数据库及客户端 yum install mysql-server yum install mysql servicemysqld start步骤一&#xff1a; yum -y install mysql-server步骤二&#xff1a;service mysqld start步骤三&#xff1a;mysql -u root -p  Enter password: &#xff08;默认…