如何使用 knockout.js 在 asp.net mvc 中设置选定的选项？答案

【问题标题】：how to set selected option in asp.net mvc using knockout.js?如何使用 knockout.js 在 asp.net mvc 中设置选定的选项？
【发布时间】：2020-03-01 04:22:04
【问题描述】：

我正在尝试根据从模型收到的值设置默认选择的选项。我正在使用 asp.net mvc 和 knockout js 进行数据绑定。

//Model.TestValue="DEF"

脚本部分。

<script>
var model = {
            MyData: ko.mapping.fromJS(@Html.Raw(Json.Serialize(Model)))
        };

ko.applyBindings(model);  
</script>

查看部分：剃刀

@{
   var mydropdownlist = new SelectList(
        new List<SelectListItem>
        {
new SelectListItem {Text = "ABC", Value = "1"},
new SelectListItem {Text = "DEF", Value = "3"},
new SelectListItem {Text = "GHI", Value = "5"}
        }, "Value", "Text");

}

查看部分 HTML。

<select data-bind="options: mydropdownlist, optionsText:'text', value:MyData.testValue "></select>

现在 mydropdownlist 可以正常填充，但我无法将“DEF”设置为默认选中。

【问题讨论】：

ko 区分大小写，使用Model.TestValue 而不是 MyData.testValue
也试过了。但不工作。

标签： javascript asp.net-mvc knockout.js selectlistitem

【解决方案1】：

使用来自 mydropdownlist 的所需选项引用设置可观察属性 MyData.testValue。

MyData.testValue(mydropdownlist.Items()[1]); //定义

例子：

$(函数() {

    var VmClass = function() {
        self.MyOptions = ko.observableArray([
            { Name: 'Jhon', Age: 45 }, { Name: "Peter", Age: 67 }, { Name: 'Oliver', Age: 90}
        ]);

        self.SelectedOption = ko.observable();

        // can select after binding initialized as well.
        self.ClickMeToSelect = function() {
            self.SelectedOption(self.MyOptions()[2]);
        };
        self.ClickMeToSelect();
    };

    var vmInstance = new VmClass();
    ko.applyBindings(vmInstance, document.getElementById('[element-id]')); 
});

【讨论】：

【解决方案2】：

这是你想要达到的目标吗？

var data = [
  {"text": "ABC","value": 1},
  {"text": "DEF","value": 2},
  {"text": "GHI","value": 3},
  {"text": "JKL","value": 4},
];

var model = {
  mydropdownlist: ko.observableArray(data),
  selectedOption: ko.observable(data[1])
};

ko.applyBindings(model);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="options: mydropdownlist, optionsText:'text', value:selectedOption "></select>

<pre data-bind="text: ko.toJSON($root.selectedOption)"> </pre>

【讨论】：