在 Knockout 中从 Ajax 填充多选列表答案

【问题标题】：Populate Multi-select list from Ajax in Knockout在 Knockout 中从 Ajax 填充多选列表
【发布时间】：2017-10-23 18:58:45
【问题描述】：

我有一个基于 Knockoutjs example 的可编辑表格。我一直在尝试从对 ASP MVC 控制器的 AJAX 调用填充多选下拉列表。我查看了 this 示例、one 和 one 示例，但仍然无法使其正常工作。

这是html：

<tbody data-bind='foreach: users' class="table-striped">
                <tr>
                    <td><input class='required number form-control' maxlength="9" stringlength="9" data-bind='value: id, uniqueName: true' /></td>
                    <td><input class='required form-control' data-bind='value: firstName' /></td>
                    <td><input class='required form-control' data-bind='value: lastName' /></td>
                    <td>
                        <select data-bind="options: MAMUserGroupsListOptions, selectedOptions: MAMSelectedGroup">
                            <!--dropdown list goes here-->
                        </select>

                    </td>

                    <td><a href='#' data-bind='click: $root.removeUser'>Delete</a></td>
                </tr>
            </tbody>

这是淘汰赛部分的 javascript：

    var UserModel = function (users) {
    var self = this;
    self.users = ko.observableArray(users);



    //add user
    self.addUser = function () {
        self.users.push({
            id: "",
            firstName: "",
            lastName: "",
            MAMUserGroupsListOptions: "", 
            MAMUserGroups: ""
        });
    };

    //remove user
    self.removeUser = function (user) {
        self.users.remove(user);
    }; 

var viewModel = new UserModel([
    {
        id: ko.observable(""), firstName: ko.observable(""), lastName: ko.observable(""),
        MAMUserGroupsListOptions: ko.observable(),//this is where I need to populate
        MAMSelectedGroups: ko.observable(),//this is the result of the multiselect

    }
]);
ko.applyBindings(viewModel);

这是控制器：

[HttpGet]
        public ActionResult MAMUserGroupsList()
        {
            var MAMUserGroupsListOptions = db.MAMUserGroupsListModels.Select(x => new {
                MAMUserGroupName = x.MAMUserGroupName
            }).ToList();

            return Json(MAMUserGroupsListOptions, JsonRequestBehavior.AllowGet);


        }

当通过 AJAX 调用控制器时，返回的内容如下：

{MAMUserGroupName: "MAMGroup1"}, {MAMUserGroupName: "MAMGroup2"}, etc...

我正在尝试让多选下拉菜单包含“MAMGroup1”、MAMGroup2 等。

我一直在努力解决这个问题 - 任何帮助都将不胜感激。

【问题讨论】：

它返回一个对象数组？
抱歉，我对 Javascript 有点陌生。当我将它写入控制台时，它在技术上看起来像： [Object, Object, Object, Object, Object] 0 : Object MAMUserGroupName : "MAMGroup1"

标签： ajax asp.net-mvc knockout.js

【解决方案1】：

看起来您只想map 对象数组来提取一个感兴趣的值。如果您从名为 ajaxResult 的变量中的结果开始，

MAMUserGroupsListOptions(ajaxResult.map(obj => obj.MAMUserGroupName));

会将值分配给您的可观察数组。或者，如果您在创建视图模型时可以使用该值，

MAMUserGroupsListOptions: ko.observable(ajaxResult.map(obj => obj.MAMUserGroupName))

【讨论】：

除非我错过了您的意思，否则您是否遗漏了冒号？ MAMUserGroupsListOptions: (ajaxResult.map(obj => obj.MAMUserGroupName));
不，您通过将值作为参数传递给可观察对象来为其分配值。我假设您在 ajax 结果可用之前已经创建了视图模型。查看更新的答案。