第二個級聯下拉淘汰賽未設置返回值

我遇到了使用淘汰賽下拉列表的問題。我對此很新。這種情況是，當我編輯一些數據時，我調用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來修復它，並推遲了我的調用。我已經更新了我的答案以反映這一點 –

第二個級聯下拉淘汰賽未設置返回值

回答

相關問題