ASP.NET MVC实现下拉框多选

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

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

赞 (0)

相关推荐

  • ASP.NET MVC实现多选下拉框保存并显示

    ASP.NET MVC实现多选下拉框保存并显示

    在"ASP.NET MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽车品牌. 关于车迷的Model: namespace MvcApplication1.Models { public class CarFan { public int Id { get; set; } public string Name { get; set; } public strin

  • 详解ASP.NET MVC 下拉框的传值的两种方式

    详解ASP.NET MVC 下拉框的传值的两种方式

    以前使用WebForm变成时,下拉框传值只需直接在后台绑定代码就可以了.现在我们来看看在MVC中DropDownList是如果和接受从Controller传过来的值的. 第一种:使用DropDownList 控制器代码: public ActionResult Index() { //1.1查询YzSeriesEntity的数据 List<Model.YzSeriesEntity> seriesList = seriesBLL.LoadEnities().ToList(); //1.2将YzS

  • ASP.NET MVC下拉框联动实例解析

    ASP.NET MVC下拉框联动实例解析

    两个DropDownList的联动,选择其中一个DropDownList,然后加载数据到另外的一个DropDownList上           这里,我打算实现的需求是:有两个DropDownList,一个默认加载所有的省份数据,然后,当我选择省份的时候,把对应的市的数据,绑定到另外一个DropDownList上面,即实现了联动. 好了,这里不打算使用EF了,换用ADO.NET.首先新建好数据库,表: USE master GO IF EXISTS (SELECT * FROM sysdata

  • ASP.NET MVC下拉框中显示枚举项

    ASP.NET MVC下拉框中显示枚举项

    本篇将通过3种方式,把枚举项上的自定义属性填充到下拉框:1.通过控制器返回List<SelectListItem>类型给前台视图2.通过为枚举类型属性打上UIHint属性让模版显示枚举项3.通过自定义元数据提供器DataAnnotationsModelMetadataProvider让模版显示枚举项 我们经常会把类型为Int16的属性通过枚举来获得.比如: public class SomeClass { public int16 Status{get;set;} } 对应的枚举: publi

  • 详解ASP.NET MVC之下拉框绑定四种方式

    详解ASP.NET MVC之下拉框绑定四种方式

    前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC中下拉框中绑定枚举的几种方式. 话题引入 一般在下拉框中绑定数据的话,分为几种情况. (1)下拉框中的数据是写死的,我们直接给出死代码即可. (2)下拉框中的数据从数据库中读取出来,从而进行显示. (3)下拉框中直接用枚举显示. (4)下拉框中一个选择的值改变另外一个下拉框中的值. 关于下拉框中绑定

  • ASP.NET MVC实现多选下拉框

    ASP.NET MVC实现多选下拉框

    借助Chosen Plugin可以实现多选下拉框. 选择多项: 设置选项数量,比如设置最多允许2个选项: Model模块 考虑到多选下拉<select multiple="multiple"...></select>选中项是string数组,Model应该这样设计: using System.Collections.Generic; using System.Web.Mvc; namespace MvcApplication1.Models { public c

  • ASP.NET MVC实现下拉框多选

    ASP.NET MVC实现下拉框多选

    我们知道,在ASP.NET MVC中实现多选Select的话,使用Html.ListBoxFor或Html.ListBox方法就可以.在实际应用中,到底该如何设计View Model, 控制器如何接收多选Select的选中项呢? 实现效果如下: 初始状态某些选项被选中. 当按着ctrl键,进行重新选择多项,点击"提交"按钮,把选中项的id拼接. 对于Select中的项,包含显示值,Value值,以及是否选中,抽象成如下的类. public class City { public int

  • ASP.NET实现级联下拉框效果实例讲解

    ASP.NET实现级联下拉框效果实例讲解

    用ASP.NET控件实现部门和员工的联动,参考过程如下 效果图: Default.aspx代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/199

  • jQuery实现下拉框多选 jquery-multiselect 的实例代码

    jQuery实现下拉框多选 jquery-multiselect 的实例代码

    先给大家展示下效果图: 除了jquery,需要引用的样式和js文件: <link rel="stylesheet" type="text/css" href="../assets/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="../assets/style.css" /&g

  • jquery实现下拉框多选方法介绍

    jquery实现下拉框多选方法介绍

    一.说明 本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二.代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

  • EasyUI实现下拉框多选功能

    EasyUI实现下拉框多选功能

    本文实例为大家分享了EasyUI实现下拉框多选展示的具体代码,供大家参考,具体内容如下 效果图: 这个没什么说的,直接引入css和js文件和图片,调用js即可.下面是源码: <html> <head> <meta charset="utf-8" /> <title>利用EasyUI实现多选下拉框</title> <link rel="stylesheet" type="text/css&qu

  • 利用Bootstrap Multiselect实现下拉框多选功能

    利用Bootstrap Multiselect实现下拉框多选功能

    利用Bootstrap Multiselect实现下拉框多选功能,并在点击事件中获取到所有选中option的value值 首先展示项目案例: 多选下拉框功能实现.gif 下面是所有完整的代码,重点以及主要的解释已经在代码内进行注释: 引入的css.js文件需要从github中下载:https://github.com/davidstutz/bootstrap-multiselect 插件依赖jQ和bootstrap,所以在引入插件之前需要先引入这jQ和bootstrap的css和js文件. <!

  • MVC实现下拉框联动效果（单选）

    下拉框联动效果,我们以部门--职位为例,选择部门时,关联到该部门的职位.下拉框的写法就不多说了,详细请参照前文. 视图: 其中,dept是部门的属性,deptlist是部门下拉框的属性,job是职位的属性,joblist是职位下拉框的属性,下拉框绑定请参照前文 @using (Html.BeginForm("aaai003sch", "aaa", FormMethod.Post, new { @class = "form-horizontal",

  • 一个简单的实现下拉框多选的插件可移植性比较好

    一个简单的实现下拉框多选的插件可移植性比较好

    在使用上次写的一个多先下拉框时,我发现了很多问题,经过修改和完善后,现在已经能够很好地使用了,且可移植性也比较好,下面是源代码. js 复制代码 代码如下: (function(){ $.fn.extend({ checks_select: function(options){ jq_checks_select = null; $(this).val("---请选择---"); $(this).next().empty(); //先清空 $(this).unbind("cli

  • ASP.NET中DropDownList下拉框列表控件绑定数据的4种方法

    DropDownList Web 服务器控件使用户能够从预定义的列表中选择一项.它与 ListBox Web 服务器控件的不同之处在于,其项列表在用户单击下拉按钮之前一直处于隐藏状态.另外,DropDownList 控件与 ListBox 控件的不同之处还在于它不支持多重选择模式. DropDownList在html中的呈现对应的是select,下面让我们来看一下DropDownList绑定数据的几种方法. 一.把Array数组绑到DropDownList 复制代码 代码如下: string[]

  • el-select 下拉框多选实现全选的实现

    在写一个功能时发现el-select支持多选,但是竟然不支持全选,好无语哦,那就自己实现一下吧~有两种方法,第二种感觉简单些 方法一:下拉项增加一个[全选],然后应该有以下几种情况: 下拉选项全都勾选时,[全选]自动勾选: 下拉选项部分勾选时,点击[全选]后,所有下拉项全部勾选: 下拉选项全都未勾选时,点击[全选]后,所有下拉选项不勾选: 下拉选项和[全选]都选上的时候,不勾选任意下拉选项,[全选]按钮就不勾选了: 上面就是我要实现的功能,我好啰嗦...还是看代码吧... html部分: <te

随机推荐