第二个级联下拉淘汰赛未设置返回值

我遇到了使用淘汰赛下拉列表的问题。我对此很新。这种情况是，当我编辑一些数据时，我调用Web Api来返回JSON中的一些信息。然后，JSON将被映射并显示给最终用户进行编辑，如果他们愿意的话。我有两个下拉列表（制造商和范围）。制造商下拉列表被填充并设置为返回的正确值。问题是第二个下拉列表被填充，但不是被设置为正确的值。相反，它保持默认的“选择”值。有人能够解释为什么会发生这种情况，或者指出我的方向是正确的吗？第二个级联下拉淘汰赛未设置返回值

我的代码如下。我已经修剪它，但可以提供任何进一步的代码，如果需要的话。非常感谢。

/// <reference path="../knockout/knockout-3.4.0.debug.js" /> 
/// <reference path="../jquery/jquery.min.js" /> 

var deal = function() { 
var self = this; 
// These are the initial options 
self.ManufacturerOptions = ko.observableArray(); 
self.VehicleManufacturerId = ko.observable(); 
self.RangeOptions = ko.observableArray(); 
self.VehicleRangeId = ko.observable(); 

var Deals = { 
    ManufacturerOptions: self.ManufacturerOptions, 
    VehicleManufacturerId: self.VehicleManufacturerId, 
    RangeOptions: self.RangeOptions, 
    VehicleRangeId: self.VehicleRangeId, 
}; 

self.Deal = ko.observable(); 
self.Deals = ko.observableArray(); 
RetrieveDeals(); 
GetManufacturers(); 

self.EditData = function (Deal) { 
    GetManufacturers(); 
    GetRanges(Deal.VehicleManufacturerId); 
    self.Deal(Deal); 
}; 

function GetManufacturers() { 
    $.ajax({ 
     url: 'http://localhost:47633/api/Vehicle/GetManufacturers', 
     type: 'get', 
     crossDomain: true, 
     dataType: 'json', 
     contentType: "application/json; charset=utf-8", 
     success: function (dataReturned) { 
      self.ManufacturerOptions(dataReturned); 
     } 
    }); 
} 

function GetRanges(manufacturerId) { 
    $.ajax({ 
     url: 'http://localhost:47633/api/Vehicle/GetRanges?manufacturerCode=' + manufacturerId, 
     type: 'get', 
     crossDomain: true, 
     dataType: 'json', 
     contentType: "application/json; charset=utf-8", 
     success: function (dataReturned) { 
      self.RangeOptions(dataReturned); 
     } 
    }); 
} 
}; 

$(document).ready(function() { 
    ko.applyBindings(new deal()); 
});

ASCX控制

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Home.ascx.cs" Inherits="Desktop.Controls.DealBook.Home" %> 

<h1>DealBook</h1> 
<div data-bind="if: Deal"> 
<div> 
    <h2>Update Deal</h2> 
</div> 
<div> 
    <p>Manufacturer: <select id="Manufacturer" data-bind="options: ManufacturerOptions, optionsCaption: 'Select Manufacturer', optionsValue: 'cman_code', optionsText: 'cman_name', value: Deal().VehicleManufacturerId, event: { change: manufacturerChanged}"></select></p> 
    <p>Range: <select id="Range" data-bind="options: RangeOptions, optionsCaption: 'Select Range', optionsValue: 'cran_code', optionsText: 'cran_name', value: Deal().VehicleRangeId, event: { change: rangeChanged }"></select></p> 
</div> 
<input type="button" id="btnUpdateData" class="btn btn-primary" value="Update Deal" data-bind="click: UpdateData" /> 
<input type="button" id="btnCancel" class="btn btn-primary" value="Cancel" data-bind="click: Cancel" />

UPDATE 我相信这个问题是我的代码试图下拉列表更新到之前选定的值选项从Web API返回。有关如何在返回选项后将价值绑定到交易的任何想法？

来源

2016-02-12 Rickesh J

见'valueAllowUnset'参数选项。 http://knockoutjs.com/documentation/options-binding.html#parameters –

感谢您的评论。我现在通过添加'async：false'来修复我对Web Api的调用。在下拉列表填充之前，这停止了“交易”设置。 –

通过使用Jquery承诺修正方法调用直到完成修复。

我现在请的$.when(GetRanges(Deal.VehicleManufacturerId)).then(function() { self.Deal(Deal) });代替

GetRanges(Deal.VehicleManufacturerId); 
self.Deal(Deal);

来源

2016-02-12 14:59:19

'async：false'通常是个坏主意。请参阅http://stackoverflow.com/questions/24187160/ajax-async-false-is-deprecated –

谢谢@RoyJ。我通过使用Jquery promise来修复它，并推迟了我的调用。我已经更新了我的答案以反映这一点 –

第二个级联下拉淘汰赛未设置返回值

回答

相关问题