将所选值的集合从Select2-Multi DropDownList传递到控制器 [英] Passing the collection of selected values from a Select2-Multi DropDownList to a Controller

问题描述

因此，我正在研究一个Select2示例，该示例可在项目中使用，但我遗漏了一部分。我不确定所选的下拉列表集合如何返回到控制器。我已经尝试了Automobiles和SoldAutomobiles的几种组合，并且当我在Submit Action方法中遇到问题时，Controller始终不显示任何数据。

So I'm working up a example of the Select2 to use in a project and I'm missing a piece. I'm not sure how the selected dropdownlist collection will get back to the controller. I've tried several combinations of Automobiles and SoldAutomobiles and the Controller always show no data when I break in the Submit Action Method.

View

@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; } 
}

已通过工作代码更改进行了更新。

UPDATED With Working Code Changes.

查看

@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; } 
}

推荐答案

您需要有效的属性绑定到（当前您试图绑定< select> ，该< select> 会将选择的选项值的简单数组发回复杂对象的集合）

You need a valid property to bind to (currently your trying to bind a <select> which post back a simple array of the selected option values to a collection of complex objects)

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 将会被选中。

Note if the values of SelectedCars matches any of the values of the options, then those options will be selected in the view when the page is rendered (e.g. if model.SelectedCars = new int[] { 2, 6 }; then "Ford" and "Esteem" will be selected.

这篇关于将所选值的集合从Select2-Multi DropDownList传递到控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！