Question

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

这是我的模特：

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：

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

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

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并且工作正常，那么为什么从服务器获取数据时它不起作用呢？

感谢您的帮助。

Answer 1

$.ajax的返回值不是ajax调用的结果。您需要提供一个success处理程序，它将在完成AJAX调用后接收数据（ajax调用是异步的）。您要做的是为contacts设置一个单独的可观察对象，然后连接companyId的订阅，并在companyId更改时执行您的ajax调用：

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

没有使用KnockoutJS和Ajax填充下拉列表

1 个答案: