将选定值的集合从 Select2-Multi DropDownList 传递到控制器

Question

所以我正在制作一个 Select2 示例以用于项目，但我遗漏了一部分。我不确定所选的下拉列表集合将如何返回控制器。我尝试了 Automobiles 和 SoldAutomobiles 的几种组合，当我中断提交操作方法时，控制器始终不显示任何数据。

查看

@model Select2Demo.Models.Auto.Dealership

@{
    ViewBag.Title = "Auto Home Page";
}
<script src="~/Scripts/jquery-2.1.0.js"></script>
<script src="~/Scripts/select2.js"></script>
<link href="~/Content/css/select2.css" type="text/css" rel="stylesheet" />
<!-- <link href="~/Content/css/select2-1.css" type="text/css" rel="stylesheet" />-->
<link href="~/Content/bootstrap.css" type="text/css" rel="stylesheet" />
<link href="~/Content/select2-bootstrap.css" type="text/css" rel="stylesheet" />

<script>
    $(document).ready(function () {
        $("#ddlCars").select2({
            placeholder: "Select a Cars.."
        });

        $("#ddlCarsCustom").select2({
            placeholder: "Select a Cars.."
        });
    });
</script>

<div class="jumbotron">
    <h1>Select2 Multi-Select Example</h1>
</div>

@using (Html.BeginForm("Submit", "Auto"))
{
    <div class="container">
        <div class="row">
            <div class="col-md-4 form-group">
                <div class="editor-label">
                    @Html.LabelFor(model => model.Automobiles)
                </div>
                <div class="editor-field">
                    @Html.DropDownListFor(model => model.Automobiles, new SelectList(Model.Automobiles, "Id", "Make", Model.SoldAutomobiles), new { multiple = "multiple", @id = "ddlCars" })
                </div>
            </div>
        </div>

        <div class="col-sm-1">
            <input type="submit" value="Submit" class="btn btn-primary btn-lg submit-btn"/>
        </div>

    </div>
}

控制器

public class AutoController : Controller
{
    public ActionResult Index()
    {
        List<Automobile> autos  = new List<Automobile>();
        Automobile auto = GetAuto(1,"Chevy");
        autos.Add(auto);
        auto = GetAuto(2, "Ford");
        autos.Add(auto);
        auto = GetAuto(3, "Audi");
        autos.Add(auto);
        auto = GetAuto(4, "Toyota");
        autos.Add(auto);
        auto = GetAuto(5, "Duster");
        autos.Add(auto);
        auto = GetAuto(6, "Esteem");
        autos.Add(auto);
        auto = GetAuto(7, "Fiero");
        autos.Add(auto);
        auto = GetAuto(8, "Lancer");
        autos.Add(auto);
        auto = GetAuto(9, "Phantom");
        autos.Add(auto);

        Dealership dealership = new Dealership {Automobiles = autos};
        return View(dealership);
    }

    public ActionResult Submit(Dealership dealer)
    {
        Dealership dealership = new Dealership {SoldAutomobiles = dealer.SoldAutomobiles};

        return View("Index", dealership);
    }



    private static Automobile GetAuto(int id, string make)
    {
        return new Automobile {Id = id, Make = make};
    }
}

类

public class Automobile
{
    public int Id { get; set; }
    [Display(Name = "Make")]
    public string Make { get; set; }
}

public class Dealership
{
    public List<Automobile> Automobiles { get; set; }
    public List<Automobile> SoldAutomobiles { get; set; } 
}

更新了工作代码更改。

查看

@model Select2Demo.Models.Auto.Dealership

@{
    ViewBag.Title = "Auto Home Page";
}


<script>
    $(document).ready(function () {
        $("#ddlCars").select2({
            placeholder: "Select a Cars.."
        });
    });
</script>

<div class="jumbotron">
    <h1>Select2 Multi-Select Example</h1>
</div>

@using (Html.BeginForm("Submit", "Auto"))
{
    <div class="container">
        <div class="row">
            <div class="col-md-4 form-group">
                <div class="editor-label">
                    @Html.LabelFor(model => model.Automobiles)
                </div>
                <div class="editor-field">
                    @Html.ListBoxFor(model => model.SelectedAutomobiles, new SelectList(Model.Automobiles, "Id", "Make"), new { multiple = "multiple", @id = "ddlCars" })
                </div>
            </div>
        </div>

        <div class="col-sm-1">
            <input type="submit" value="Submit" class="btn btn-primary btn-lg submit-btn"/>
        </div>

    </div>
}

型号

public class Automobile
{
    public int Id { get; set; }
    [Display(Name = "Make")]
    public string Make { get; set; }
}

public class Dealership
{
    [Display(Name = "Available Auto Makes")]
    public List<Automobile> Automobiles { get; set; }
    public int[] SelectedAutomobiles { get; set; } 
}

Answer 1

您需要一个有效的属性来绑定（目前您正在尝试绑定一个 <select>，其中 post 将所选选项值的简单数组返回到复杂对象的集合)

public class Dealership
{
  public int[] SelectedCars { get; set; }
  public List<Automobile> Automobiles { get; set; }
}

并在视图中

@Html.ListBoxFor(m => m.SelectedCars, new SelectList(Model.Automobiles, "Id", "Make"))

请注意，如果 SelectedCars 的值与任何选项的值相匹配，则在呈现页面时将在视图中选择这些选项（例如，如果 model.SelectedCars = new int[] { 2, 6 }; 则 "Ford" 和 "Esteem" 将被选中。

Answer 2

使用数组获取下拉列表的值。

  public int[] CountryId { get; set; }

在 mvc 视图上，执行以下操作，

<select asp-for="CountryId" id="CountryId" class="form-md-line-input no-hint"
        asp-items="@Model.CountrySelectListItems">
    <option value="">Select A Country</option>
</select>

将选定值的集合从 Select2-Multi DropDownList 传递到控制器

Passing the collection of selected values from a Select2-Multi DropDownList to a Controller

c#

asp.net

asp.net-mvc

razor

c#-4.0