3

行を追加および削除したり、一部の列を編集したり、他の列の入力に基づいて他の列を直接計算したりできる単純な ajax グリッドを作成しようとしています。これは、asp.net ajax 4.0 とクライアント テンプレートを操作する良い機会になると思いました。それはかなり問題なく動作しますが、json データを にバインドする方法が見つからないようです。これどうやってするの？

通常のテンプレートは次のようになります

<div id="authorsTemplate" style="visibility:hidden;display:none;"> 
    <ul> 
        <li>First Name: {{ FirstName }}</li> 
        <li>Last Name: {{LastName}}</li> 
        <li>Url: <a href="{{Url}}">{{Url}}</a></li> 
    </ul> 
</div>

ドロップダウンでデータバインド構文を使用するにはどうすればよいですか

<select id="">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

編集:選択タグに値属性がある場合、明らかな解決策は次のとおりです。Edit2: 以下の構文は実際には解決策でした。Thx Roatin です。select に実際に値属性があるとは知りませんでした。

<select id="" value="{binding nr}">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

カスタムjavascriptを使用して選択したオプションを設定することもできますが、ポイントは、入力タグの値にバインドするのと同じ方法でjsonオブジェクトにライブバインドすることです

4

2 に答える 2

3

ドロップダウンに入力したくありません。既に入力されています。クライアント テンプレート バインディング構文を使用して、json オブジェクトから値を取得し、選択した要素を設定できるようにしたいと考えています。

実際、selectDOM 要素にはプロパティがありvalueます (ただし、マークアップで属性として公開されていません)。<option>it を設定することは、子s を反復しselectedIndex、一致する を持つオプションの見つかったオプション インデックスに を設定することと同等 (かつ高速)valueです。

Sys.Bindingとにかく、 （完全なテストケース）で直接バインドする方法は次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">.sys-template {display:none}</style>
    <script src="MicrosoftAjax.debug.js"></script>
    <script src="MicrosoftAjaxTemplates.debug.js"></script>

    <script type="text/javascript">
    var dataItem = { Foo: '3' };
    function pageLoad()
    {
        $create(Sys.Binding, {
            target: $get("list"),
            targetProperty: 'value',
            source: dataItem,
            path: 'Foo',
            mode: Sys.BindingMode.twoWay
        });
    }
    </script>
</head>
<body>
  <select id="list">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</body>
</html>

必要に応じて、同じことを宣言的に行う方法を次に示します。

<body xmlns:sys="javascript:Sys"
      xmlns:binding="javascript:Sys.Binding"
      sys:activate="*">

  <select id="list"
    sys:attach="binding"
    binding:target="{{ $get('list') }}"
    binding:targetproperty="value"
    binding:source="{{ dataItem }}"
    binding:path="Foo">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

pageLoad(そしてもちろん、 JavaScript のものを取り除きます...)

どちらの例も、オブジェクトへの双方向バインディングをセットアップしdataItemます。ページが読み込ま<option>れると、値が一致するオプションである 3 番目が選択されていることがわかりますdataItem.Foo。ドロップダウンから別の項目を選択すると、選択dataItem.Fooした新しい値で更新されます。

それが役立つことを願っています!

于 2009-10-09T04:15:33.530 に答える
0

私は実際にこれを試したことはありませんが、これらの 3 つの リンクのブログ投稿のいずれかが役立つようです。すべての例は、データのリストへのバインディングを示しています。多分このようなもの：

* サンプルはテストされていませんが、私の VS 2010 コンプは破損しており、3 番目のリンクから密接に派生しています *

var sampleData = [
    { Value: "1", Text: "1" },
    { Value: "2", Text: "2" },
];
var select = "1";

<select id="list" class="sys-template" 
    sys:attach="dataview" 
    dataview:data="{{ sampleData }}">
    <option value="{{ Value }}">{{ Text }}</option>
</select>

次に、必要な値を選択します（力ずくで行います）

var list = document.getElementById( "list");
foreach ( var option in list.options)
{
    if( option.value == select)
    {
        option.selected = true;
        break;
    }
}

または、テンプレートを微調整して、「選択した」オプションのバインディングを含めます。(ここでもテストされていません。Selected === true を実行できない可能性があります)

var sampleData = [
    { Value: "1", Text: "1", Selected: true },
    { Value: "2", Text: "2" },
];
var select = "1";

<select id="list" class="sys-template" 
    sys:attach="dataview" 
    dataview:data="{{ sampleData }}">
    <option value="{{ Value }}" selected="{{ Selected === true }}">{{ Text }}</option>
</select>
于 2009-10-08T02:35:33.470 に答える