|
.NET TIPS
[ASP.NET]Ajax.NETでデータセットやコレクションを操作するには?
WINGSプロジェクト 土井 毅(監修:山田 祥寛)
2005/11/25 |
 |
|
「TIPS:[ASP.NET]Ajax.NETでAjaxプログラミングを効率化するには?」では、Ajax.NETの利用方法について概略を説明した。
本稿では、Ajax.NETで提供される型変換メカニズムを利用し、データセット(DataSetオブジェクト)やコレクションをサーバ/クライアント間でやりとりする方法について紹介する。サンプルは、前掲のTIPSでも扱った郵便番号検索アプリケーションを前方一致検索に対応したものである。
 |
 |
 |
Ajax.NETを利用した郵便番号による住所のあいまい検索アプリケーション |
上の画面の左にあるテキストボックスに郵便番号を入力すると、下の画面のように、指定された郵便番号で対応する住所を前方一致検索し、先頭15件を下に一覧表示する。 |
サンプルの動作に必要なデータベースの準備、Ajax.NETのDLLのコピー、Web.configの設定などは、前掲のTIPSを参照いただきたい。
それではさっそく、具体的な手順を見ていこう。
1. サーバ側ロジックを準備する
以下のような内容のサーバ側ロジックを実装したファイル(PostNumberSearchTop15.csもしくはPostNumberSearchTop15.vb)を作成する。
using System;
using System.Data;
using System.Data.SqlClient;
namespace Ajax.NET {
public class PostNumberSearchTop15 {
[Ajax.AjaxMethod]
public DataSet SearchTop15(string postnum) {
SqlConnection db = new SqlConnection("Data Source=(local);integrated security=SSPI;Persist Security Info=True;Initial Catalog=dotnet");
try {
// クエリ情報「postnum」の値をキーに
// addressテーブルから住所情報を前方一致検索で15件取得
SqlCommand comm = new SqlCommand("SELECT TOP 15 postnum,prefecture,city,other FROM address WHERE postnum LIKE @postnum ORDER BY postnum", db);
comm.Parameters.Add("@postnum", postnum + "%");
SqlDataAdapter da = new SqlDataAdapter(comm);
DataSet ds = new DataSet();
da.Fill(ds);
return ds; // DataSetオブジェクトを返す
} finally {
db.Close();
}
}
}
}
|
|
サーバ側ロジックのサンプル・プログラム(C#版:PostNumberSearchTop15.cs) |
Imports System
Imports System.Data
Imports System.Data.SqlClient
Imports Ajax
Namespace Ajax.NET
Public Class PostNumberSearchTop15
<AjaxMethodAttribute()> _
Public Function SearchTop15(ByVal postnum As String) As DataSet
Dim db = New SqlConnection("Data Source=(local);integrated security=SSPI;Persist Security Info=True;Initial Catalog=dotnet")
Try
' クエリ情報「postnum」の値をキーに
' addressテーブルから住所情報を前方一致検索で15件 取得
Dim comm = New SqlCommand("SELECT TOP 15 postnum,prefecture,city,other FROM address WHERE postnum like @postnum order by postnum", db)
comm.Parameters.Add("@postnum", postnum + "%")
Dim da = New SqlDataAdapter(comm)
Dim ds = New DataSet
da.Fill(ds)
Return ds ' DataSetオブジェクトを返す
Finally
db.Close()
End Try
End Function
End Class
End Namespace
|
|
サーバ側ロジックのサンプル・プログラム(VB.NET版:PostNumberSearchTop15.vb) |
Ajax.AjaxMethod属性が付加されたSearchTop15メソッドは、パラメータpostnumに文字列として渡された郵便番号(の一部)により前方一致検索を行い、先頭15件を取得してDataSetオブジェクトに格納し、それを返す。
このファイルは、使用に先立ってコマンド・プロンプトなどからコンパイルを行う必要がある。コマンドラインでコンパイルする場合の構文の例は以下のとおり。
csc /r:bin\ajax.dll /t:library /out:bin\ajax.NET.dll PostNumberSearchTop15.cs |
vbc /r:bin\ajax.dll /r:System.dll /r:System.Data.dll /t:library /out:bin\ajax.NET.dll PostNumberSearchTop15.vb |
|
コマンドラインによるコンパイル方法(上:C#、下:VB.NET) |
2. Webフォームを作成する
次に、いま作成したサーバ側ロジックを呼び出すためのWebフォームを作成する。
<%@ Page language="c#"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head><title>ajaxによる郵便番号検索</title></head>
<body>
<h1>郵便番号による住所検索</h1>
<form runat="server" ID="Form1">
<script language="JavaScript">
<!--
// テキストボックス「postnum」の内容が変更されたタイミングで実行
function searchTop15() {
PostNumberSearchTop15.SearchTop15(
document.getElementById("postnum").value,
searchTop15_callback);
}
// コールバック関数
function searchTop15_callback(response) {
var ds = response.value; // DataSetオブジェクトを取得
if (ds != null && typeof(ds) == "object"
&& ds.Tables != null) { // NULLチェック
var s = "<ol type='square'>"; // 表示用文字列
for (var i = 0; i < ds.Tables[0].Rows.length; i++) { // 行数分ループ
// 県名・市町村名・番地を連結して<li>要素として代入
s += "<li>" + ds.Tables[0].Rows[i].prefecture +
ds.Tables[0].Rows[i].city +
ds.Tables[0].Rows[i].other + "</li>";
}
s += "</ol>";
// 表示用DIV要素に代入
document.getElementById("result").innerHTML = s;
} else {
alert("Error. [3001] " + response.request.responseText);
}
}
-->
</script>
郵便番号: <input type="text" name="postnum" size="10" maxlength="8" onchange="searchTop15()">
<br/>
<div id="result"/>
</form>
</body>
</html>
<script runat="server">
void Page_Load(object sender, System.EventArgs e){
Ajax.Utility.RegisterTypeForAjax(
typeof(Ajax.NET.PostNumberSearchTop15));
}
</script>
|
|
Webフォームのサンプル・プログラム(C#版:postnumTop15_ajax_net_cs.aspx) |
<%@ Page language="vb"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head><title>ajaxによる郵便番号検索</title></head>
<body>
<h1>郵便番号による住所検索</h1>
<form runat="server" ID="Form1">
<script language="JavaScript">
<!--
// テキストボックス「postnum」の内容が変更されたタイミングで実行
function searchTop15() {
PostNumberSearchTop15.SearchTop15(
document.getElementById("postnum").value,
searchTop15_callback);
}
// コールバック関数
function searchTop15_callback(response) {
var ds = response.value; // DataSetオブジェクトを取得
if (ds != null && typeof(ds) == "object"
&& ds.Tables != null) { // NULLチェック
var s = "<ol type='square'>"; // 表示用文字列
for (var i = 0; i < ds.Tables[0].Rows.length; i++) { // 行数分ループ
// 県名・市町村名・番地を連結して<li>要素として代入
s += "<li>" + ds.Tables[0].Rows[i].prefecture +
ds.Tables[0].Rows[i].city +
ds.Tables[0].Rows[i].other + "</li>";
}
s += "</ol>";
// 表示用DIV要素に代入
document.getElementById("result").innerHTML = s;
} else {
alert("Error. [3001] " + response.request.responseText);
}
}
-->
</script>
郵便番号: <input type="text" name="postnum" size="10" maxlength="8" onchange="searchTop15()">
<br/>
<div id="result"/>
</form>
</body>
</html>
<script runat="server">
Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Ajax.Utility.RegisterTypeForAjax( _
GetType(Ajax.NET.PostNumberSearchTop15))
End Sub
</script>
|
|
Webフォームのサンプル・プログラム(VB.NET版:postnumTop15_ajax_net_vb.aspx) |
コールバック関数searchTop15_callbackでは、DataSetオブジェクトの内容を取り出し、HTMLの<li>要素に分解してテキストボックス下の<div>要素に表示している。
JavaScriptからDataSetオブジェクトへアクセスするコードは、通常のサーバ・サイドの.NET言語とほぼ同じである。例えばDataSetオブジェクトの中に含まれている最初のDataTableオブジェクトの行数へアクセスするにはds.Tables[0].Rows.lengthを呼び出せばよいし、県名へアクセスするにはds.Tables[0].Rows[0].prefectureとすればよい。Ajax.NETがADO.NETのデータセットをJavaScriptから扱えるように変換することでこのようなシームレスな記述が可能となっている。
ここではDataSetクラス(System.Data名前空間)を使用したが、それ以外にも、以下のような型についてはAjax.NETによって自動的な変換が行われ、そのプロパティをJavaScriptからそのまま扱うことができる(内部の値にアクセスするためのプロパティのみに対応している)。例えばサーバ・サイドから文字列配列を返せば、そのlengthプロパティで配列長を取得することができる。
変換されるデータ型 |
プロパティ・アクセスの例(説明) |
System.Array(.NET言語の配列) |
array.length(配列サイズへのアクセス) |
System.Collections.ArrayList |
arrayList[2](2番目の要素へのアクセス) |
System.Data.DataTable |
dataTable.Rows[0](1行目のDataRowへのアクセス) |
System.Data.DataRow |
dataRow["name"](nameフィールドへのアクセス) |
System.DateTime |
dateTime.Day(日付フィールドへのアクセス) |
System.TimeSpan |
timeSpan.Seconds(秒単位での時間差値へのアクセス) |
 |
Ajax.NETで型変換がサポートされるデータ型とプロパティ・アクセスの例 |
以上を理解したら、それぞれ.aspxファイルに実際にアクセスしてみよう。冒頭のような結果が得られれば成功だ。
|
generated by
|
|
Insider.NET 記事ランキング
本日
月間