Trwałe nokaut ViewModel między ASP.NET WebForms posty po stronie serwera ...

Question

Korzystanie z tego artykułu na CodeProject.com, "Using KnockoutJS in your ASP.NET applications" jako przewodnik Próbuję utworzyć listę rozwijaną do ponownego użycia, załadowane dane za pomocą ASP.NET 3.5 Web Forms, ale to wykorzystuje KnockoutJS do wiązania danych po stronie klienta. Wiele niezależnych instancji tego rozwijania powinno mieć możliwość niezależnego życia na tej samej stronie.

Do tej pory post CodeProject.com był nieoceniony w informowaniu mnie, jak skonfigurować ustawienia i pomyślnie przekazuję zaktualizowane dane ViewModel tam iz powrotem między serwerem a klientem jako ciąg JSON i konwertuję go do iz obiekt (zarówno na serwerze, jak i na kliencie). Co mam na myśli, to co powinno być prostą częścią; powiązanie ViewModel z rozwijaną listą!

Zacznę od załadowania ciągu JSON do ukrytego pola. Zawiera listę regionów i pojedynczy 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}}" /> 

I następnie uruchomić konwertowania ten ciąg do obiektu JavaScript za pomocą funkcji ko.utils.parseJson().

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

Następnie przekonwertować definicji własności do ko.observable i ko.observableArray metod (jest to jeden z tych odcinków, które będą potrzebne, aby być refactored, ale jako dowód koncepcji wystarczy).

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

Biorąc pod uwagę to, spodziewałbym listy rozwijanej być wypełniane i wybraniu SelectedRegion gdy metoda applyBindings nazywa ...

ko.applyBindings(ddlRegionKO_pnlRegionDDLContainer_ViewModel); 

Włożyłem to wszystko razem w JSFiddle .. here ... Podejrzewam, że mogę coś przeoczyć, ale nie widzę, co to może być. Wszystko wygląda dobrze dla mnie.

Jeśli ktokolwiek może zobaczyć coś, co przeoczyłem, byłbym niezmiernie wdzięczny!

Dzięki,

-g

Answer 1

Nie trzeba podać nazwę modelu w swoich wiązań. Zamiast options:ddlRegionKO_pnlRegionDDLContainer_ViewModel.Regions, wystarczy użyć options:Regions itp

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

Working fiddle

Edycja: Byłaś także brakuje optionsValue wiążącą określony których własność chcesz być związany z wartością każdej opcji. Zaktualizowałem skrzypce, aby uwzględnić tę zmianę.

Edytuj 2: Cóż, wybrany region w twoim jsonie jest obiektem. Przyjrzałem się nokaucie documentation o wiązaniu i nie widziałem sposobu, aby powiązać wybraną wartość z obiektem, więc jeśli możliwe jest zmodyfikowanie json, wystarczy podać identyfikator wybranej wartości.

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

Zobacz, co tam zrobiłem?Wymieniłem obiekt

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

tylko z:

'SelectedRegion':5 

Updated fiddle is here. Ale to nie pomoże w twojej sytuacji w polu tekstowym, ponieważ pokaże ID zamiast tekstu w twoim polu tekstowym. Trochę za późno, więc nie jestem pewien, jak to naprawić, ale możesz odszukać here, by uzyskać inspirację. Powodzenia.