ASP.NET WebFormsサーバーのサイドポストの間にViewModelを永続的に残しています...

Question

CodeProject.comに掲載されているこの記事を使用すると、「Using KnockoutJS in your ASP.NET applications」をガイドとして使用します。ASP.NETを使用して、再利用可能なデータ読み込みドロップダウンリストを作成しようとしています。 3.5 Webフォームが、KnockoutJSをクライアント側のデータバインディングに利用しています。このドロップダウンの複数の独立したインスタンスは、同じページに独立して存在できる必要があります。

これまでのところ、CodeProject.comの投稿では、設定方法を説明する上で非常に貴重でした。私は、更新されたViewModelデータをサーバーとクライアントの間でJSON文字列として渡し、オブジェクト（サーバーとクライアントの両方）。私が懸命にしているのは、単純な部分でなければならないことです。 ViewModelをドロップダウンリストにバインドする

だから私はJSON文字列を隠しフィールドに読み込むことから始めます。これはリージョンと単一の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; 
    }; 
}; 

、私は...ドロップダウンリストを移入するとapplyBindingsメソッドが呼び出されたときにSelectedRegionが選択

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':5 

Updated fiddle is here：私は、オブジェクトだけで

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

を置き換えます。しかし、テキストボックスにテキストの代わりにIDが表示されるため、これはテキストボックスの状況に役立ちません。ここで少し遅れているので、私はそれをどうやって解決するのか本当に分かりませんが、あなたは若干のインスピレーションのためにhereを見るかもしれません。がんばろう。