Passing the collection of selected values from a S

Question

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

Controller

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

Classes

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.

View

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

Model

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

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

and in the view

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

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.

Answer 2

Use an array to get the values of your drop-down list.

  public int[] CountryId { get; set; }

And on mvc view, do the following,

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