返回顶部
首页 > 资讯 > 后端开发 > ASP.NET >ASP.NET MVC实现多选下拉框保存并显示
  • 420
分享到

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

ASP.NET MVC多选下拉框 2022-11-13 14:11:45 420人浏览 安东尼
摘要

在"asp.net mvc实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来。 模拟这样的一个场

在"asp.net mvc实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来。

模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽车品牌。

关于车迷的Model:

namespace MvcApplication1.Models
{
    public class CarFan
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string[] SelectedCars { get; set; }
    }
}

以上,在"ASP.net MVC实现多选下拉框"中也提到了,当我们通过<select multiple="multiple"...></select>显示多选下拉框的时候,其对应的Model属性类型一定是string[]。

关于汽车品牌的Model:

namespace MvcApplication1.Models
{
    public class Car
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

创建FanController:

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

namespace MvcApplication1.Controllers
{
    public class FanController : Controller
    {

        public ActionResult SaveCars()
        {
            var carFan = new CarFan() {Id = 1, Name = "Darren", SelectedCars = {}};
            ViewBag.allcars = GetAllCars();
            return View(carFan);
        }

        [HttpPost]
        public ActionResult SaveCars(CarFan carFan)
        {
            //if (ModelState.IsValid)
            //{
            //    foreach (var item in carFan.SelectedCars)
            //    {
            //        //TODO:把选中的Car的编号和CarFan保存到中间表
            //    }
            //}
            ViewBag.allcars = GetAllCars();
            return View(carFan);
        }

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

显示<select multiple="multiple"...></select>的时候,需要一个IEnumerable<SelectListItem>类型的集合,我们通过ViewBag把该类型集合传递到前台视图。

打上[HttpPost]的SaveCars(CarFan carFan)方法内部,在实际项目中,本该是需要遍历所有选中汽车品牌的Id,把CarFan的Id和汽车品牌的Id保存到两者的中间表的,但这里为了方便,保存成功后还是回到原先的/Fan/SaveCars.cshtml视图,把选中的项显示出来。

/Fan/SaveCars.cshtml 视图

@model MvcApplication1.Models.CarFan

@{
    ViewBag.Title = "SaveCars";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/chosen.CSS" rel="external nofollow"  rel="stylesheet" />

<h2>@Model.Name 感兴趣的汽车品牌包括:(最多选择2个)</h2>

@using (Html.BeginFORM("SaveCars", "Fan", FormMethod.Post, new {id="editForm"}))
{
    @Html.ListBoxFor(m => m.SelectedCars, (IEnumerable<SelectListItem>)ViewBag.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>
}

运行,在没有选择任何项时的界面如下:


当选择项,提交后,重新返回/Fan/SaveCars.cshtml视图,界面如下:

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

--结束END--

本文标题: ASP.NET MVC实现多选下拉框保存并显示

本文链接: https://lsjlt.com/news/171705.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • ASP.NET MVC实现多选下拉框保存并显示
    在"ASP.NET MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来。 模拟这样的一个场...
    99+
    2022-11-13
    ASP.NET MVC 多选下拉框
  • ASP.NET MVC实现多选下拉框
    借助Chosen Plugin可以实现多选下拉框。 选择多项: 设置选项数量,比如设置最多允许2个选项: Model模块 考虑到多选下拉<select multiple=&...
    99+
    2022-11-13
    ASP.NET MVC 多选下拉框
  • ASP.NET MVC实现下拉框多选
    我们知道,在ASP.NET MVC中实现多选Select的话,使用Html.ListBoxFor或Html.ListBox方法就可以。在实际应用中,到底该如何设计View ...
    99+
    2024-04-02
  • ASP.NET MVC下拉框中显示枚举项
    本篇将通过3种方式,把枚举项上的自定义属性填充到下拉框:1、通过控制器返回List<SelectListItem>类型给前台视图2、通过为枚举类型属性打上UIHint属性...
    99+
    2022-11-13
    ASP.NET MVC 下拉框显示枚举项
  • elementUI实现下拉选项加多选框的示例代码
    目录下拉加多选框升级—添加全部选项需求改版完善因产品需求和UI样式调整,和element自带的下拉多选有冲突,索性自己尝试修改如下: 下拉加多选框 效果如下图: 封装如下: &...
    99+
    2024-04-02
  • JavaScript实现鼠标经过显示下拉框
    本文实例为大家分享了JavaScript实现鼠标经过显示下拉框的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lan...
    99+
    2024-04-02
  • EasyUI如何实现下拉框多选功能
    这篇文章给大家分享的是有关EasyUI如何实现下拉框多选功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。效果图:这个没什么说的,直接引入css和js文件和图片,调用js即可。下...
    99+
    2024-04-02
  • Android编程实现多列显示的下拉列表框Spinner功能示例
    本文实例讲述了Android编程实现多列显示的下拉列表框Spinner功能。分享给大家供大家参考,具体如下: 先上张效果图: 严格来说,这并不是一个下拉列表,只不过实现的效果...
    99+
    2022-06-06
    列表 示例 下拉列表 spinner Android
  • Ajax如何实现下拉框联动显示数据
    小编给大家分享一下Ajax如何实现下拉框联动显示数据,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!页面中的两个下拉列表框:<...
    99+
    2024-04-02
  • element-plus下拉框实现全选的示例代码
    目录前言下拉框的简单使用全选互斥下拉框多选全选互斥的实现多个下拉框互斥一般全选的实现前言 实习确实能学到不少东西,但是学到的东西果然还是需要沉淀下来,不然后面立马又忘记了。 下拉框的...
    99+
    2024-04-02
  • JavaScript实现鼠标经过显示下拉框的方法
    这篇文章主要介绍了JavaScript实现鼠标经过显示下拉框的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下代码:<!DOCTYPE html...
    99+
    2023-06-14
  • jquery怎么实现下拉选择不同显示不同
    这篇文章主要介绍了jquery怎么实现下拉选择不同显示不同的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery怎么实现下拉选择不同显示不同文章都会有所收获,下面我们一起来...
    99+
    2024-04-02
  • ListBox中怎么实现多选并显示数据
    ListBox中怎么实现多选并显示数据,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。<%@ Page Language="C...
    99+
    2023-06-17
  • Flutter实现自定义下拉选择框的示例详解
    在一些列表页面中,我们经常会有上方筛选项的的需求,点击出现一个下拉菜单,多选、单选、列表选等,而在Flutter中,并没有现成的这样的组件,找第三方的扩展有时候又会受到一定限制,所以...
    99+
    2024-04-02
  • Android使用ListView实现下拉刷新及上拉显示更多的方法
    本文实例讲述了Android使用ListView实现下拉刷新及上拉显示更多的方法。分享给大家供大家参考,具体如下: 今天得需求是做listview+上下拉动在header和fo...
    99+
    2022-06-06
    方法 listview Android
  • 如何使用jQuery实现可输入多选下拉组合框
    这篇文章主要为大家展示了“如何使用jQuery实现可输入多选下拉组合框”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用jQuery实现可输入多选下拉组合框...
    99+
    2024-04-02
  • 基于WPF实现多选下拉控件的示例代码
    WPF 实现多选下拉控件 框架使用.NET40; Visual Studio 2022; 创建控件 MultiSelectComboBox 继承 Lis...
    99+
    2023-02-01
    WPF多选下拉控件 WPF下拉控件 WPF 控件
  • Android实现保存图片到本地并在相册中显示
    Android中拍照保存图片到本地是常见的一种需求,之前碰到了一个问题,就是在4.4中,刷新相册会出现ANR,经过一番百度解决了这个问题。 首先是保存图片到本地 privat...
    99+
    2022-06-06
    图片 Android
  • Android EditText输入框实现下拉且保存最近5个历史记录的示例分析
    这篇文章将为大家详细讲解有关Android EditText输入框实现下拉且保存最近5个历史记录的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。文章结构: 后面又添加了清空历史记录的标签...
    99+
    2023-06-20
  • PyQt5按下按键选择文件夹并显示的实现
    问题: 使用PyQt5开发桌面程序,实现功能为:按下按键,打开文件夹,选择文件夹,并将路径显示出来。 解决方法: 一、主要函数(直接能运行的代码见二) 1、选择文件夹并显示 ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作