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のようなものになります。
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になります。
// データを供給するdataContextの定義
Sys.Application.add_load(function() {
... 略 ...
$get("save").onclick = function(sender, args) {
dataContext.saveChanges();
}
});
ボタンがクリックされた場合は、dataContextのsaveChangesメソッドを呼び出してサーバ側にデータの変更を通知しています。
このときサーバ側に通知されるのは、変更があったレコードのみです。例えば図7のように郵便番号が180000の都道府県名と180004の市区町村名をそれぞれひらがなに変更して、変更ボタンをクリックした場合リスト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のように置き換えることができます。
<!-- 利用するネームスペースの定義 -->
<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の組み合わせは学ぶ価値のある技術だとお勧めできます。
