Question

我有一个基于Knockoutjs example的可编辑表格。我一直在尝试从AJAX调用到ASP MVC控制器填充多选下拉列表。我已查看了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...

我试图让多选下拉列表包含＆＃34; MAMGroup1＆＃34;，MAMGroup2等。

我一直在用力撞击墙壁 - 任何帮助都会非常感激。

Answer 1

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

开始结果

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

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

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

在Knockout中填充Ajax中的多选列表

1 个答案: