5

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

これまでのところ、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}}" />

次に、関数を使用して、この文字列を Javascript オブジェクトに変換しko.utils.parseJson()ます。

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

ko.observable次に、プロパティ定義をメソッドに変換しますko.observableArray(これはリファクタリングが必要なセクションの 1 つですが、概念実証としては十分です)。

//
// 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 にまとめました ...ここ... 何かを見落としているのではないかと思いますが、それが何であるかはわかりません。私にはすべてが正しく見えます。

誰かが私が見落としているものを見ることができれば、私は非常に感謝しています!

ありがとう、

-g

4

1 に答える 1

2

バインディングでモデル名を指定する必要はありません。の代わりに、 など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>

働くフィドル

編集:各オプションの値にバインドするプロパティを指定する optionsValue バインディングも欠落していました。この変更を含めるようにフィドルを更新しました。

編集 2:さて、json で選択した領域はオブジェクトです。バインドに関するノックアウトドキュメントを調べましたが、選択した値をオブジェクトにバインドする方法がわかりませんでした。そのため、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

更新されたフィドルはこちらです。ただし、テキスト ボックス内のテキストの代わりに ID が表示されるため、これはテキスト ボックスの状況には役立ちません。ここでは少し遅れているので、それを修正する方法がよくわかりませんが、ここでインスピレーションを得ることができます. 幸運を。

于 2012-12-31T02:49:39.720 に答える