ASP.NET MVC 多选下拉列表

Question

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

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

location_code 是一个

List<int>

，location_type 是由数据填充的

List<SelectListItem>

。

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

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

对此有什么见解吗？

Answer 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";
    }
}

Answer 2

我假设您已经了解一般的 MVC 内容，因此请记住这一点：

首先获取这个库并进行设置：https://select2.org/getting-started/basic-usage

在你看来你可以使用这个

@Html.DropDownListFor(model => model.DistrictId, new SelectList(new List<object>(), "Id ", "Description"), "Select District", htmlAttributes: new
                                {
                                    @class = "js-example-placeholder-multiple col-sm-12 form-select form-control",
                                    @multiple="multiple",
                                    id = "DistrictDropDownList"
                                })

然后，您可以为模型添加属性 viewmodel。在上面的控件中使用的 DistrictId 作为字符串列表，如下所示

public class Places
{
   //Other ViewModel properties
    public List<string> DistrictId {get;set;}
   
}

当您将 ViewModel 提交回控制器时，您将获得多个选定的 ID 作为字符串列表。

Answer 3

可以为@Html.ListBoxfor从客户端绑定数据。我尝试使用ajax调用并从web api获取数据并尝试绑定数据。它是绑定的，但问题是在 UI 中选择控件中的数据时，它没有在控件上选择/设置？您可以...吗 ， 请与我分享任何解决方案

Answer 4

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

首先我们将创建一个新的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 函数来显示多选下拉列表。

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