Question

在我的标记中，我有一个简单的<select>标签帽，我已经与Knockout JS绑定了，就像这样：

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

我的视图模型看起来像这样（简化）

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

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

在我的控制器中，我正在填充模型：

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

这个例子非常简化，但它可以完成工作。

问题

每当我加载页面并完成绑定时，<select>都会填充所有国家/地区，这就是我想要的方式，但selectedOptions无效。根本没有选择，因为我的数组看起来与int[]{1, 2, 3}完全相同。我不太清楚为什么这不起作用。

修改

JS涂鸦

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

}

修改

我刚刚发现了这个绑定的另一个问题。如果我从选择中选择2个国家/地区，则不会将其选中。请记住，这是SelectListItem，所以他们有一个名为Selected

的属性

我正在尝试在返回控制器时获取所有选定的项目（当用户按下提交时）：

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

但是selectedCountries是一个空列表。

Answer 1

问题可能是您错过了mainCallbackQueue上的RPC属性。有了它，事情按预期工作。这是一个包含代码的演示，添加了该属性，缺少代码存根：

multiple

select

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

敲除选择绑定无法使selectOptions工作

1 个答案: