CodeZine(コードジン)

特集ページ一覧

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

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

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

目次

1. DataContext→AdoNetDataContext

 データコンテキストをDataContextコントロールからAdoNetDataContextコントロールに変更しています。これに伴い、WebサービスのUrlも変更しています。

2. 検索方法の変更

 DataContextコントロールでは、Webサービスのメソッド名と引数を設定していましたが、AdoNetDataContextコントロールでは、DataServicesに登録したエンティティ名をfetchOperationプロパティに、検索フィルタをfetchParameterプロパティに設定します(ここでは、日本語のエンティティ名である"住所検索"という文字列をJavascriptのencodeURIメソッドでエンコードしています。コラム参照)。

 リスト7では、検索ボタンをクリックすると「DataService.svc/住所?$filter=startwith(郵便番号,'180')」といったクエリが発行されます(実際はURLエンコードされた文字列)。この時実際にサーバ側で発行されるSQLはリスト8のようなものになります。

リスト8 サーバ側で発行されるSQL
SELECT [Extent1].[ID] AS [ID], [Extent1].[郵便番号] AS [郵便番号], 
[Extent1].[都道府県名] AS [都道府県名], [Extent1].[市区町村名] AS [市区町村名], 
[Extent1].[町域名] AS [町域名], [Extent1].[都道府県名カナ] AS [都道府県名カナ], 
[Extent1].[市区町村名カナ] AS [市区町村名カナ],
[Extent1].[町域名カナ] AS [町域名カナ]
FROM [dbo].[住所] AS [Extent1]
WHERE ( CAST(CHARINDEX(N'180', [Extent1].[郵便番号]) AS int)) = 1

 startswith関数がSQLの「( CAST(CHARINDEX(N'180', [Extent1].[郵便番号]) AS int)) = 1」に展開され検索が行われているのが確認できます。

【コラム】日本語のエンティティ名に注意

 マルチバイト環境の整備も進み筆者の印象としてはここ最近、日本語(マルチバイト)のテーブル名を利用してプログラム開発を行うことも多くなってきました。

 ASP.NET 4.0も日本語を利用してプログラムを開発することは可能ですが、ASP.NET AJAX 4.0 Preview 4に含まれるAdoNetDataServicesで日本語のエンティティ名を利用する場合はjavascript側でencodeURIメソッドを使用して事前にマルチバイト文字をエスケープする必要があります。

 今後のリリースで事前にエスケープする必要は無くなるかもしれません。

3. 更新処理の追加

 次に、データバインドを通じてAdoNetDataContextに行われた変更を、サーバに通知するボタンをページに追加します。追加するコードはリスト9になります。

リスト9 データの更新をサーバに通知するコード
// データを供給するdataContextの定義
Sys.Application.add_load(function() {
    ... 略 ...

    $get("save").onclick = function(sender, args) {
        dataContext.saveChanges();
    }
});

 ボタンがクリックされた場合は、dataContextのsaveChangesメソッドを呼び出してサーバ側にデータの変更を通知しています。

 このときサーバ側に通知されるのは、変更があったレコードのみです。例えば図7のように郵便番号が180000の都道府県名と180004の市区町村名をそれぞれひらがなに変更して、変更ボタンをクリックした場合リスト10のような通信が発生します。

図7 下線を引いた2カ所を変更
図7 下線を引いた2カ所を変更
リスト10 サーバ側変更時の送信内容(抜粋)
MERGE http://xxx/sample1/WebDataService.svc/%E4%BD%8F%E6%89%80(110025) 
{"__metadata":{"uri":"http://127.0.0.1.:1714/sample1/WebDataService.svc/%E4%BD%8F%E6%89%80(110025)",
"type":"SampleTableModel.住所"},"ID":110025,"郵便番号":"1800000",
"都道府県名":"とうきょうと" ... 略}

MERGE http://xxx/sample1/WebDataService.svc/%E4%BD%8F%E6%89%80(110026) 
{"__metadata":{"uri":"http://127.0.0.1.:1714/sample1/WebDataService.svc/%E4%BD%8F%E6%89%80(110026)",
"type":"SampleTableModel.住所"},"ID":110026,"郵便番号":"1800004",
"都道府県名":"東京都","市区町村名":"むさしのし", ... 略}

 リスト10は通信内容の抜粋ですが、変更があった2レコードに対してのみ、変更通知がサーバに渡っていることが確認できると思います。

