ASP.NET WebForms sunucu tarafı yayınları arasında ViewModel Kalıcı bağlantı noktası ...

Question

CodeProject.com, "Using KnockoutJS in your ASP.NET applications" adresinde yayınlanan bu makaleyi kullanarak, ASP.NET kullanarak yeniden kullanılabilir, veri yüklü bir açılır liste oluşturmaya çalışıyorum 3.5 Web Formları, ancak istemci tarafında veri bağlama için KnockoutJS kullanır. Bu açılır listenin birden çok bağımsız örneği, aynı sayfada bağımsız olarak yaşayabilmelidir.

Şu ana kadar CodeProject.com yayını işlerimi nasıl ayarlayacağımı yönlendirmek için çok değerli oldu ve sunucu ve istemci arasında güncellenmiş ViewModel verilerini bir JSON dizesi olarak ileri geri iletiyorum. Bir nesne (hem sunucuda hem de istemcide). Ne takılıyorum basit kısmı ne olmalıydı; ViewModel'i aşağı açılan listeye bağlama!

JSON dizesini gizli bir alana yükleyerek başlıyorum. Bölgeler ve tek bir SelectedRegion listesi içerir.

<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}}" /> 

Sonra ko.utils.parseJson() işlevini kullanarak bir JavaScript Nesne içine bu dizeyi dönüştürmek çalıştırın.

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

Sonra ko.observable ve ko.observableArray yöntemlerle (bu refactored gerekir edilecek olan bölümlerden biri, ancak kavramın bir kanıtı olarak o yeter) içine mülkiyet tanımlarını dönüştürün.

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

bu göz önüne alındığında,

ko.applyBindings(ddlRegionKO_pnlRegionDDLContainer_ViewModel); 

... listesi açılan doldurulması ve applyBindings yöntemi çağrıldığında SelectedRegion seçilen beklenebilir Ben JSFiddle de hep birlikte bu koyduk .. here ... Bir şeye baktığımı sanıyorum ama ne olabileceğini göremiyorum. Her şey bana doğru görünüyor.

Kimse benim gördüğüm bir şeyi görebiliyorsa son derece minnettar olurum!

sayesinde -g

Answer 1

Sen bağlantılarında model adını belirtmeniz gerekmez. Yerine options:ddlRegionKO_pnlRegionDDLContainer_ViewModel.Regions arasında, sadece vb

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

Working fiddle

Edit options:Regions kullanın: Ayrıca, her seçeneğin değerine bağlı olmayı istiyoruz belirtilen hangi özelliği olduğunu bağlayıcı bir optionsValue kayıptı. Bu değişikliği dahil etmek için kemanı güncelledim.

2: Şimdi, seçtiğiniz bölgeniz json'unuzda bir nesnedir. Bağlama hakkında documentation nakavtun üzerine baktım ve seçilen bir değeri bir nesneye bağlamanın bir yolunu görmedim, bu nedenle json'u değiştirmek mümkün ise, seçilen değerin kimliğini belirtebilirsiniz.

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

Orada ne yaptığımı gördünüz mü?

'SelectedRegion':5 

Updated fiddle is here: Ben nesneyi sadece birlikte

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

yerini aldı. Ancak bu, metin kutunuzdaki duruma yardımcı olmaz, çünkü metin kutunuzdaki metin yerine kimliği gösterecektir. Bu biraz geç oldu, bu yüzden elimden nasıl düzeltebileceğime emin değilim, ama biraz ilham almak için here'a bakabilirsiniz. İyi şanslar.