ASP.NET MVC 多选下拉菜单

Posted 2023-04-13

【中文标题】ASP.NET MVC 多选下拉菜单

【英文标题】：ASP.NET MVC multiple select dropdown

【发布时间】：2014-09-20 16:50:45

【问题描述】：

我正在使用以下代码让用户在表单上选择多个位置。

@html.DropDownListFor(m => m.location_code, Model.location_type, new  @class = "form-control", @multiple = "multiple" ).

location_code 是一个List<int>，location_type 是填充了数据的List<SelectListItem>。

代码确实返回了控制器中选定的值，但是当用户单击编辑按钮时，传递的对象不显示选定的值，而是显示正常的初始化下拉列表，没有任何选择。

我真正想要的是，一旦用户提交表单（包括多个选定的值），它就会转到用户确认详细信息是否正确的页面。如果不是，他按下编辑按钮并且对象再次传递给控制器.在这个阶段，它应该显示选择的多个值。其他字段表现正常。

对此有何见解？

【问题讨论】：

为什么不使用@Html.ListBoxFor 来生成多选下拉菜单？

@Panayotis 如何通过多选将其呈现为下拉菜单？

【参考方案1】：

在你看来：

@Html.ListBoxFor(m => m.location_code, Model.location_type)

这就是你所需要的。您正在使用 ListBox 控件，因此它已经是一个多选列表。

然后回到您的控制器中，您可以像这样获取所选项目：

[HttpPost]
public string SaveResults(List<int> location_code)


    if (location_code!= null)
    
        return string.Join(",", location_code);
    
    else
    
        return "No values are selected";
    

【讨论】：

ListBoxFor 成功了！谢谢@panayotis。此外，这个链接也有帮助。 mehmetkurtipek.blogspot.in/2012/09/…

【参考方案2】：

MultiSelect DropdownList 在 Asp.Net MVC 和 C#.Net 中使用 jQuery：

首先我们将创建一个新的 mvc 应用程序并在模型文件夹中添加一个模型类文件。在这个模型类文件中添加以下代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcApplication1.Models

    public class CountryModel
    
        public List<Country> CountryList  get; set; 
        public string SelectedCountryId  get; set; 
    
    public class Country
    
        public string CountryName  get; set; 
    

现在添加一个控制器类文件并添加以下代码。

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

namespace MvcApplication1.Controllers

    public class HomeController : Controller
    
        //
        // GET: /Home/

        public ActionResult Index()
        
            CountryModel objcountrymodel = new CountryModel();
            objcountrymodel.CountryList = new List<Country>();
            objcountrymodel.CountryList = CountryDate();
            return View(objcountrymodel);
        
        public List<Country> CountryDate()
        
            List<Country> objcountry = new List<Country>();
            objcountry.Add(new Country  CountryName = "America" );
            objcountry.Add(new Country  CountryName = "India" );
            objcountry.Add(new Country  CountryName = "Sri Lanka" );
            objcountry.Add(new Country  CountryName = "China" );
            objcountry.Add(new Country  CountryName = "Pakistan" );
            return objcountry;
        
    

在上面的代码中，我创建了一个国家/地区的集合。这个列表我们将与下拉列表绑定。现在创建视图并将以下代码添加到视图中。

@model MvcApplication1.Models.CountryModel          
@
    ViewBag.Title = "MultiSelect DropdownList Using jQuery in Asp.Net MVC and C#.Net";

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="../../Scripts/jquery.sumoselect.js" type="text/javascript"></script>
<link href="../../Css/dropdownliststyle.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript">
     $(document).ready(function () 
         window.asd = $('.ddlMultiSlectBox).SumoSelect( csvDispCount: 4 );
     );
    </script>
Country:
@Html.DropDownListFor(m => m.SelectedCountryId, new SelectList(Model.CountryList, "CountryName", "CountryName"), new @multiple="multiple",@placeholder="Please select country", @class="ddlMultiSlectBox" )

在这段代码中，我添加了 css 和 jQuery 库引用，并使用 sumoselect 函数显示多选下拉列表。

现在我们已经运行了应用程序来检查输出。

【讨论】：

这个插件的链接在哪里？你从哪里得到这个的？ dropdownliststyle.css 和 sumoselect.js 的编码在哪里？如何把