Javascript knockout.js中的级联下拉列表_Javascript_Knockout.js_Asp.net Mvc 5

Javascript knockout.js中的级联下拉列表

javascript knockout.js asp.net-mvc-5

Javascript knockout.js中的级联下拉列表,javascript,knockout.js,asp.net-mvc-5,Javascript,Knockout.js,Asp.net Mvc 5,我正在尝试从下拉列表填充另一个下拉列表，我不断收到错误“TypeError:无法处理绑定”值：function（）{return CompanySelected}”和“400（错误请求）”。选择保险公司时必须填充保险单。这是下面的代码 self.InsuranceCompanyId = ko.observable(); self._companySelected= ko.observable(null); self.CompanySelected = ko.computed({

我正在尝试从下拉列表填充另一个下拉列表，我不断收到错误“TypeError:无法处理绑定”值：function（）{return CompanySelected}”和“400（错误请求）”。选择保险公司时必须填充保险单。这是下面的代码

  self.InsuranceCompanyId = ko.observable();
  self._companySelected= ko.observable(null);
  self.CompanySelected = ko.computed({
  read:  function () {return this._companySelected()  },
  write: function (value) {
  $.ajax({
         url: baseUrl + 'api/Transaction/LoadInsurancePolicies/' + 
         value.InsuranceCompanyId,
         type: 'GET',
         headers: { 'Access-Control-Allow-Origin': '*' },
         dataType: 'json',
         success: function (data) {
         if (data.Successfull == 1) 
         {
         self.AllPolicies(data.Model); } },
         error: function (request, error) {                
         }
        });

        this._companySelected(value);
    },
    owner: this     
    });
    self.AllInsuranceCompanies = ko.observableArray([]);
    self.AllPolicies = ko.observableArray([]);
    self.LoadInsuranceCompanies = function () {

    $.ajax({

        url: baseUrl + 'api/Transaction/LoadInsuranceCompanies',
        type: 'GET',
        headers: { 'Access-Control-Allow-Origin': '*' },
        dataType: 'json',
        success: function (data) {
            // console.log(data);
            if (data.Successfull == 1) {
                self.AllInsuranceCompanies(data.Model);
                console.log(data);
            }

        },
        error: function (request, error) {
            console.log(error);
        }
    });
  }
 self.LoadInsuranceCompanies();

 this is my view

  <div class="form-group" data-bind="visible:(InputOption()==0)">
  <label for="InputTxt" class="control-label col-md-4">Insurance 
  Company</label>
  <div class="col-md-8">
  <select data-bind="options: AllInsuranceCompanies,
                  optionsText: 'Name',
                  optionsValue:'Id',
                  optionsCaption: 'Choose...',
                  value:CompanySelected,
                  valueUpdate:'change'"  class="form-control">
                  </select>
                   </div>
                   </div>
  <div class="form-group" data-bind="visible: (InputOption()==0)">
  <label for="InputTxt" class="control-label col-md- 
  4">InsurancePolicy</label>
  <div class="col-md-8">
  <select data-bind="options: AllPolicies,
                    optionsText: 'Name',
                    optionsValue:'Id',
                    value: selectedPolicy,
                    optionsCaption: 'Choose...'" class="form-control"> 
 </select>
 </div>
 </div>

self.InsuranceCompanyId=ko.observable（）；
self._companySelected=ko.可观测（空）；
self.CompanySelected=ko.computed({
read:function（）{返回此._companySelected（）}，
写入：函数（值）{
$.ajax({
url:baseUrl+“api/Transaction/LoadInsurancePolicys/”+
value.InsuranceCompanyId，
键入：“GET”，
头文件：{“访问控制允许源文件”：“*”}，
数据类型：“json”，
成功：功能（数据）{
如果（data.Successfull==1）
{
self.AllPolicies（data.Model）；}，
错误：函数（请求，错误）{
}
});
本公司已选择（价值）；
},
业主：这个
});
自联保险公司=ko.可观察公司（[]）；
self.AllPolicies=ko.observearray（[]）；
self.loadInsuranceCompanys=函数（）{
$.ajax({
url:baseUrl+“api/Transaction/LoadInsuranceCompanys”，
键入：“GET”，
头文件：{“访问控制允许源文件”：“*”}，
数据类型：“json”，
成功：功能（数据）{
//控制台日志（数据）；
如果（data.Successfull==1）{
联合保险公司（数据模型）；
控制台日志（数据）；
}
},
错误：函数（请求、错误）{
console.log（错误）；
}
});
}
self.LoadInsuranceCompanies（）；
这是我的看法
保险
单位
保险单

以下可能是代码中的问题

self.CompanySelected

是在

self.AllPolicies

之前定义的。这将导致运行时错误，因为定义时会自动运行

ko.computed

。这是基于淘汰文档的。解决方案：尝试在所有

ko.computed

之前定义所有

ko.observeable

，或至少放置

self.AllPolicys

在选择self.Company之前

由于

ko.computed

自动运行，并且

self.CompanySelected

的值为

undefined

，因此您的api调用中还将有一个

undefined

保险公司ID，这将导致错误的请求400。解决方案：在调用api之前尝试添加一个防护。如果（值）{……}

在html绑定中，您将

optionsValue:'Id'

。这将导致knockout尝试在您的模型中查找可能不存在的

Id

属性。解决方案：从绑定中删除

optionsValue:'Id'

，以便更改选项时的值将是模型对象本身，而不仅仅是

Id


下面是一个示例fiddle：它实现了上述解决方案。
注意：我刚刚用setTimeout
替换了您的api调用，因为我没有访问它们的权限。不要担心这一部分。
以下可能是您代码中的问题

self.CompanySelected
是在self.AllPolicies
之前定义的。这将导致运行时错误，因为定义时会自动运行ko.computed
。这是基于淘汰文档的。解决方案：尝试在所有ko.computed
之前定义所有ko.observeable
，或至少放置self.AllPolicys
在选择self.Company之前

由于

ko.computed