Save multiple selected data - html

Question

With this code on my form I want to save the selected Cars (all its data - id and description):
<div class="editor-field">
#Html.DropDownListFor(model => model.Cars, new SelectList(Model.ListCars, "Description", "Description"), new { id = "myCars", multiple="multiple" })
#Html.ValidationMessageFor(model => model.Cars)
</div>
but when I check if Model.IsValid, it's set to false and in my view I got this message: The value '(selected)' is invalid.
Can anyone tell me why and how can I solve this?
My viewModel:
public ICollection<Car> Cars;
public ICollection<Car> ListCars; //it's populated somewhere
My Car.cs:
public int Id { get; set; }
public string Description { get; set; }

Answer 1

I developed a solution that doesn't consider a good practice, but at least it solved my problem. Basically my logic is as follows:
Use a plugin for the dropdown helper
Have somewhere a hidden div with all the selectable values ​​passed to the dropdown helper (id and description)
When there is a change in the selected dropdown through JS item, "select" in the hidden div desired values ​​by assigning them a specific name in order to be saved
Like this:
1. Use a plugin for the dropdown helper:
I used this JS plugin (v0.6) on my dropdowns, so I have this changes:
My dropdown helper:
#Html.DropDownListFor(model => model.Cars, new SelectList(Model.ListCars, "Description", "Description"), new { id = "myCars", #class = "isCheckList", multiple="multiple" })
In my JS:
$(document).ready(function () {
$(".isCheckList").dropdownchecklist({ firstItemChecksAll: true, width: 350 });
});
2. Have somewhere a hidden div with all the selectable values ​​passed to the dropdown helper (id and description):
<div id="carsHidden" style="display:none">
#foreach (Caritem in Model.ListCars)
{
<div id="#(item.Id)">
#Html.HiddenFor(modelItem => item.Id, new { data_Name = "Id" })
#Html.HiddenFor(modelItem => item.Description, new { data_Name = "Description" })
</div>
}
</div>
3. When there is a change in the selected dropdown through JS item, "select" in the hidden div desired values ​​by assigning them a specific name in order to be saved:
For this, I add an event onchange to my dropdown helper and manager that selection:
$(".isCheckList").on("change", function (e, data) {
var hiddenDivId = $(this).data("hiddendivid");
var fieldName = $(this).data("fieldname");
selectManagement($(this), data, hiddenDivId, fieldName);
});
function selectManagement(e, data, hiddenDivId, fieldName) {
$(e).children().each(function () {
if ($(this).attr("value") == $(data).attr("value")) {
if ($(this).attr("selected")) {
$("#" + hiddenDivId + " #" + $(this).attr("value")).addClass("IsSelected");
selectComponent(hiddenDivId, fieldName);
}
else {
$("#" + hiddenDivId + " #" + $(this).attr("value")).removeClass("IsSelected");
unselectComponent(hiddenDivId);
updateRowsIds(hiddenDivId, fieldName);
}
return false;
}
});
}
function unselectComponent(hiddenDivId) {
$("fieldset").each(function () {
if ($(this).find("div#" + hiddenDivId).exists()) {
$("div#" + hiddenDivId).children().each(function () {
if ($(this).hasClass("IsSelected") == false) {
$(this).find("input").each(function () {
$(this).attr("name", null);
$(this).attr("id", null);
});
}
});
}
});
}
function selectComponent(hiddenDivId, fieldName) {
$("fieldset").each(function () {
if ($(this).find("#" + hiddenDivId + " .IsSelected").exists()) {
var index = 0;
$("#" + hiddenDivId + " .IsSelected").each(function () {
$(this).children().each(function () {
if ($(this).is("input")) {
$(this).attr("name", fieldName + "[" + index + "]." + $(this).data("name"));
$(this).attr("id", fieldName + "_" + index + "_" + $(this).data("id"));
}
});
index++;
});
}
});
}
function updateRowsIds(hiddenDivId, fieldName) {
$("#" + hiddenDivId + " div.IsSelected").each(function (index) {
$(this).find("input").each(function () {
$(this).attr("name", fieldName + "[" + index + "]." + $(this).data("name"));
});
});
}
So now, always I select a Car I will save its Description and ID