ASP.NET MVC实现多选下拉框

 更新时间:2022年07月31日 10:35:51   作者:Darren Ji  
这篇文章介绍了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 class CarVm
    { 
        public string[] SelectedCars { get; set; }
        public IEnumerable<SelectListItem>  AllCars { get; set; }
    }
}

HomeController中:

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            CarVm carVm = new CarVm();
            carVm.SelectedCars = new string[]{"1","2"};
            carVm.AllCars = GetAllCars();
            return View(carVm);
        }

        [HttpPost]
        public ActionResult SaveCars(CarVm carVm)
        {
            if (ModelState.IsValid)
            {
                return View(carVm);
            }
            return RedirectToAction("Index", carVm);
        }

        private IEnumerable<SelectListItem> GetAllCars()
        {
            List<SelectListItem> allCars = new List<SelectListItem>();
            allCars.Add(new SelectListItem() {Value = "1",Text = "奔驰"});
            allCars.Add(new SelectListItem() { Value = "2", Text = "宝马" });
            allCars.Add(new SelectListItem() { Value = "3", Text = "奇瑞" });
            allCars.Add(new SelectListItem() { Value = "4", Text = "比亚迪" });
            allCars.Add(new SelectListItem() { Value = "5", Text = "起亚" });
            allCars.Add(new SelectListItem() { Value = "6", Text = "大众" });
            allCars.Add(new SelectListItem() { Value = "7", Text = "斯柯达" });
            allCars.Add(new SelectListItem() { Value = "8", Text = "丰田" });
            allCars.Add(new SelectListItem() { Value = "9", Text = "本田" });

            return allCars.AsEnumerable();
        }
    }
}

视图

Home/Index.cshtml视图中,需要引用Chosen Plugin的css和js文件:

@model MvcApplication1.Models.CarVm

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
<link href="~/Content/chosen.css" rel="external nofollow"  rel="stylesheet" />

@using (Html.BeginForm("SaveCars", "Home", FormMethod.Post))
{
    @Html.LabelFor(m => m.SelectedCars,"最多选择2个选项") <br/>
    @Html.ListBoxFor(m => m.SelectedCars, Model.AllCars, new {@class="chosen", multiple="multiple", style="width:350px;"}) <br/>
    <input type="submit" value="提交"/>
}


@section scripts
{
    <script src="~/Scripts/chosen.jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('.chosen').chosen({
                max_selected_options: 2
            });

            $(".chosen-deselect").chosen(
            {
                allow_single_deselect: true 
            });

            $(".chosen").chosen().change();
            $(".chosen").trigger('liszt:updated');
        });
    </script>
}

到此这篇关于ASP.NET MVC实现多选下拉框的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • ABP引入SqlSugar框架的简单版创建使用

    ABP引入SqlSugar框架的简单版创建使用

    这篇文章主要为大家介绍了ABP引入SqlSugar框架的简单版创建使用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • 如何利用FluentMigrator实现数据库迁移

    如何利用FluentMigrator实现数据库迁移

    这篇文章主要给大家介绍了关于如何利用FluentMigrator实现数据库迁移的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • Entity Framework生成DataBase First模式

    Entity Framework生成DataBase First模式

    本文详细讲解了Entity Framework生成DataBase First模式的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • ASP.NET实现个人信息注册页面并跳转显示

    ASP.NET实现个人信息注册页面并跳转显示

    这篇文章主要介绍了ASP.NET实现个人信息注册页面并跳转显示的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • 创建基于ASP.NET的SMTP邮件服务的具体方法

    创建基于ASP.NET的SMTP邮件服务的具体方法

    Asp.net在System.Web.Mail名称空间中有一个发送email的内建类,但这仅是cdosys的一个假象。开发者能使用一个替代的它smtp邮件服务。在这篇文章里面,我将会展示如何创建一个用于asp.net的功能齐全的smtp邮件服务
    2013-11-11
  • ASP.NET Core MVC自定义Tag Helpers用法介绍

    ASP.NET Core MVC自定义Tag Helpers用法介绍

    这篇文章介绍了ASP.NET Core MVC自定义Tag Helpers的用法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-02-02
  • ASP.NET Core根据环境变量支持多个 appsettings.json配置文件

    ASP.NET Core根据环境变量支持多个 appsettings.json配置文件

    这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • Visual Studio Debug实战教程之断点操作

    Visual Studio Debug实战教程之断点操作

    众所周知断点对于Visual Studio调试过程是十分重要的,断点的设置也是为了更好的进行调试。下面这篇文章主要给大家介绍了关于Visual Studio Debug实战教程之断点操作的相关资料,需要的朋友可以参考下
    2018-09-09
  • ASP.NET Core WebAPI实现本地化(单资源文件)

    ASP.NET Core WebAPI实现本地化(单资源文件)

    这篇文章主要介绍了ASP.NET Core WebAPI实现本地化(单资源文件),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • asp.net直接Response输出WML页面示例代码

    asp.net直接Response输出WML页面示例代码

    本例实现直接Response输出WML页面,具体代码如下,有需要的朋友可以和参考下
    2013-08-08

最新评论