将所选值的集合从Select2-Multi DropDownList传递到Controller

Question

所以我正在研究一个在项目中使用的Select2的例子,我错过了一篇文章.我不确定所选的下拉列表集合将如何返回控制器.我尝试了几种Automobiles和SoldAutomobiles的组合,当我在提交行动方法中打破时,Controller总是不显示数据.

视图

@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>一个简单的选定选项值数组绑定到一个复杂对象的集合)

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").