关于asp.net mvc：Dropdown未使用KnockoutJS和Ajax填充


Dropdown is not populated with KnockoutJS and Ajax

我正在尝试使用来自返回json的ajax源中的kickoutjs填充下拉列表。更改另一个下拉菜单的值时，必须更新此选择。

这是我的模特：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var self = this,
    getClientsRoute ="GetContactsFromCompany";

self.selectedCompany = ko.observable();
self.contacts = ko.computed(function getContactsFromCompany() {
    var companyId = self.selectedCompany();
    if (companyId !="" && companyId != undefined) {
        return $.ajax(getClientsRoute, {
            type: 'GET',
            data: 'companyId=' + companyId
        });
    } else {
        return [];
    }            
});

这是我的HTML：

1
2
<select class="form-control" name="Client.Id" data-bind="options: contacts,optionsText: 'Name',optionsValue: 'Id'">
</select>

这是我的返回JSON字符串的方法(我使用.NET MVC)：

1
2
3
4
5
6
7
8
9
10
11
public JsonResult GetContactsFromCompany(int companyId)
    {
        var contacts = _db.Contacts.Where(c => c.CompanyId == companyId).Select(c =>
            new
            {
                Id = c.Id.ToString(),
                Name = c.Name.ToString()
            }).ToList();

        return Json(contacts, JsonRequestBehavior.AllowGet);
    }

我已经看到了其他解决方案，但是我认为使用"计算"??方法更干净。一切似乎都正常，我收到了json数据，但未填充下拉列表。我已经复制了服务器返回的json字符串，并使用它创建了一个observableArray并可以正常工作，所以为什么从服务器获取数据时它不起作用？

感谢您的帮助。

$.ajax的返回值不是ajax调用的结果。您需要提供一个success处理程序，该处理程序将在AJAX调用完成时接收数据(ajax调用是异步的)。您要做的是为contacts提供一个单独的可观察对象，然后挂接到companyId的订阅，并在companyId发生更改时进行ajax调用：

1
2
3
4
5
6
7
8
9
10
11
self.companyId = ko.observable();
self.contacts = ko.observableArray([]);
self.companyId.subscribe(function() { self.loadContacts(); });

self.loadContacts = function() {
    $.ajax(getClientsRoute, {
        type: 'GET',
        data: 'companyId=' + self.companyId(),
        success: function(data) { self.contacts(data); }
    });
}
相关讨论