堅持敲除ASP.NET WebForms服務器端帖子之間的ViewModel ...

Question

使用這篇文章張貼在CodeProject.com，「Using KnockoutJS in your ASP.NET applications」作爲指南我試圖創建一個可重用的，數據加載下拉列表使用ASP.NET 3.5 Web Forms，但是它利用KnockoutJS進行客戶端數據綁定。此下拉菜單的多個獨立實例應該能夠在同一頁面中獨立生活。

到目前爲止，CodeProject.com的帖子在指導我如何設置和我成功地將更新後的ViewModel數據作爲JSON字符串在服務器和客戶端之間來回傳遞，並將其轉換爲和從一個對象（都在服務器和客戶端上）。我所掛的是簡單的部分，將ViewModel綁定到下拉列表！

因此，我首先將JSON字符串加載到隱藏字段中。它包括一個Regions和一個SelectedRegion列表。

<input type="hidden" id="ddlRegionKO_hdnRegionListVMStorage" value="{&quot;Regions&quot;:[{&quot;RegionName&quot;:&quot;Mid Atlantic USA&quot;,&quot;RegionId&quot;:2},{&quot;RegionName&quot;:&quot;Mid West USA&quot;,&quot;RegionId&quot;:10},{&quot;RegionName&quot;:&quot;North Central USA&quot;,&quot;RegionId&quot;:5},{&quot;RegionName&quot;:&quot;North East USA&quot;,&quot;RegionId&quot;:1},{&quot;RegionName&quot;:&quot;North West USA&quot;,&quot;RegionId&quot;:7},{&quot;RegionName&quot;:&quot;Other&quot;,&quot;RegionId&quot;:9},{&quot;RegionName&quot;:&quot;South Central USA&quot;,&quot;RegionId&quot;:6},{&quot;RegionName&quot;:&quot;South East USA&quot;,&quot;RegionId&quot;:3},{&quot;RegionName&quot;:&quot;South West USA&quot;,&quot;RegionId&quot;:8}],&quot;SelectedRegion&quot;:{&quot;RegionName&quot;:&quot;North Central USA&quot;,&quot;RegionId&quot;:5}}" /> 

然後，我使用ko.utils.parseJson()函數將該字符串轉換爲Javascript對象。

var stringViewModel = document.getElementById("ddlRegionKO_hdnRegionListVMStorage").value; 
var ddlRegionKO_pnlRegionDDLContainer_ViewModel = ko.utils.parseJson(stringViewModel); 

然後我轉換屬性定義爲ko.observable和ko.observableArray方法（這是將要進行重構的部分之一，但作爲一個概念證明就足夠了）。

// 
// Convert all the model properties to KO Propety/Methods 
for (var propertyName in ddlRegionKO_pnlRegionDDLContainer_ViewModel) { 
    switch(propertyName.toUpperCase()) 
    { 
     // 
     // Multiple Region objects are stored as an array in the regions property. 
     case "REGIONS": 
      ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName] = ko.observableArray(ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName]); 
      break; 
     // 
     // Only a single region may be selected at any time. 
     case "SELECTEDREGION": 
      ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName] = ko.observable(ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName]); 
     break; 
    }; 
}; 

鑑於此，我希望在下拉列表中，且能夠選擇SelectedRegion當applyBindings方法被調用......

ko.applyBindings(ddlRegionKO_pnlRegionDDLContainer_ViewModel); 

我在的jsfiddle把所有在一起.. here ...我懷疑我可能會忽視某些東西，但我看不到它會是什麼。一切看起來都適合我。

如果有人能看到我忽略的東西，我會非常感激！

感謝，

-g

Answer 1

你並不需要在你的綁定指定型號名稱。取而代之的options:ddlRegionKO_pnlRegionDDLContainer_ViewModel.Regions，只是使用options:Regions等

<select id="ddlRegionKO_ddlRegionList" 
    data-bind="options:Regions, 
     optionsText:'RegionName', 
     optionsValue:'RegionId', 
     value:SelectedRegion, 
     optionsCaption:'Choose Region ...'"> 
</select> 

Working fiddle

編輯：您也失蹤了optionsValue綁定指定哪個屬性要被綁定到每個選項的值。我更新了小提琴以包含此更改。

編輯2：那麼，你的json中你選擇的區域是一個對象。我查看了關於綁定的敲除documentation，並且我沒有看到將選定值綁定到對象的方法，所以如果可以修改json，則可以指定所選值的id。

<input type="hidden" 
    id=".." 
    data-bind="..a bunch of array stuff... ,&quot;SelectedRegion&quot;:5}" 
/> 

看看我在那裏做了什麼？我替換的對象

'SelectedRegion':{'RegionName':'North Central USA','RegionId':5} 

只：

'SelectedRegion':5 

Updated fiddle is here。但是這對您的文本框無助，因爲它會顯示ID而不是文本框中的文本。這裏有點晚，所以我不確定如何解決這個問題，但你可以看看here的一些靈感。祝你好運。