テンプレートの利用
ASP.NET の以前のバージョンでは、ASP.NET WebServiceと連携してサーバーのビジネスロジックを呼び出すことはできましたが、取得したデータは自前でHTMLを構築して表示する必要がありました。
たとえば、リスト6のような郵便番号から住所の一覧を検索するWebServiceがあったとします。取得したデータをブラウザに表示するためにはどうしたらいいでしょうか。
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
[WebMethod]
public List<SampleTableModel.住所> 住所検索(string 郵便番号)
{
using (var entities = new SampleTableModel.SampleTableEntities())
{
return (from addr in entities.住所
where addr.郵便番号.StartsWith(郵便番号)
select addr).ToList();
}
}
}
ここでは、旧来のASP.NET AJAXによる結果の表示方法と、ASP.NET AJAX 4.0のテンプレートを利用した結果の表示方法を解説します。検索結果はどちらも図5のようになります。
旧来のASP.NET AJAXで結果を表示する方法
ASP.NET AJAXではScriptService属性でマークされたWebServiceはASP.NETが自動的にJavaScriptのプロキシを作成してくれるため、ScriptManagerコントロールでWebServiceを参照すればリスト7のように簡単にWebServiceを呼び出すことができます。
ただし、旧来のASP.NET AJAXでは取得したデータを表示するために、☆部分のようにHTMLを自前で構築する必要がありました。
function searchAddress() {
// WebServiceの呼び出し
WebService.住所検索($get("txtPostAddressNo").value,
function(result, cx, name) {
// ☆ 検索が成功したら、リストを構築するためのHTMLを作成
var html = new Sys.StringBuilder();
if (result.length > 0) {
html.append("</ul>");
for (var index = 0; result.length > index; index++) {
html.append(String.format("<li><a href='{0}'>〒{0} {1}{2}</a></li>",
result[index].郵便番号,
result[index].都道府県名,
result[index].市区町村名));
}
html.append("</ul>");
} else {
html.append("存在しません。");
}
$get("data").innerHTML = html.toString();
}
);
}
この方法でデータを表示する場合、図6の流れで処理が行われます。
問題としては、取得したデータにHTMLの表示上不正なデータが混入した場合に、クロスサイトスクリプティングの脆弱性が発生する危険性があることです。
本来であれば、取得したデータは危険な文字がないかを確認し、もし危険な文字があれば安全な文字に置き換える処理を追加する必要があります。
テンプレートを利用した結果の表示
ASP.NET AJAX 4.0 では、テンプレートを使って描画することで、危険なデータを無効化し、分かりやすく安全にデータを表示することができます。リスト8にテンプレートを利用した際のクライアントコードの全体像を示します。
<head>
<style type="text/css">.sys-template { display:none; }</style>
</head>
<body xmlns:sys="javascript:Sys"
xmlns:dataview="javascript:Sys.UI.DataView"
sys:activate="*">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server">
<Scripts>
<asp:ScriptReference Name="MicrosoftAjaxTemplates.js" />
</Scripts>
<Services>
<asp:ServiceReference Path="WebService.asmx" />
</Services>
</asp:ScriptManager>
<script type="text/javascript">
function searchAddress() {
WebService.住所検索(
$get("txtPostAddressNo").value,
function(result, cx, name) {
// ☆ 取得したデータをDataViewにバインドする。
$find("data").set_data(result);
});
}
</script>
<input type="text" id="txtPostAddressNo" />
<input type="button" value="検索" onclick="searchAddress()" />
<ul id="data" class="sys-template" sys:attach="dataview">
<li><a sys:href="{{ String.format('detail.aspx?addr={0}', 郵便番号) }}">
{{ String.format("〒{0} {1}{2}", 郵便番号, 都道府県名,市区町村名 )}}
</a></li>
</ul>
</form>
</body>
ここでは、ulタグにsys:attachプロパティを使ってDataViewコントロールを関連付けています。その後ボタンクリックのタイミングでWebServiceから取得したJSON形式の配列データを、DataViewコントロールのDataプロパティに設定し、テンプレートで定義された項目にバインドします。
DataViewコントロールに関連付けるulタグは、ページロード時にはリストを表示させたくないため、display:noneと定義したスタイルシートを設定して非表示にしています。
取得したデータを表示する☆印の部分がリスト6とは違い、フレームワークが提供するDataViewコントロールにバインドするように変更されていることがわかると思います。DataViewコントロールはテンプレート内のデータを処理する際に、HTMLエンコードを行いデータの表示を行うため、安全にデータを表示することができます。
ASP.NET AJAXのテンプレートを利用した処理の流れを図7に示します。
図7では図2に比べ、必要なデータのみを送受信することで通信がシンプルになり、図6に比べテンプレートを利用していることで安全に、直感的にデータの表示が行われるようになったのが確認できると思います。
MicrosoftのAJAX技術というと、対応ブラウザはインターネットエクスプローラーだけでなのでは？と思うかもしれませんが、ASP.NET AJAXでは次の主要4ブラウザのサポートがMSDNに明記されています。
- Microsoft Internet Explorer 6.0 以降
- Mozilla Firefox Version 1.5 以降
- Opera Version 9.0 以降
- Apple Safari Version 2.0 以降
Google Chromeの登場で多少変動がありましたが、上記4ブラウザに対応することで、現在インターネットで使用されているの96%以上のブラウザに対応していることになります。
まとめ
ASP.NET AJAX 4.0概要の前編である今回は、今までのASP.NET AJAXの振り返りとバインディング、テンプレートについて簡単に触れました。
後編では、バインディングとテンプレートをもう少し掘り下げながらコントロールの詳しい使い方や、ADO.NET DataServiceとの連携といった部分の解説を行います。
