.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ファイルに実際にアクセスしてみよう。冒頭のような結果が得られれば成功だ。End of Article

カテゴリ:Webフォーム 処理対象:Ajax
使用ライブラリ:AjaxMethod属性(Ajax名前空間)
使用ライブラリ:DataSetクラス(System.Data名前空間)
関連TIPS:[ASP.NET]Ajax.NETでAjaxプログラミングを効率化するには?
 
この記事と関連性の高い別の.NET TIPS
[ASP.NET]Ajax.NETでAjaxプログラミングを効率化するには?
[ASP.NET AJAX]Webサービス・ブリッジ機能により構造化データを受け渡しするには?(基本編)
[ASP.NET]ページから生成されたソース・コードを見るには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間