4. 宣言型にする

 前編を通してここまで読み進められてきた方なら、これまで掲載してきたコードのほとんどが静的な定義としてHTML上に記述できるということに気づいていると思います。

 実際リスト7とリスト9のコードはリスト11のように置き換えることができます。

リスト11 宣言的に置き換えたAdoNetDataContextのコード
<!-- 利用するネームスペースの定義 -->
<body xmlns:sys="javascript:Sys"
      xmlns:dataview="javascript:Sys.UI.DataView"
      xmlns:datacontext="javascript:Sys.Data.AdoNetDataContext"
      sys:activate="*">

<form id="form1" runat="server">
<script type="text/javascript">
    // dataContextの定義
    var dataContext = new Sys.Data.AdoNetDataContext();
    dataContext.set_serviceUri("/Sample1/WebDataService.svc")
    dataContext.initialize();

    // 更新ボタンがクリックされたときのイベントハンドラーを登録
    Sys.Application.add_load(function() {
      $get("save").onclick = function(sender, args) {
        dataContext.saveChanges();
      }
    });

    // 検索時のイベントハンドラー
    function search() {
      var t = $find("addressesTemplate")
      t.set_fetchParameters(
        { $filter: String.format("startswith(郵便番号,'{0}')", 
                     $get("addressNo").value) });
      t.fetchData();
    }
</script>
<div>
  <input type="text" id="addressNo" />
  <input type="button" value="検索" onclick="search()" />
  <table id="addressList" cellspacing="0">
  <thead>
      <tr><th>郵便番号</th>
      <th>住所</th></tr>
  </thead>
  <tbody id="addressesTemplate" class="sys-template"
         sys:attach="dataview" 
         dataview:sys-key="addressesTemplate"
         dataview:dataprovider="{{ dataContext }}"
         dataview:autofetch="true"
         dataview:selecteditemclass="selected"
         dataview:initialselectedindex="0">
      <tr sys:command="select"  >
        <td>{{ 郵便番号 }}</td>
        <td><label>{binding 都道府県名}</label>
          <label>{binding 市区町村名}</label></td>
      </tr>
  </tbody>
  </table>
  <input type="button" id="save" value="更新" />

  <table class="sys-template"
         sys:attach="dataview"
         dataview:data="{binding selectedData, source={{ addressesTemplate }}}"
         dataview:sys-key="address-Template">
      <tr><td>郵便番号</td><td>{binding 郵便番号}</td></tr>
      <tr><td>都道府県名</td>
        <td><input type="text" value="{binding 都道府県名}" /></td></tr>
      <tr><td>市区町村名</td>
        <td><input type="text" value="{binding 市区町村名}" /></td></tr>
      <tr><td>町域名</td>
        <td><input type="text" value="{binding 町域名}" /></td></tr>
  </table>
</div>
</form>
</body>

まとめ

 ASP.NET AJAX 4.0の概要を前後編にわたり解説してきました。

 新しいASP.NET AJAXは今までの技術基盤のうえで、WPFやSilverlightのようなバインディングやテンプレートといった機能を取り入れ、より宣言的な記述ができるように進化し、開発ではパワフルに、ネットワークにはやさしくなりました。

 ASP.NETは.NET Framework 3.5のリリースから格段にその幅を広げました、今回紹介したASP.NET AJAX以外にも、.NET Framework 4.0を筆頭にASP.NET MVC、 Silverlight 3.0、 DynamicData、 .NET RIA Servicesといった今までとは少し趣の違う技術が多く登場しこれからも登場します。

 ASP.NETは今までのWebFormでの開発に加え前述のような多くの技術をサポートすることで、選択の幅がある技術へと大きな進化をしている最中なのです。

 このため、新しい技術が出たのでとりあえず学んでみたではなく、今の開発には何が1番フィットするのかを考え、選択できるようになることが重要となります。

 ただ言えることは、ASP.NETはその裾野を広げるためにより接続性が高いオープンな土壌が広がり始めているということです。今までのWebFormでの開発でも問題ありませんが、まずは選択する力を蓄えるためにもいろいろな技術が学べるASP.NET AJAX 4.0とDataServicesの組み合わせは学ぶ価値のある技術だとお勧めできます。

参考資料



  • 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