Knockout wählen Bindung kann nicht selectedOptions bekommen

Question

In meinem Markup ich eine einfache <select> Tag Hut arbeiten ich mit Knockout JS, wie so gebunden haben:

<select data-bind="options: CountriesOptions, optionsText: 'Text', optionsValue: 'Value', selectedOptions: SelectedCountries" multiple></select> 

Meine Ansicht-Modell sieht wie folgt aus (vereinfacht)

public class CountryViewModel 
{ 
    public List<SelectListItem> CountriesOptions { get; set; } 

    public int[] SelectedCountries { get; set; }  
} 

Und in meinem Controller bin bevöl ich das Modell wie folgt:

public ActionResult Edit() 
{ 
    using(var db = new DatabaseContext()) 
    { 
     var model = new CountryViewModel(); 
     model.CountriesOptions = db.Countries.Select(c => new SelectListItem 
      { 
       Value = "" + c.CountryId, 
       Text: c.Name 
      }); 

     model.SelectedCountries = new int[]{1, 2, 3} 

     return View(model); 
    } 
} 

Dieses Beispiel ist sehr vereinfacht, aber es funktioniert.

Problem

Immer, wenn ich laden Seite und die Bindung erfolgt, wird die <select> mit allen Ländern gefüllt, die die Art, wie ich es will, aber die selectedOptions nicht funktioniert. Nichts ist ausgewählt, mein Array sieht genau wie int[]{1, 2, 3} aus. Ich bin mir nicht ganz sicher, warum das nicht funktioniert.

EDIT

JS kritzelt

@using (Html.BeginScripts()) 
{ 
    @Scripts.Render("~/bundles/knockout") 
    @Scripts.Render("~/bundles/jqueryval") 
    @Scripts.Render("~/bundles/jqueryui") 
    @Styles.Render("~/Content/themes/base/jqueryui-datepicker") 

    <script type="text/javascript"> 

     // Create ViewModel 
     var vm = ko.mapping.fromJS(@Html.Raw(jsonData)); 
     vm.loading = ko.observable(false); 

     // Init validation 
     ko.validation.init({ insertMessages: true, parseInputAttributes: true, messagesOnModified: true }); 
     vm.errors = ko.validation.group(vm, { deep: true, observable: true, live: true }); 

     ko.applyBindings(vm); 

    </script> 

} 

EDIT

ich noch ein weiteres Problem gefunden gerade mit dieser Bindung. Wenn ich 2 Länder aus der Auswahl auswähle, werden sie NICHT als ausgewählt zurückgegeben. Beachten Sie, dass diese SelectListItem ‚s ist, so dass sie eine Eigenschaft Selected genannt haben

Ich versuche, alle ausgewählten Elemente zu erhalten, wenn sie an die Steuerung zurückkehren (, wenn der Benutzer drückt einreichen):

[HttpPost] 
public ActionResult Edit() 
{ 
    var selectedCountries = model.Countriesoptions.Where(x => x.Selected).ToList(); 
} 

Aber selectedCountries ist eine leere Liste.

Answer 1

Das Problem ist wahrscheinlich, dass Sie das multiple Attribut auf Ihrem select verpassen. Damit funktionieren die Dinge wie erwartet. Hier ist eine Demo mit Ihrem Code, mit dem Attribute hinzugefügt und fehlende Bits von Code Stub:

var data = { 
 
    CountriesOptions: [ 
 
    { Text: "USA", Value: 1 }, 
 
    { Text: "Greenland", Value: 4 }, 
 
    { Text: "Canada", Value: 3 }, 
 
    { Text: "Mexico", Value: 2 } 
 
    ], 
 
    SelectedCountries: [ 1, 2, 3 ] 
 
} 
 

 
// Create ViewModel 
 
var vm = ko.mapping.fromJS(data); 
 
vm.loading = ko.observable(false); 
 

 
// Init validation 
 
ko.validation.init({ insertMessages: true, parseInputAttributes: true, messagesOnModified: true }); 
 
vm.errors = ko.validation.group(vm, { deep: true, observable: true, live: true }); 
 

 
ko.applyBindings(vm);

pre { background: white; padding: 10px; color: #333; font: 11px consolas; border: 1px solid #ddd; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script> 
 

 
<select data-bind="options: CountriesOptions, 
 
        optionsText: 'Text', 
 
        optionsValue: 'Value', 
 
        selectedOptions: SelectedCountries" 
 
     multiple> 
 
</select> 
 
<hr>Debug info: <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>