CodeZine(コードジン)

特集ページ一覧

ASP.NET AJAX 4.0を予習する(前編)

強化されたASP.NET対応のクライアントAJAXフレームワーク

  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

バインディング

 まずはバインディングを利用した例を見ていきましょう。

 バインディングを利用すると、JavaScriptで定義されたオブジェクトを簡単に表示させたり、コントロールを関連付けて内容を同期させたりすることができます。

コードによるバインディング

 リスト3はテキストボックスに入力したデータと、ラベルに表示されるデータをバインドした例です。

リスト3 JavaScriptを利用したバインディング
<script type="text/javascript">
    Sys.Application.add_init(function() {
        $create(Sys.Binding, {
            source: $get("txtInputName"), path: "value",
            target: $get("lblDispName"),  targetProperty: "innerHTML"
        });
    });
</script>
<div>
    <input type="text" id="txtInputName" /><br />
    <span id="lblDispName"/>    
</div>

 Bindingオブジェクトのプロパティには、ソースとなるコントロール(source)のプロパティ(path)と、表示するコントロール(target)のプロパティ(targetProperty)を設定します。BindingオブジェクトはSys.Observerクラスを利用してターゲットとソースの変更通知の管理を行います。詳しい利用方法は後編で触れていきます。

 このスクリプトを起動すると、図4のようにテキストボックスに値を入力し、テキストボックスからフォーカスが移動するタイミングでラベルにテキストボックスに入力した値が表示されます。

図4 リスト3の実行結果
図7 テンプレートを利用した結果の表示の処理の流れ

宣言的なバインディング

 宣言的なバインディングが導入されたことで、変更時に関してはJavaScriptを自前で記述しなくてもテキストボックスの変更をラベルに通知することができるようになりました。しかし、リスト3では2つのコントロールをバインドするためのコードを記述する必要があります。リスト4はリスト3を宣言的な記法で書き換えた例です。

リスト4 宣言的に定義したバインディング
<!-- (1) タグの定義とバインディングの有効化 -->
<body xmlns:sys="javascript:Sys" 
      xmlns:binding="javascript:Sys.Binding"
      sys:activate="bindingContainer">
    <form id="form1" runat="server" >
        <asp:ScriptManager ID="ScriptManager" runat="server">
          <Scripts>
            <asp:ScriptReference Name="MicrosoftAjaxTemplates.js" />
          </Scripts>
        </asp:ScriptManager>
        <div id="bindingContainer">
            <!-- (2) バインディングの定義 -->
            <input type="text" id="txtInputName"
                   sys:attach="binding"
                   binding:source="{{ $get('txtInputName') }}"
                   binding:path="value"
                   binding:target="{{ $get('lblDispName') }}"
                   binding:targetproperty="innerHTML" /><br />
            <span id="lblDispName" />
        </div>
    </form>
</body>

(1)タグの定義とバインディングの有効化

 bodyタグではASP.NET AJAX 4.0が提供するSysオブジェクトやBindingオブジェクトをsysやbindingといった名前空間にマッピングし、sys:activateに指定されたコンテナをバインディングの対象とします。ここでsys:activate="*"とするとHTMLに含まれるすべてのコンテナに対してバインディングが有効になります。

(2)バインディングの定義

 ASP.NET AJAX 4.0でHTMLの要素をバインドする場合は、sys.attach属性を利用し対象となるオブジェクトにbindingオブジェクトをattachします。つづいて、リスト3で記述したようにソースとなるコントロールのプロパティとターゲットとなるコントロールのプロパティを定義します。

DataViewを用いたWPFライクなバインディング

 次にJavaScriptのオブジェクトをソースとしてバインディングを行う例をリスト5に示します。

リスト5 JavaScriptのオブジェクトをソースとしたバインディング
<!-- タグの定義とバインディングの有効化 -->
<body xmlns:sys="javascript:Sys"
      xmlns:dataview="javascript:Sys.UI.DataView"
      sys:activate="bindingContainer">
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Name="MicrosoftAjaxTemplates.js" />
        </Scripts>
    </asp:ScriptManager>
    <script type="text/javascript">
        // ページロード時に呼び出される関数
        Sys.Application.add_load(function() {
            var dataSource = { name: "karua" };
            $find("bindingContainer").set_data(dataSource);
        });

        // 値の表示ボタンクリック時にバインドしたデータを表示する関数
        function dispContext() {
            alert($find("bindingContainer").get_data().name);
        }

        // spanに表示するデータの変換を行うコンバーター
        function formatName(value) {
            return String.format("名前:{0}", value);
        }
    </script>
    <div id="bindingContainer" class="sys-template"
        sys:attach="dataview" >
        <input type="text" value="{binding path=name}" /><br />
        <span>{binding path=name, convert="formatName"}</span>
    </div>
    <input type="button" value="値の表示" onclick="dispContext()" />
</form>
</body>

 リスト4の例とほとんど同じですが、リスト5ではページのロードタイミングでJavaScriptからDataViewオブジェクトのdataプロパティにJavaScriptのdataSource変数を設定し、inputタグとspanタグはdataSource変数のnameプロパティをバインディングしています。 (バインディングには{binding ...}といった特殊な構文を利用します。)

 記述は変わりましたが、設定している内容はリスト3やリスト4と同じです。たとえばinputタグには、ソースとなるオブジェクト(dispContextメソッドで設定されたデータ)のプロパティ(path)を指定します。この場合はdataSource変数のnameプロパティを設定しています。

 ASP.NET AJAX 4.0のバインディングはWPFやSilverlightのバインディングとよく似ています。Silverlightのバインディングに関しては次の記事を参照してください。

 ASP.NET AJAXのバインディングもWPFやSilverlightと同じように通知の方向(Tow-Way, One-Way, One-Time)を指定したり、コンバーターを利用して値の変換を行うことができます。リスト5の例ではspanタグにはformatNameコンバーターが設定されているため、データに変更がかかったタイミングでJavaScriptのformatNameメソッドが呼び出され、「名前: + バインディングされたデータ」に変換された値が表示されます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ASP.NET AJAX 4.0 プレビュー

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト かるあ (杉山 洋一)(カルア(スギヤマ ヨウイチ))

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5