マイクロソフトのAjax対応フレームワーク「Atlas」入門

bgx5810 · 发表于 2007-5-25 10:27:25

What is Atlas Framework?

ASP.NET AJAXによるアプリ開発の準備（インストールと環境設定）

ASP.NET AJAXで基本的なアプリケーションを作成しよう（前編）

ASP.NET AJAXで基本的なアプリケーションを作成しよう（後編）

ASP.NET AJAXでYahoo! ウェブ検索Webサービスを利用してみよう

ASP.NET AJAXのサーバー・コントロールを使い倒せ！（UpdatePanel編）

ASP.NET AJAXのサーバーコントロールを使い倒せ！（Timer/UpdateProgress編）

便利なAjax対応コントロール集 ASP.NET AJAX Control Toolkit

CascadingDropDownコントロールで階層式メニューを作成しよう

[ 本帖最后由 bgx5810 于 2007-5-25 10:49 编辑 ]

bgx5810 · 发表于 2007-5-25 10:30:04

What is Atlas Framework?

皆さんもよくご存じのAjax（Asynchronous JavaScript And Xml）は，2005年2月にAdaptive Path社のJesse James Garrett氏が自身のコラム「Ajax: A New Approach to Web Applications」上で著したものが注目を浴び，急速に認知されるようになったキーワードです。　当時のあまりな過熱ぶりに，筆者などは「所詮はただのBuzzwordだろう」と思っていたものですが，その後1年半を経て，Ajaxは着実に普及と浸透を強めています。昨今では，サーバーサイドJava，PHP，ASP.NETなど主要なサーバーサイドなど主要なサーバーサイド開発環境の世界でもAjaxに対応したフレームワークやライブラリが登場しつつあり，Ajaxも単なる「流行もの」から現実的な使い方が模索される時期へと移ろいつつあるように思えます。
　さて，本連載で扱う「Atlas Framework」は2006年末に，マイクロソフトが無償提供を開始するAjax対応フレームワークです（カコミ記事「Atlas Frameworkの正式名称」も参照）。マイクロソフトのサーバーサイド処理環境である，ASP.NET 2.0環境で動作します。ASP.NET 2.0＋AtlasFrameworkの組み合わせでどのようなことができるのか，どのような点が便利になるのかに力点を置いて紹介を進めていきたいと思います。Ajaxそのものに関する技術解説は，別連載「今からでも遅くない Ajax基本のキ」で紹介していますので，こちらも合わせて参照してください。

フレームワークが解決する問題点　Atlas Frameworkについて概説する前に，まずはフレームワークを利用しないでAjaxアプリケーションを実装する場合の問題点をおさらいしておくことにしましょう。　前掲の連載「今からでも遅くないAjax基本のキ」でも詳説しているように，Ajax技術とはJavaScript（XMLHttpRequestオブジェクト）にDHTML，XMLと，昨今のブラウザなら標準で提供している機能の組み合わせにすぎません。Ajaxアプリケーションを開発するために，特別なプラグインやライブラリ，開発環境などを一切導入する必要がないという点は，Ajax技術の大きな強みです。しかし，標準的な機能のみでのプログラミングには，開発生産性/保守性の観点でいくつかの課題があります。
（1）クロスブラウザ問題
　クロスブラウザ問題とは，ブラウザ間の仕様差によって発生する挙動の違いのことを言います。例えば，Internet Explorerとそれ以外のブラウザにおけるXMLHttpRequestオブジェクトの違いなどは，クロスブラウザ問題の典型的な例です。
　Ajax技術を構成する中核の要素がクライアントサイド・スクリプトである以上，アプリケーション開発者は，常にこのクロスブラウザ問題を意識してコーディングする必要があります。クロスブラウザ問題への対策は，ときとしてトリッキーなコーディングを要する場合もあり，アプリケーションの開発生産性を低下する一因となります。
（2）DOMによるコードは冗長になりやすい
　クライアント－サーバー間で構造データをやり取りしたい場合によく利用するのがXML（eXtensible Markup Language），そのXMLで書かれた文書を処理するためのAPIがDOM（Document Object Model）です＊1。なるほど，DOMはXML文書処理のための強力なAPIですが，ちょっとした処理を記述するにも回りくどく，冗長になりやすいという難点があります。当然，冗長化したコードはわかりにくく，思わぬエラーを混在させる一因にもなりますし，ちょっとした変更にも対応にしくくなります。
　そこで登場するのが，Ajax対応ライブラリ（フレームワーク）です。Ajax対応ライブラリとは，その名の通り，Ajaxプログラミングを効率化するための機能を備えたクラスライブラリやフレームワークのこと。すでに様々なライブラリが公開されています。一概に言うことはできませんが，その多くが上で挙げたようなクロスブラウザ問題やデータ交換の手間を省くための機能を提供しており，アプリケーションの開発生産性/保守性を向上できます＊2。
　本連載の主テーマであるAtlas Frameworkもまた，（冒頭述べたように）ASP.NET 2.0環境で動作するAjax対応フレームワークです＊3。Atlas Frameworkを利用することで，クライアント環境に依存しないAjaxアプリケーションの構築が容易になります。

JavaScriptを記述せずにAjaxを実現することも可能　Atlas Frameworkのモジュール構成について，より詳細を見てみましょう。AtlasFrameworkは大きくクライアント・フレームワーク/サーバー・フレームワークに分類することができます。以下に，AtlasFrameworkの構成を示します（図1）。図1：Atlas Frameworkの構成

　図1を見てもわかるように，クライアントフレームワークは，さらに「ブラウザ互換層」「スクリプトコア」「クラスライブラリ」に分類できます。
　ブラウザ互換層とは，その名の通り，ブラウザごとの実装の違いを吸収するための仕組みを提供するものです。スクリプトコアは，JavaScriptの型システムを管理します。具体的には，名前空間や継承，インタフェースなどの仕組みを提供するレイヤで，これによってJavaScriptで .NETFrameworkライクなコーディングが可能になります。クラスライブラリは，DebugやTraceのような .NETFrameworkクラスライブラリによく似た基本クラス（機能）を提供します。TextBoxやButton，HyperLinkなど，クライアントサイド・スクリプトから操作可能なコントロール部品が含まれるのも，このレイヤです。
　一方，サーバー・フレームワークは，ASP.NET2.0をベースとしたサーバー拡張から構成され，ブリッジ機能と拡張サーバーコントロールとに分類されます。ブリッジは，Webサービスやメンバーシップ・フレームワーク，プロファイル機能など，ASP.NET2.0が標準で提供するサービスとクライアントサイド・スクリプトとがやり取りするための橋渡しを担うものです。
　サーバーコントロールには，ページ内のコンテンツを部分的に更新するUpdatePanelコントロールやクライアントとサーバー間の通信状態を表示するUpdateProgressコントロール，一定時間置きに通信を発生するTimerコントロールなどなど，Ajax機能に対応した拡張コントロールを含みます。これら拡張コントロールを利用することで，定型的なAjax機能を実装するだけならば，JavaScriptを一切記述することなく実現できます。
　以上，今回はここまでです。次回からは，実際にAtlas Frameworkを使ったAjax対応アプリケーション開発の具体的な手順を見ていきましょう。

【カコミ記事】Atlas Frameworkの正式名称　これまで開発コードでマイクロソフトが「Atlas」と呼んできたAtlas Frameworkですが，先日，正式版1.0のリリース時期が発表されたのに伴い（関連記事「Microsoft，Ajaxフレームワーク「Atlas」の正式版を2006年末リリース」），正式名称が決定しました。従来，Atlas Frameworkと総称されていた機能は，それぞれ機能別に細分化されて，以下のように命名されています。Atlas Frameworkの正式名称[tr]従来正式版[/tr]

Atlas Framework（クライアント）	Microsoft AJAX Library
Atlas Framework（サーバーサイド）	ASP.NET 2.0 AJAX Extensions
Atlas Control Toolkit＊A	ASP.NET AJAX Control Toolkit

＊A Atlas Control Kitは，Atlas Frameworkをベースに構築されたサーバーコントロール集です。Atlas Control Kitの詳細については，本連載後半で紹介する予定です。
　ただし，本連載ではこれらのモジュールを総称する呼び名として，従来の開発コードである「Atlas」（またはAtlas Framework）を使用するものとします。

【注】本記事は執筆時点（10月上旬）時点の情報に基づいています。10月20日に公開された最新βリリースについては，連載の第2回以降で紹介していきます。
＊1 Ajax（Asynchronous JavaScript And「Xml」）だからといって，XMLの利用は必須ではありません。昨今ではYAML（YAML Ain't MarkupLanguage）やJSON（JavaScript ObjectNotation）のようなフォーマットも用意されており，これらのフォーマットを利用することで，コードをシンプルに記述できる場合があります。＊2 Atlas Frameworkのほかにも，様々なAjax対応ライブラリが公開されています。主なライブラリについては，別稿「Ajax対応ライブラリを利用しよう」でも紹介していますので，興味のある方は合わせて参照してください。
＊3 厳密には，Atlas Frameworkは必ずしもASP.NET上でしか利用できないわけではありません。AtlasFramework上で提供されているクライアントサイド・スクリプト（「.js」ファイル）だけを切り出すことで，ASP.NET以外の環境――例えば，PHPやサーバーサイドJavaのような環境でAtlasFrameworkのクライアントサイド機能を利用することも可能です。ASP.NET以外の環境で利用するには，AtlasFrameworkのインストール・フォルダ配下に含まれる「/ScriptLibrary/Release」フォルダの中身をアプリケーションに配置するだけです。

[ 本帖最后由 bgx5810 于 2007-5-25 10:33 编辑 ]

bgx5810 · 发表于 2007-5-25 10:37:42

ASP.NET AJAXによるアプリ開発の準備（インストールと環境設定）

去る10月20日，いよいよASP.NET AJAX（開発コード名は「Atlas」）のVer1.0 β1版がリリースとなりました。ダウンロード可能なパッケージは，以下の通りです（表1）。表1：ASP.NET AJAXで提供されるパッケージパッケージ名概要Microsoft ASP.NET AJAX v1.0 BetaASP.NET AJAX Ver1.0の完全パッケージMicrosoft ASP.NET AJAX CTP BetaASP.NET AJAX Ver1.0には含まれなかった開発中の機能（将来的にコアモジュールに含まれる予定）ASP.NET AJAX Control ToolkitASP.NET AJAXをベースに構築されたサーバーコントロール集Sample ApplicationsASP.NET AJAXをベースとしたサンプルアプリケーションMicrosoft AJAX Library Beta ASP.NET AJAXのクライアントフレームワーク部分（ASP.NET以外の環境で利用する場合に使用）　β1版のリリースに伴い，本連載でも以降ではβ1環境を前提に紹介を行っていく予定です。また，AtlasFrameworkの呼称も，第2回以降では「ASP.NETAJAX」で統一することにします。さて，それでは前置きはこのくらいにして，本題に行ってみましょう。
　今回からは，具体的なサンプルアプリケーションの実装を通じて，ASP.NET AJAXによる開発を体感してみることにしましょう。今回は開発の準備として，ASP.NET AJAXのインストールと環境設定の手順について紹介します。
　連載第1回でも紹介したように，ASP.NET AJAXはASP.NET 2.0上で動作するフレームワークです＊1。本連載で紹介するサンプルを動作するにあたっては，あらかじめ「.NET Framework 2.0」「SQL Server 2005ExpressEdition」をインストールしておく必要があります。これらソフトウエアは，個別にインストールしても（もちろん）構いませんが，統合開発環境であるVisual Studio 2005（無償で提供されているVisual Web Developer 2005 ExpressEditionでも可）をインストールすることで，まとめて導入することが可能です。Visual Studio2005自体のインストール手順については，本稿では省略します。詳細には著者のサポートサイト「サーバサイド技術の学び舎 - WINGS」－「サーバサイド環境構築設定」などを参照してください。

ASP.NET AJAXのインストール＆環境設定　ASP.NET AJAXのセットアップ・ファイルは，「ASP.NET AJAX」サイトからダウンロードすることが可能です。冒頭述べたように，本連載では執筆時点での最新バージョンであるVer 1.0 β1版を使用します＊2。　ダウンロードしたASPAJAXExtSetup.msiをダブルクリックするとインストーラが起動しますので，指示に従って次に進めてください。途中，何カ所かオプションの選択を求められる個所がありますが，デフォルトのままで問題ないでしょう。インストールが成功すると＊3，「C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAXExtensions\v＜バージョン番号＞」フォルダにASP.NET AJAXの動作に必要な一連のファイルが作成され，VisualStudio 2005のテンプレートにはASP.NET AJAX対応アプリケーションを作成するための「ASP.NET AJAX-EnabledWeb Site」が追加されるはずです。
　ASP.NET AJAX対応のアプリケーションを作成するには，Visual Studio 2005のメニューバーから［ファイル］－［新規作成］－［Webサイト...］を選択してください。
図1：［新しいWebサイト］ダイアログ（クリックで拡大表示）

［新しいWebサイト］ダイアログ（図1）が表示されますので，テンプレート欄から「ASP.NET AJAX-Enabled Web Site」を選択し，サイトの保存場所を指定したうえで［OK］ボタンをクリックします。アプリケーションの骨格が自動作成され，ソリューションエクスプローラからは，図2のようにアプリケーション作成に必要なファイルが配置されているのが確認できるはずです＊4。
図2：「ASP.NET AJAX-Enabled Web Site」テンプレートによるデフォルトの構成

　一見，通常のASP.NETアプリケーションと同様のファイル構成にも見えますが，アプリケーション構成ファイル（Web.config）を確認すると，ASP.NET AJAXをアプリケーション上で利用するための構成要素が追加されていることが確認できるはずです。
　やや長いですが，以下に「ASP.NET AJAX-Enabled Web Site」テンプレートにおけるWeb.configのデフォルトの構成を示します（リスト1。ただし，見やすいように適宜改行を追加し，不要なコメントは省略しています）。
リスト1：Web.configのデフォルトの構成（こちらをクリックすると別ウィンドウで開きます）
　すでに作成済みのWebサイトに対してASP.NETAJAXを組み込みたいという場合には，アプリケーション構成ファイルに対してリスト1の構成を追加してください。Web.configのスケルトンは，ASP.NET AJAXのインストールフォルダ（「C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0AJAX Extensions\v＜バージョン番号＞」）にコピーされています。
　以上で，ASP.NET AJAXをVisual Studio2005で作成するための準備は完了です。利用する機能に応じて，「Microsoft ASP.NET AJAX CTPBeta」や「ASP.NET AJAX ControlToolkit」もインストールする必要がありますが，本稿ではまず最低限必要な「Microsoft ASP.NET AJAX v1.0Beta」のみで説明していくことにします。ASP.NET AJAX ControlToolkitについては，本連載後半で改めて解説する予定です。
　次回からはいよいよASP.NET AJAXを使用して，簡単なAjax対応アプリケーションを構築してみることにします。

　本連載はASP.NET AJAX β1リリース（2006年10月20日時点）の情報を基に執筆しています。今後のβ2，Release Candidate版，正式版などでは仕様が変更される可能性がありますのでご注意ください。

＊1 厳密にはクライアントサイド・フレームワーク（Microsoft AJAX Library）だけを切り出すことで，非ASP.NET環境（例えばPHPやサーバーサイドJavaなど）の環境でもASP.NET AJAXの機能を利用することが可能です。＊2 古いAtlas FrameworkのCTP（Community Technology Preview）版などがインストールされている場合には，β1版のインストールに先立ってアンインストールしておく必要があります。
＊3 Microsoft ASP.NET AJAX CTP BetaやASP.NET AJAX ControlToolkitをインストールする場合には，必ずMicrosoft ASP.NET AJAX v1.0Betaをあらかじめインストールしておく必要があります。
＊4 Atlas Framework CTPJuly版までは「Microsoft.Web.Atlas.dll」がアプリケーションルート配下のBinフォルダに配置されていました。しかし，β1からはGAC（Global AssemblyCache）に登録されますので，個別のアプリケーションに配置する必要はありません（また，β1版ではファイル名も「Microsoft.Web.Extensions.dll」に変更になっています）。

bgx5810 · 发表于 2007-5-25 10:38:38

ASP.NET AJAXで基本的なアプリケーションを作成しよう（前編）

前回まででASP.NETアプリケーションからASP.NET AJAXを利用するための準備は整いました。そこで今回と次回は，インストールの成否を確認するという意味も兼ねて，初歩的なAjaxアプリケーションを作成してみることにしましょう。　紹介するのは，ごくシンプルな検索アプリケーションです。テキストボックスにISBNコード（書籍を一意に特定するコード）を入力すると，対応する書籍名を表示します（図1）。別稿「基本的なAjaxアプリケーションを作成してみよう（前編）」でも紹介しているサンプルのASP.NET AJAX対応版です。こちらとも比較しながら見ていくことでより理解が深まるはずです。
図1：ISBNコードを入力して［検索］ボタンをクリックすると（a），対応する書名を表示する（b）
（a）

（b）

　それではさっそく構築の手順を追っていきます。

サーバーサイドの処理を実装する　ASP.NET AJAXにおいてサーバーサイドでの機能を提供するのは「.asmx」ファイル（XMLWebサービスクラス）の役割です。ソリューションエクスプローラから新規の「.asmx」ファイルを作成すると，Webサービスクラスの骨組みが自動生成されますので，リスト1の要領でコードを追記してください（追記部分は太字）。なお，「.asmx」ファイルの名前はなんでも構いませんが，ここではBookSearch.asmxとしておきます。リスト1：サーバーサイドの処理を実装するWebサービスクラス（BookSearch.asmx）
<%@ WebService Language="VB" Class="BookSearch" %>  …（1）

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports Microsoft.Web.Script.Services

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ScriptService()> _  ･･･（2）
Public Class BookSearch
  Inherits System.Web.Services.WebService  …（3）

' 入力されたISBNコード（isbn）をキーに対応する書名（result）を取得。
' 通常のアプリケーションでは，ここでデータベースへの検索処理などを行う

  <WebMethod()> _  …（4）
  Public Function GetTitleByIsbn(ByVal isbn As String) As String
Dim result As String
Select Case isbn
   Case "4-7981-1070-1"
      result =
      "XMLデータベース入門 NeoCore/XprioriでXMLDBを極める！"
   Case "4-88337-491-2"
      result =
      "書き込み式 SQLのドリルドンドン身に付く，スラスラ書ける"
   Case "4-7980-1270-X"
      result = "Pocket詳解PHP辞典"
   Case Else
      result = "不明"
End Select
Return result
  End Function
End Class

　Webサービスクラスとは言っても，ごく普通のクラスとほとんど同じ要領で記述できることがおわかりになるはずです。ASP.NETAJAXからWebサービスクラスにアクセスする際のルールとしておさえておきたいのは，以下の4点です（番号はリスト中の赤字に対応）。
（1）@WebServiceディレクティヴを指定する（Class属性は必須）
（2）WebサービスクラスにはScriptService属性を付与する
（3）WebサービスクラスはWebServiceクラスを継承する（任意）
（4）WebサービスメソッドにはWebMethod属性を付与する
　ただし，上記宣言のほとんどはVisualStudioが「.asmx」ファイルを新規作成する際に自動生成してくれるものですので，アプリケーション開発者がことさらに意識する必要があるのは（2）と（4）のみです。WebMethod属性は公開するすべてのメソッドに付与する必要があります。以下にWebMethod属性の一般的な構文を示します。
<WebMethod([プロパティ名:=値 [,...]])>
　WebMethod属性で利用可能なプロパティは，以下の通りです（表1）。すべてのプロパティは任意ですので，特に設定がいらないという場合には，シンプルに「<WebMethod()>」と記述すればOKです。
表1：WebMethod属性の主なプロパティプロパティ概要デフォルト値BufferResponseバッファ処理を有効にするかTrueCacheDurationキャッシュの有効期限（秒）0Descriptionメソッドの説明－EnableSessionセッション機能を有効にするかFalseMessageName外部への公開名（メソッド名）TransactionOptionメソッドのトランザクションサポート Disabled（無効）

XML Webサービスの動作をテストページから確認する　以上を理解したら，XML Webサービスが正しく動作しているかどうかを確認してみることにしましょう。ソリューションエクスプローラ上，BookSearch.asmxを選択した状態で，ツールバーから［デバッグ開始］ボタンをクリックすると，図2のようなテストページが表示されるはずです。図2：BookSearch.asmxのテストページ（クリックで拡大表示）

　BookSearchクラス上，Webサービスとして公開されているメソッドの一覧が表示されますので，ここではGetTitleByIsbnメソッドをクリックしてみましょう。すると，以下のようにGetTitleByIsbnメソッドを動作確認するための画面が表示されます（図3）。
図3：GetTitleByIsbnメソッドの確認画面（クリックで拡大表示）

　ここではisbn欄に「4-7981-1070-1」と入力したうえで，［起動］ボタンをクリックします。新規ウィンドウが開き，以下のようにメソッドの戻り値とそのデータ型などの情報がXML形式で表示されれば成功です。
<?xml version="1.0" encoding="utf-8" ?>
<string xmlns="http://temputi.org/">
XMLデータベース入門 NeoCore/XprioriでXMLDBを極める！
</string>
　このように，ASP.NETではXMLWebサービスを単体で確認するための機能を標準で提供しています。サーバーサイドの機能を実装した場合には，いきなりクライアントページからアクセスするのではなく，まずテストページを使って確認することで，エラー発生時にも問題の個所を特定しやすくなります。

☆　　　　☆　　　　☆

　以上，今回は書籍検索アプリケーションのサーバーサイド機能を実装する方法について紹介しました。次回は，今回実装したWebサービスメソッドを，クライアント・ページから呼び出す方法について紹介します。
　本連載はASP.NET AJAX β2リリース（2006年11月06日時点）の情報を基に執筆しています。今後のRelease Candidate版，正式版などでは仕様が変更される可能性がありますのでご注意ください。

[ 本帖最后由 bgx5810 于 2007-5-25 10:43 编辑 ]

bgx5810 · 发表于 2007-5-25 10:39:35

ASP.NET AJAXで基本的なアプリケーションを作成しよう（後編）

さる11月6日，ASP.NET AJAXβ2版がリリースされました。これに伴い，本連載でも以降の回ではβ2環境を前提に紹介していく予定です。β2での変更点はいくつかありますが，ここでは一点だけ。従来のβ1版ですでにアプリケーションを構築している方は必ずアプリケーション構成ファイル「Web.config」＊1をβ2版のものに置き換える必要がある，という点に注意してください。さもないと，ASP.NET AJAXを利用したページの実行時に「'Sys'が定義されていません」というJavaScriptの実行時エラーが発生します。　さて，それでは前置きはこのくらいにして，本題に行ってみましょう。
　前回は書籍検索アプリケーションのサーバーサイド機能を実装する方法について紹介しました。今回は引き続き，サーバーサイドで用意された機能（メソッド）をクライアントサイドから呼び出し，ブラウザ上に結果を表示してみることにしましょう。

クライアントページのレイアウトを定義する　それではさっそく，具体的な手順を見ていきます。ソリューションエクスプローラから新規のBookSearch.aspxを作成し，図1のようにコントロールの配置とテキストの入力を行ってください。ScriptManagerコントロールはツールボックスの［AJAX Extensions］タブに，その他のコントロールは［HTML］タブに，それぞれ含まれています＊2。図1：BookSearch.aspxのフォーム・レイアウト

　また，それぞれのコントロールに対して，表1の要領でプロパティを設定しておきます。
表1：BookSearch.aspxのプロパティ設定コントロールプロパティ設定値ScriptManager(ID)managerServices下記詳細Input（Text）(Id)txtIsbnInput（Button）(Id)btnSearchValue検索Div(Id)ltrResultStyle△（ブランク）
　ScriptManagerコントロールは，その名の通り，ページ上のクライアントサイドスクリプトを管理するためのコントロールで，ASP.NETAJAXの動作に必要なライブラリの出力/生成などの役割を担います。ASP.NETAJAXを利用する場合，ScriptManagerコントロールは必ずページ先頭に一つだけ配置する必要があります＊3。
　クライアントサイドスクリプトからサーバーメソッド（XMLWebサービスメソッド）にアクセスする場合には，ScriptManagerコントロールに対してアクセス先のサービスを登録しておく必要があります。サービスを登録するには，プロパティウィンドウのServicesプロパティ右端から［...］ボタンをクリックします。
図2：［ServiceReferenceコレクションエディタ］ダイアログ（クリックすると拡大表示します）

［ServiceReferenceコレクションエディタ］ダイアログが開きますので，左下の［追加］ボタンをクリックし，図2の要領で前回作成したBookSearch.asmxを登録しておきます。
　これでサーバーサイド機能にアクセスするための準備が整いました。ここで参考までにVisual Studio 2005で自動生成されたコードを引用しておきます（リスト1）。
リスト1：BookSearch.aspx
<form id="form1" runat="server">
<div>
  <asp:ScriptManager ID="manager" runat="server">
<Services>
   <asp:ServiceReference Path="~/BookSearch.asmx" />
</Services>
  </asp:ScriptManager> ＊4
  ISBNコード：<input id="txtIsbn" type="text" />
  <input id="btnSearch" type="button" value="検索" /><br />
  <div id="ltrResult"></div>
</div>
</form>

クライアントサイドスクリプトを実装する　次に，［検索］ボタンがクリックされたタイミングで実行されるクライアントサイドのコードを記述します。フォームデザイナ上に配置したボタンをダブルクリックすると，コードエディタが開きます。コードエディタには，デフォルトで最低限のコードが自動生成されています。リスト2のように，コードを入力してみましょう（追記部分は太字）。リスト2：BookSearch.aspx
<script language="javascript" type="text/javascript">

</script>

　［検索］ボタンをクリックしたタイミングで呼び出されるbtnSearch_onclick関数に注目してみましょう。BookSearchは，ASP.NET AJAXによって動的に生成されたプロキシクラスです。プロキシクラス（Proxy Class）とは，その名の通り，同名のXMLWebサービスクラスへのアクセスを代理（Proxy）で行うクラスです＊5。プロキシクラスを介することで，あたかもローカルのライブラリにアクセスするのと同じ要領で，サーバーサイド機能を呼び出すことができるというわけです。プロキシクラスの一般的な構文は，以下の通りです。
クラス名.メソッド名([引数,...,] コールバック関数) ＊6　コールバック関数とは，サーバーサイドから応答を得たタイミングで，その結果に基づいて処理を行うための関数です。コールバック関数（ここではOnComplete関数）は，引数としてサーバーメソッドからの戻り値を受け取ります。
　コールバック関数の中で呼び出されている「$get(...)」はページ内のHTML要素にアクセスするためのショートカットとなるもので，以下の2文は同意です＊7。
document.getElementsById('ltrResult').innerHTML
  ⇔ $get('ltrResult').innerHTML
　つまりここでは，テキストボックス（txtIsbn）で入力されたISBNコードをキーに，サーバーメソッドGetTitleByIsbnを呼び出し，その結果（対応する書名）を
タグにセットしているというわけです。　なお，ここではよりわかりやすくするという意味で，コールバック関数を呼び出し元とは分離して記述していますが，匿名関数で一つにまとめてしまっても構いません。呼び出し元とコールバック関数とが一対一の関係にあるならば，匿名関数を用いた方がコードをシンプルに記述できます。以下に書き換えたコードを示します。
function btnSearch_onclick() {
  BookSearch.GetTitleByIsbn($('txtIsbn').value,
function(result){$get('ltrResult').innerHTML=result;});
}

［コラム］
メソッド例外時の処理を記述する　ちなみに，サーバーメソッドで例外が発生した場合，その情報をプロキシクラス（クライアント）側で受け取ることも可能です。その場合，本文のコードにリストAの内容を追記してください。リストA：例外処理用のコード
function btnSearch_onclick() {
  BookSearch.GetTitleByIsbn(
$get('txtIsbn').value, OnComplete, OnFailure);
}
  ...中略...
function OnFailure(ex){
  window.alert("エラー発生" + ex.get_message())
}　このような記述によって，サーバーメソッドで処理されない例外が返された場合には，その情報をSys.Net.WebServiceErrorオブジェクトとして受け取ることが可能になります。
　WebServiceErrorクラスの主なメソッドは，以下の通りです。メソッド名概要get_exceptionType例外の種類get_stackTraceスタックトレースget_messageエラー・メッセージget_statusCodeエラーステータスget_timeOutタイムアウト時間
　例外を処理するのは，コールバック関数OnFailureの役割で，サーバーメソッド呼び出し時に，成功時コールバック関数（ここではOnComplete）の後方に指定することができます。

　いかがですか。こうして説明してみると，やや回りくどく感じるかもしれませんが，別稿「基本的なAjaxアプリケーションを作成してみよう（前編）」のコードと比べてみると，一目瞭然。XMLHttpRequestオブジェクトによる通信手続きが一切必要なくなったことで，コードがぐっとシンプルになっていることがおわかりいただけるはずです。
　次回は，引き続きASP.NET AJAXを用いた構造データの扱いについて紹介します。

　本連載はASP.NET AJAX β2リリース（2006年11月06日時点）の情報を基に執筆しています。今後のRelease Candidate版，正式版などでは仕様が変更される可能性がありますのでご注意ください。

bgx5810 · 发表于 2007-5-25 10:40:40

ASP.NET AJAXでYahoo! ウェブ検索Webサービスを利用してみよう

　前回は，ASP.NET AJAXで単純な文字列データを非同期通信する方法について紹介しました。しかし，もちろん，ASP.NETAJAXでやり取りできるのは，文字列や数値のような単一値ばかりではありません。例えば，オブジェクトや配列（リスト）のような複合的な情報（構造データ）を扱うことも可能です。
　本稿では，Yahoo! ウェブ検索Webサービスをアプリケーションから利用する例を通じて，ASP.NET AJAXから構造データを扱う方法について紹介することにします（図1）。
　なお，Yahoo! ウェブ検索Webサービスについては，別稿「AjaxでYahoo! ウェブ検索Webサービスを利用してみよう（サーバーサイド編）」で詳説しています。こちらの別稿ではASP.NET AJAXを利用「しない」場合のAjaxアプリケーションも紹介していますので，比較しながら見ていくことでより理解が深まるはずです。
図1：キーワードを入力して［検索］ボタンをクリックすると，Yahoo!での検索結果（サイトリンクのリスト）を表示する

　それではさっそく構築の手順を追っていきます。

サーバーサイドの処理を実装する　本連載第3回でも述べたように，「Yahoo! ウェブ検索Webサービス」へのアクセスを担うサーバー機能を提供するのは「.asmx」ファイルの役割です。ソリューションエクスプローラから新規の「.asmx」ファイルを作成したうえで，リスト1の要領でコードを入力してください。なお，「.asmx」ファイルの名前はYahooSearch.asmxとしておきます。リスト1：YahooSearch.asmx（横スクロールできます）

<%@ WebService Language="VB" Class="YahooSearch" %>

Imports System.Collections.Generic
Imports System.Data
Imports System.Data.Common
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports Microsoft.Web.Script.Services
Imports Microsoft.Web.Script.Serialization

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ScriptService()> _
Public Class YahooSearch
  Inherits System.Web.Services.WebService

  <WebMethod()> _
  Public Function GetResultsByKeyword(ByVal keywd As String) _
As List(Of YahooResult)
Dim result As New List(Of YahooResult)
   ' データセットに「Yahoo! ウェブ検索Webサービス」からの結果XMLを読み込み
Dim ds As New DataSet()
ds.ReadXml("http://api.search.yahoo.co.jp/WebSearchService/V1/webSearch?appid=wings-project&query=" & keywd)

   ' <Result>要素の内容を取り出し，DbDataReaderオブジェクトに変換
Dim reader As DbDataReader = ds.Tables("Result").CreateDataReader()

   ' DbDataReaderオブジェクトからYahooResultオブジェクトに情報をセット
Do While reader.Read()
   Dim yah As New YahooResult()
   yah.Title = reader("Title")
   yah.Url = reader("Url")
   result.Add(yah)
Loop
Return result
  End Function

End Class

' 検索結果情報（ページタイトルとURL）を保持するためのYahooResultクラス
Public Class YahooResult
Private _title As String
Private _url As String

Public Property Title() As String
   Get
      Return Me._title
   End Get
   Set(ByVal value As String)
      Me._title = value
   End Set
End Property
Public Property Url() As String
   Get
      Return Me._url
   End Get
   Set(ByVal value As String)
      Me._url = value
   End Set
End Property
End Class

　連載第2回で紹介した以上のASP.NETAJAX構文は利用していませんので，「.asmx」ファイルの詳細については省略します。ここでは入力された値（引数keywd）をもとに問い合わせURLを作成し，その結果をAmazonResultオブジェクト配列として取得しているとだけ理解しておけば良いでしょう。　DataSet.ReadXmlメソッドは，指定されたURLにアクセスした結果をデータセットに取り込むための命令です。.NETFrameworkでは，ReadXmlメソッドを利用することでDOM（Document ObjectModel）のような複雑なAPIを利用することなく，XMLデータを読み込むことができます。
　YahooSearch.asmxのテストページからGetResultsByKeywordメソッドを実行し，以下のような結果を得られれば成功です（図2）。
図2：テストページからGetResultsByKeywordメソッドを確認した結果（クリックで拡大表示します）

クライアントサイドの処理を実装する　次に，YahooSearch.asmxにアクセスするための「.aspx」ファイルを実装します。ソリューションエクスプローラから新規のYahooSearch.aspxを作成し，図3のようにコントロールを配置してください。図3：YahooSearch.aspxのフォームレイアウト

　また，それぞれのコントロールに対して，表1の要領でプロパティを設定しておきます。
表1：YahooSearch.aspxのプロパティ設定コントロールプロパティ設定値ScriptManager(ID)managerServicesPath="~/YahooSearch.asmx"Input（Text）(Id)txtKeywdInput（Button）(Id)btnSearchValue検索Div(Id)ltrResultStyle△（ブランク）
　これでサーバーサイド機能にアクセスするための準備が整いました。次に，［検索］ボタンがクリックされたタイミングで実行されるクライアントサイドのコードを記述します。フォームデザイナ上に配置したボタンをダブルクリックすると，コードエディタが開きます。コードエディタには，デフォルトで最低限のコードが自動生成されています。リスト2のように，コードを入力してみましょう（追記部分は太字）。
リスト2：YahooSearch.aspx（横スクロールできます）

　YahooSearch.GetResultsByKeywordメソッドのコールバック関数であるOnComplete関数に注目してみましょう。GetResultsByKeywordメソッドの戻り値であるYahooResultオブジェクト配列にアクセスするには，以下のように記述するだけです。
result[0]['Url']
　これによって，1番目のYahooResultオブジェクトのUrlプロパティの値を取得できます。先ほど挙げた別稿のサンプル（yahoo.html）でも扱っているようなノードウォーキングに比べ，はるかに直感的なコードで記述できることがおわかりになるはずです。
　以上，今回はここまでです。次回は引き続き，ASP.NET AJAXで提供される拡張サーバーコントロールについて，サンプルを交えながら紹介する予定です。
　本連載はASP.NET AJAX β2リリース（2006年11月06日時点）の情報を基に執筆しています。今後のRelease Candidate版，正式版などでは仕様が変更される可能性がありますのでご注意ください。

[ 本帖最后由 bgx5810 于 2007-5-25 10:44 编辑 ]

bgx5810 · 发表于 2007-5-25 10:41:29

ASP.NET AJAXのサーバー・コントロールを使い倒せ！（UpdatePanel編）

今回からは，ASP.NETAJAXが提供する拡張サーバー・コントロールについて見ていくことにします。連載初回でも紹介したように，ASP.NETAJAXではAjaxアプリケーションを構築するにあたって典型的な機能を拡張サーバー・コントロールとして提供しています。これらサーバー・コントロールを利用することで，例えばページの一部分だけをリフレッシュしたい，一定時間おきに指定された処理を実行したい，などの決まりきった機能を，クライアントサイド・スクリプト（JavaScript）をほとんど意識することなく実装できます。　ASP.NET AJAX β2版で提供されている拡張サーバー・コントロールは以下の通りです（表1）。
表1：ASP.NET AJAX β2版で利用可能な拡張サーバー・コントロール名称概要ScriptManagerAjax動作に必要なJavaScriptのコードを管理ScriptManagerProxyAjax動作に必要なJavaScriptのコードを管理（マスターページ対応）UpdatePanel部分的に更新可能な領域を定義UpdateProgressコントロール非同期通信中に状態メッセージを表示Timer指定時間おきに特定の処理を実行
このうち，ScriptManager（ScriptManagerProxy）コントロールは，すでにここまでの回でも紹介したとおりです。

UpdatePanelコントロールの基本　それではさっそく，具体的なサンプルを見ていくことにしましょう。　今回紹介するのはUpdatePanelコントロール。UpdatePanelコントロールは，その名の通り，（ページ全体ではなく）部分的に更新可能な領域を定義するためのコントロールです。
　本稿では，このUpdatePanelコントロールの内外にLiteralコントロールを一つずつ配置し，それぞれLiteralコントロール上に現在時刻を表示します。同じくUpdatePanelコントロール上に配置したButtonコントロール（［更新］ボタン）をクリックすると，UpdatePanelコントロール上に配置したLiteralコントロールだけが更新されることが確認できます（図1）。
図1：UpdatePanelコントロールを使ったサンプルアプリケーション
更新ボタンをクリックすると

UpdatePanelコントロール上のLiteralコントロールのみ更新される

　以下に，構築の手順を追っていきます。

1. ページ・レイアウトとプロパティの設定を行う　ソリューションエクスプローラから新規の「.aspx」ファイルを作成し（ファイル名はUpdatePanel.aspxとしておきます），図2のようにコントロールを配置してください。図2：UpdatePanel.aspxのフォームレイアウト

　また，それぞれのコントロールに対して，表2の要領でプロパティを設定しておきます。
表2：UpdatePanel.aspxのプロパティ設定コントロールプロパティ設定値ScriptManager(ID)managerEnablePartialRenderingTrueUpdatePanel(ID)upanelLiteral(ID)ltrUpdateText△（ブランク）Button(ID)btnUpdateText更新Literal(ID)ltrNoUpdateText△（ブランク）
　EnablePartialRenderingプロパティは，ページ内の「部分的な更新」を有効にするかどうかを指定します。UpdatePanelコントロールを使用する場合には，原則として，本プロパティをTrueに設定しておく必要があります＊1。

2. ページ・ロード時のコードを記述する　次に，それぞれのLiteralコントロールに対して，ロード時に現在時刻を表示するコードを追加します。それぞれのLiteralコントロールを選択状態にしたうえで，プロパティウィンドウから（イベント）ボタン（図3）をクリックし，イベント一覧を表示，Loadイベントをダブルクリックしてください。コードエディタには，デフォルトで最低限のコードが自動生成されていますので，リスト1のようにコードを入力してみましょう（追記部分は太字）。図3：イベントボタン　

リスト1：UpdatePanel.aspx
<script runat="server">
Protected Sub ltrUpdate_Load(ByVal sender As Object, _
  ByVal e As System.EventArgs)
  ltrUpdate.Text = DateTime.Now.ToString()
End Sub

Protected Sub ltrNoUpdate_Load(ByVal sender As Object, _
  ByVal e As System.EventArgs)
  ltrNoUpdate.Text = DateTime.Now.ToString()
End Sub
</script>

　それぞれLiteralコントロールに対して現在の時刻を表示するだけのシンプルなコードです。［更新］ボタンによって，それぞれのコントロールが書き換えられた（リフレッシュされた）かどうかを確認するために，このようにロード時に最新の日時が表示されるようにしておきます。
　以上で，準備は完了です。UpdatePanel.aspxを実行し，ページ上の［更新］ボタンをクリックしてみましょう。本稿冒頭の図1のように，UpdatePanelコントロール上のコンテンツ（Literalコントロール）だけが表示されることが確認できれば成功です。
　今回記述したのは，あくまでUpdatePanelコントロールの動作を確認するためのダミーのコードだけですから，UpdatePanelコントロールを利用するだけならば完全にコーディングレスで機能を実装できることがおわかりになるはずです。

　☆　　　　　　　　　　　☆　　　　　　　　　　　☆　

　以上，今回はここまでです。次回は引き続き，UpdatePanelコントロールの応用的な使い方と，UpdateProgress/Timerコントロールについて紹介する予定です。
　本連載はASP.NET AJAX β2リリース（2006年11月06日時点）の情報を基に執筆しています。今後のRelease Candidate版，正式版などでは仕様が変更される可能性がありますのでご注意ください。

bgx5810 · 发表于 2007-5-25 10:45:17

第7回　ASP.NET AJAXのサーバーコントロールを使い倒せ！（Timer/UpdateProgress編）

前回は，ASP.NETAJAXが提供する拡張サーバーコントロールの一つであるUpdatePanelコントロールの基本的な使い方について紹介しました。今回は引き続きUpdatePanelコントロールの応用的な使い方とTimer/UpdateProgressコントロールについて解説を進めます。
外部コントロールからUpdatePanelコントロールを更新したい　前回紹介した例は，UpdatePanelコントロール上にリフレッシュ対象のコントロールもポストバックの発生元となるコントロールも配置されている，最もシンプルなパターンでした。前回の例でも見たように，UpdatePanelコントロール配下の子コントロールは，自動的にUpdatePanelコントロール更新のトリガーとして認識されます＊1。　しかし，ページの構造（レイアウト）によっては，リフレッシュ対象のコントロールとポストバックの発生元とが必ずしも隣接しているとは限らないケースがあります。つまり，ページレイアウトによっては「UpdatePanelコントロールの外部」からUpdatePanelコントロールをリフレッシュしたいというケースがあるはずです。
　具体的な例を見てみましょう。以下で紹介するのは，前回登場したUpdatePanel.aspx上のButtonコントロールを，UpdatePanelコントロールの外に移動した場合の例です（図1）。
図1：変更したUpdatePanel.aspxのフォームレイアウト

　まずは，このままの状態でUpdatePanel.aspxを実行してみましょう（図2）。
図2：UpdatePanel.aspxの実行結果

　［更新］ボタンをクリックすると，UpdatePanelコントロールの内外いずれのLiteralコントロールもリフレッシュされてしまうことが確認できるはずです。つまり，UpdatePanelコントロール本来の部分更新が正しく動作していないわけです（UpdatePanelコントロール外部に配置されたボタンコントロールは，通常の，ページ全体に対するポストバック処理を発生しますので，この動作は当然です）。
　このような場合には，UpdatePanelコントロールに対して更新のきっかけとなるコントロールとそのイベント（「トリガー」と呼びます）をあらかじめ登録しておく必要があります。トリガーを登録するには，プロパティ・ウィンドウのTriggersプロパティ右端から［...］ボタンをクリックします。
図3：［UpdatePanelTriggerコレクションエディタ］ダイアログ

　［UpdatePanelTriggerコレクションエディタ］ダイアログが開きますので（図3），左下の［追加］ボタンから［AsyncPostBackTrigger］を選択し，トリガーの追加を行います。トリガーの設定は，ダイアログ右の［AsyncPostBackプロパティ］欄から表1の要領で行ってください。
表1：AsyncPostBackプロパティの設定プロパティ概要設定値ControlIDイベント発生元のコントロールIDbtnRefreshEventNameUpdatePanelコントロールを更新するためのイベントClick
　［OK］ボタンをクリックし，ダイアログを閉じれば準備は完了です。修正したUpdatePanel.aspxを実行し，［更新］ボタンをクリックすると，今度はUpdatePanelコントロール上のLiteralコントロールのみが更新されることが確認できるはずです（図4）。
図4修正したUpdatePanel.aspxの実行結果

　ちなみに，本稿では省略しますが，UpdatePanelコントロールでは，ページ内に複数個配置したり，UpdatePanelコントロールの配下に入れ子で配置したりすることも可能です。この場合にも，それぞれ該当するUpdatePanelコントロールに関連付けるためのトリガーを明示的に登録しておくことで，該当する領域のみを部分更新することが可能になります＊2。
TimerコントロールでUpdatePanelコントロールを自動更新する　次に，ASP.NETAJAXが標準で提供するもう一つのコントロールであるTimerコントロールを見てみましょう。Timerコントロールは，その名の通り，ページ上でタイマー管理を行うためのコントロールで，指定された時間間隔でTickイベントを発生させることができます。Tickイベントに対応するイベントハンドラを記述することで，（例えば）一定時間ごとにUpdatePanelコントロール上のコンテンツを更新するといったような機能を実装できます（図5）。図5：TimerコントロールでUpdatePanelコントロールの内容を自動更新

　さっそく，具体的な手順を見ていきます。使用するのは，前節でも利用したUpdatePanel.aspxです。図6のように，UpdatePanel.aspx上にTimerコントロールを配置します。この際，既存のButtonコントロールを削除するとともに，前節で紹介したトリガー設定をUpdatePanelコントロールから取り除いておく必要があります。
図6：修正したUpdatePanel.aspxのフォームレイアウト

　また，ページ上のプロパティ設定を以下のように設定しておきます（表2）。
表2：変更したUpdatePanel.aspxのプロパティ設定
コントロールプロパティ概要UpdatePanelUpdateModeConditionalTimer(ID)timInterval3000
　Timer.IntervalプロパティはTickイベントの発生間隔をミリ秒単位で，UpdatePanel.UpdateModeプロパティは常にパネルを更新するかどうかを，それぞれ設定します。後述するように，UpdatePanelコントロールをUpdateメソッド経由で更新する場合には，必ずConditional値にセットしておく必要があります。
　次に，Tickイベントハンドラを定義します。フォームデザイナ上，Timerコントロールをダブルクリックすると，コードエディタが開きます。コードエディタには，デフォルトでTickイベントハンドラの最低限のコードが自動生成されていますので，リスト1のように必要なコードを入力してみましょう（追記部分は太字）。
リスト1：UpdatePanel.aspx

Protected Sub tim_Tick(ByVal sender As Object, ByVal e As System.EventArgs)
upanel.Update()
End Sub

　これによって，Tickイベントの発生都度（つまり，Intervalプロパティで設定した3000ミリ秒間隔で），UpdatePanelコントロールの更新を行うことができます。UpdatePanelコントロールをプログラム側から呼び出すには，UpdateメソッドをコールするだけでOKです。
　以上を理解したら，修正したUpdatePanel.aspxを実行してみましょう。UpdatePanelコントロール内のLiteralコントロール（時刻表示）が3秒おきに更新されれば成功です。

UpdateProgressコントロールで通信状況を表示する　UpdateProgressコントロールは，UpdatePanelコントロールによる通信処理中に，ブラウザ上に通信中メッセージ（または画像などを含む任意のコンテンツ）を表示するためのコントロールです。UpdateProgressコントロールを利用することで，エンドユーザーは視覚的に現在の通信状態を把握することができます（図7）。特に，UpdatePanelコントロールを利用して数秒以上にわたる長時間の処理を実行する場合には，UpdateProgressコントロールによってエンドユーザーに「いま何が起こっているのか」を明示的に示すことは重要です。図7：通信中にメッセージを表示

　さっそく，具体的な手順を見ていきます。使用するのは，前節でも利用したUpdatePanel.aspxです。図8のように，UpdatePanel.aspx上にUpdateProgressコントロールを配置します。この際，UpdateProgressコントロールの配下には，通信中に表示するメッセージ（画像）を指定しておく必要があります。
図8：修正したUpdatePanel.aspxのフォームレイアウト

　また，UpdateProgressコントロールのプロパティ設定を，以下のように設定しておきます（表3）。
表3：UpdateProgressコントロールのプロパティ設定プロパティ概要設定値AssociatedUpdatePanelID関連付けるUpdatePanelコントロールのID値upanelDisplayAfter通信発生から何ミリ秒後にメッセージを表示するか500
　AssociatedUpdatePanelIDプロパティが指定されなかった場合，UpdateProgressコントロールは，ページ上のすべてのUpdatePanelコントロールに対して関連付けられます。
　以上で，UpdateProgressコントロールを利用するための最低限の動作は完了です。ただし，このままの状態では，サーバーサイドの処理が一瞬で終了してしまうため，通信メッセージの表示が確認できないはずです。そこでここでは，前節でも使用したTickイベントハンドラに，以下の1行を追加しておきます（リスト2）。これによって，サーバー側の処理をわざと3000ミリ秒だけ休止しているわけです。
リスト2：UpdatePanel.aspx

Protected Sub tim_Tick(ByVal sender As Object, ByVal e As System.EventArgs)
System.Threading.Thread.Sleep(3000)
upanel.Update()
End Sub

　以上を理解したら，修正したUpdatePanel.aspxを実行してみましょう。UpdatePanelコントロールの更新中に通信メッセージが表示されれば成功です。

　☆　　　　　　　　　　　☆　　　　　　　　　　　☆　

　いかがですか。ASP.NETAJAXが提供する拡張サーバーコントロールを利用することで，定型的なAjax機能を限りなくコーディングレスで実現できることが実感できたのではないでしょうか。次回は，引き続きASP.NET AJAXをベースに構築されたサーバーコントロール集「ASP.NET AJAX ControlToolkit」について紹介していきます。

　本連載はASP.NET AJAX β2リリース（2006年11月06日時点）の情報を基に執筆しています。今後のRelease Candidate版，正式版などでは仕様が変更される可能性がありますのでご注意ください。

bgx5810 · 发表于 2007-5-25 10:46:14

便利なAjax対応コントロール集 ASP.NET AJAX Control Toolkit

今回取り上げるASP.NET AJAX Control Toolkitは，ASP.NET AJAXをベースに構築されたサーバー・コントロール集です。　前回まで見てきたように，ASP.NETAJAXでも標準でUpdatePanelやTimerのようなコントロールを提供していますが，あくまでこれらのコントロールが提供するのは汎用的な機能に留まります。個別の要件を実現しようとすれば，多くのコーディングが必要となる局面はまだまだ多いはずです。
　ASP.NET AJAX Control Toolkitを利用することで，こうした個別の要件のいくつかをより少ないコードで実現することが可能になります。表1に，執筆時点（2006年11月6日時点）で提供されているASP.NET AJAX Control Toolkitのコントロールを列挙します。
表1：ASP.NET AJAX Control Toolkitで提供される28のコントロール（2006年11月時点）コントロール名概要Accordion開閉可能なマルチペインを生成AlwaysVisibleControl指定コントロールをページ内の特定個所に常時表示（スクロール時にも合わせて自動スクロール）Animationアニメーション効果を定義CascadingDropDown階層式のドロップダウン・メニューCollapsiblePanel開閉可能なパネルConfirmButtonボタンクリック時に確認ダイアログを表示DragPanelドラッグ可能なパネル領域を生成DropDownSharePointスタイルのドロップダウン・メニューを生成DropShadow既存コントロールにシャドウを付与DynamicPopulateWebサービス呼び出しの結果をページに反映FilteredTextBox入力制限付きのテキストボックスを生成HoverMenuマウスホバー時にポップアップ可能なメニューを生成ModalPopupモーダルなポップアップウィンドウを生成MutuallyExlcusiveCheckBox相互排他的なチェックボックスを生成NoBotページにボット対策のチェック機能を付与NumericUpDownアップダウンボタン（数値や連続したリストなど）を生成PagingBulletedListページング機能に対応した箇条書きリストPasswordStrengthパスワード入力時にその強度を視覚的に表示PopupControl入力コントロールなどにポップアップ・ダイアログを関連付けRatingレーティング表示＆登録機能を提供ReorderListドラッグ＆ドロップで標準の変更が可能なリストコントロールResizableControlコンテンツの表示サイズを変更可能なパネルを生成RoundedCorners既存コントロールの角に丸みを付与Slider数値入力のためのリッチなスライダーを生成TextBoxWatermarkテキストボックスの背景に透かしを付与ToggleButtonOn/Offの切り替えが可能なトグルボタンを生成UpdatePanelAnimation通信時に該当のパネルに対してアニメーション効果を付与ValidatorCallout検証コントロールのエラー・メッセージ表示をカスタマイズ
　DropShadow/TextBoxWatermarkコントロールのように，既存のコントロールにちょっとした視覚効果を加えるものから，Animationコントロールのように高度にフレームワーク的な機能を提供するコントロールまで，様々なコントロールが用意されていることがおわかりになるでしょう。
　表の説明だけではイメージしにくいコントロールもあると思います。具体的な動作イメージは，「ASP.NET AJAX Control Toolkit sample website」で確認できます。数も多いので，まずはデモページで実際の動作を確認し，興味を持ったものから実際に自分のアプリケーション上で動作させてみてはいかがでしょう（図1）。
図1：ASP.NET AJAX Control Toolkitサンプルページで動作を確認できるコントロール
●テキストボックスにポップアップ・ウィンドウを付与するPopupControlコントロール

●モーダル・ウィンドウを制御するModalPopupコントロール

●検証エラー・メッセージを吹き出し表示するValidatorCalloutコントロール

ASP.NET AJAX Control Toolkitのインストール　ASP.NET AJAX Control Toolkitは，ASP.NET AJAX本体には含まれていません。ASP.NET AJAXControl Toolkitで提供されるコントロールを利用するには，ASP.NET AJAXをインストールした環境にASP.NET AJAXControl Toolkitを改めて導入する必要があります。ダウンロードファイルは，ASP.NET AJAX同様，ASP.NET AJAXに関するMicrosoftの公式サイトから入手可能です。　ダウンロードしたAjaxControlToolkit.zipを解凍すると，いくつかのフォルダが展開されますので，その中の一つである「/SampleWebSite/bin」フォルダに含まれるAjaxControlToolkit.dllを，自身のアプリケーション配下のbinフォルダにコピーしてください。
　これで最低限，アプリケーションからASP.NET AJAX ControlToolkitの各コントロールを利用することが可能になります。フォームデザイナ上でもコントロールを利用できるように，ここではツールボックスへの登録作業も行っておきましょう。ツールボックスの［全般］タブを右クリック，表示されたコンテキストメニューから［アイテムの選択...］を選択します。
図2：［ツールボックスアイテムの選択］ダイアログ（クリックすると拡大表示します）

　［ツールボックスアイテムの選択］ダイアログ（図2）が表示されますので，［参照...］ボタンをクリックし，先ほどアプリケーション上に配置したAjaxControlToolkit.dllを選択します。［.NETFrameworkコンポーネント］タブの一覧にいくつかのコントロールが追加され，かつ，チェックが入っていることを確認したうえで，［OK］ボタンをクリックしてください。図3のように，ツールボックス上にASP.NET AJAX Control Toolkitが提供するサーバーコントロールが追加されれば成功です。
図3：追加された拡張サーバーコントロール

【コラム】ASP.NET AJAX Control ToolKit対応テンプレートのインストール　ASP.NET AJAX本体同様，ASP.NET AJAX Control ToolKitでもVisualStudioに専用のテンプレートを導入することが可能です。インストールには，ControlToolKitのダウンロード・アーカイブ配下に含まれる「AjaxControlExtender/AjaxControlExtender.vsi」を使用します。　「.vsi」ファイルをダブルクリックすると，以下のようなコンテンツ・インストーラが起動しますので（図A），あとはウィザードの指示に従って進めるだけでOKです（署名に関する注意ダイアログが表示される場合がありますが，特に問題ありませんので，そのまま継続してください）。
図A：[Visual Studioコンテンツインストーラ]ダイアログ（クリックすると拡大表示します）

　インストール後にVS上から[新しいプロジェクト]ダイアログを確認すると「AJAX AJAX ControlProject」テンプレート（自前のAJAXコントロールを作成するためのプロジェクト）が，[新しいWebサイト]ダイアログを確認すると，[マイテンプレート]に「AJAX Control Toolkit Web Site」テンプレート（ControlToolKitを利用するためのサイト構成）が，それぞれ追加されていることが確認できるはずです。

☆　　　　　　　☆　　　　　　　☆　以上，今回はここまでです。最終回の次回は，ASP.NET AJAX Control Toolkitで提供されるサーバーコントロールの一つとして，CascadingDropDownコントロールを利用してみることにします。

　本連載はASP.NET AJAX β2リリース（2006年11月06日時点）の情報を基に執筆しています。今後のRelease Candidate版，正式版などでは仕様が変更される可能性がありますのでご注意ください。

bgx5810 · 发表于 2007-5-25 10:47:11

CascadingDropDownコントロールで階層式メニューを作成しよう

さる12月14日，ASP.NET AJAX RC版がリリースされました。これに伴い，本連載最終回でもRC環境で確認しています。RCでの変更点はいくつかありますが，ここでは2点だけ。　まず一つに，ASP.NETAJAXのアセンブリがMicrosoft.Web.Extensions.dllからSystem.Web.Extensions.dllに変更になりました。これに伴い，名前空間も「Microsoft.Web.*」から「System.Web.*」に変更になっています。本連載のサンプルであれば，第3回で紹介したBookSearch.asmx（リスト1）や第5回で紹介したYahooSearch.asmx（リスト1）を以下のように変更する必要があります。

Imports Microsoft.Web.Script.Services
Imports Microsoft.Web.Script.Serialization
↓
Imports System.Web.Script.Services
Imports System.Web.Script.Serialization
　もう一点はアプリケーション構成ファイルの変更です。こちらはβ2からRCにかけて大幅に変更になっていますので，原則は新しいWeb.configで既存のものを差し替えることをお勧めします。もちろん，自前の構成を追加している場合には，適宜，構成を転記するのを忘れないようにしてください。変更の詳細については，ASP.NET AJAXサイト内のページでも紹介されていますので，合わせて参照することをお勧めします。
　さて，それでは前置きはこのくらいにして，本題に行ってみましょう。
　いよいよ本連載も最終回。前回に引き続き，ASP.NET AJAXをベースに構築されたサーバーコントロール集「ASP.NET AJAXControl Toolkit」の紹介です。前回も紹介したように，ASP.NET AJAX ControlToolkitでは多くのサーバーコントロールを提供しています。その内容はごく単純なものから高度にフレームワーク的なコントロールまで様々ですが，限られた誌面の中ですべてを紹介することはできません。そこで今回は，比較的中規模で利用頻度も高いと思われるCascadingDropDownコントロールを利用してみることにしましょう。
　CascadingDropDownコントロールは，その名の通り，階層式（Cascading）のドロップダウン・メニューを生成するためのコントロールです。例えば今回扱うのは，以下のようなサンプルアプリケーションです（図1）。
図1：CascadingDropDownコントロールの実行例

　上位のドロップダウン・メニューで部署名を選択すると，下位のドロップダウン・メニューには選択された部署に対応する課の名前のみを表示するというわけです。特にドロップダウン・メニュー内の項目数が多い場合には，このような機能を設けることで，余計な項目を見せずに済みますので，ユーザーの使いやすさも向上します。
　それではさっそく，具体的な構築の手順を見ていくことにしましょう。

データベース接続の準備を行う　本サンプルでは，部/課情報をデータベース（SQL Server 2005）上で管理します。サンプル作成に先立って，以下の準備を行う必要があります。(1)データベースとデータを用意する
　App_Dataフォルダ配下にAjax.mdfを作成したうえで，以下のようなテーブル（表1，表2）を作成してください＊1。
表1：Deptテーブル（部署名テーブル）フィールド名データ型概要dept_idVARCHAR(5)部署コード（主キー）dept_nameVARCHAR(50)部署名
表2：Sectionテーブル（課名テーブル）フィールド名データ型概要sec_idVARCHAR(5)課コード（主キー）sec_nameVARCHAR(50)課名dept_idVARCHAR(5)部署コード（Deptテーブルに対応）
　また，Dept/Sectionテーブルには，以下のような要領で適当なデータを入力しておくものとします（表3，表4）。
表3：Deptテーブルの値（例）dept_iddept_nameD01総務部D02営業部D03生産部
図4：Sectionテーブルの値（例）sec_idsec_namedept_idS10 総務第一課D01S11総務第二D01S20法人営業課D02S21個人営業課D02S22国際営業課D02S30生産管理課D03S31生産第一課D03S32生産第二課D03
(2)アプリケーション構成ファイルにデータベース接続設定を定義する
　アプリケーションからデータベースに接続するための接続文字列を，既存のアプリケーション構成ファイル（Web.config）に追加します。この設定は必ずしも必須ではなく，個別のコード（「.aspx」や「.asmx」ファイル）で直接，データベース接続文字列を指定することも可能です。
　しかし，一般的に接続情報はアプリケーション共通で利用するものです。定義を変更した場合の修正などを考慮すれば，Web.configで一元的に管理することを強くお勧めします。Web.configへの記述は，以下の通りです（リスト1）。
リスト1：Web.configの内容

<?xml version="1.0"?>
<configuration>
  ...中略...
  </configSections>
  <connectionStrings>
<add name="MyDB" c
   providerName="System.Data.SqlClient" />
  </connectionStrings>
  <system.web>
  ...後略...

　これでApp_Codeフォルダ配下のAjax.mdf（データベースファイル）を，接続名MyDBでアクセスできるようになりました。
ドロップダウン・メニューの値リストを取得する　CascadingDropDownListコントロールを利用するには，ユーザーが選択した上位ドロップダウン・メニューの値とカテゴリ値をキーに，下位ドロップダウン・メニューの値リストを取得するための，XML Webサービスメソッドを定義しておく必要があります（リスト2）。　カテゴリとは，階層式ドロップダウン・メニューに含まれるそれぞれのドロップダウン・メニューを一意に識別するためのキーとなる値です。後述しますが，ここでは上位のドロップダウン・メニューとして"Dept"カテゴリを，下位のドロップダウン・メニューとして"Section"カテゴリが指定されているものとします。
　なお，サービスメソッドの名前は任意に決めることが可能ですが（ここではGetDropDownDataメソッド），引数名であるknownCategoryValues/categoryは変更できないようです。引数名を変更した場合，執筆時点のバージョンでは正しく値が認識されませんので，注意してください。
リスト2：cdd.asmx

<%@ WebService Language="VB" Class="cdd" %>

Imports AjaxControlToolkit
Imports System.Collections.Generic
Imports System.Data
Imports System.Data.Common
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ScriptService()> _
Public Class cdd
  Inherits System.Web.Services.WebService

  <WebMethod()> _
  Public Function GetDropDownData(ByVal knownCategoryValues As String, _
ByVal category As String) As List(Of CascadingDropDownNameValue)
Dim result As New List(Of CascadingDropDownNameValue)
   ' 接続名"MyDB"に対する接続を確立
Dim setting As ConnectionStringSettings = _
   ConfigurationManager.ConnectionStrings("MyDB")
Dim factory As DbProviderFactory = _
   DbProviderFactories.GetFactory(setting.ProviderName)
Using db As DbConnection = factory.CreateConnection()
   db.ConnectionString = setting.ConnectionString
   Dim comm As DbCommand = factory.CreateCommand()
   comm.Connection = db
   ' カテゴリ名（引数category）によって処理を分岐
   Select Case category
      ' "Dept"の場合，Deptテーブルから部署コード，部署名を取得
      Case "Dept"
      comm.CommandText = _
         "SELECT dept_id ,dept_name FROM Dept ORDER BY dept_id"
      ' "Section"の場合，上位ドロップダウン・メニューで選択された部署コード
      ' をキーに，Sectionテーブルから課コード，課名を取得
      Case "Section"
      comm.CommandText = _
         "SELECT sec_id ,sec_name FROM Section WHERE dept_id=@dept_id"
      Dim param As DbParameter = factory.CreateParameter()
      param.ParameterName = "@dept_id"
      Dim sd As StringDictionary = _
         CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
      param.Value = sd.Item("Dept")
      comm.Parameters.Add(param)
   End Select  …（1）
   db.Open()
   Dim reader As DbDataReader = comm.ExecuteReader()
   ' 取得した結果セットからCascadingDropDownNameValue配列を生成
   Do While reader.Read()
      Dim cv As New CascadingDropDownNameValue( _
      reader.GetString(1), reader.GetString(0))
      result.Add(cv)
   Loop  …（2）
End Using
Return result
  End Function
End Class

　GetDropDownDataメソッドの大まかな流れについては，リスト2内のコメントを参照いただくとして，ここで注目していただきたいのは，リスト内太字の部分です。（1）カテゴリに応じて処理を分岐する
　メソッド内では引数categoryの値に応じて処理を分岐することで，ドロップダウン・メニューごとに取得する値リストを切り替えることが可能です。後述しますが，取得ロジック自体が全く異なる場合には，メソッド自体を個別のドロップダウン・メニュー単位で分割することも可能です。
　分岐した処理内で，上位ドロップダウン・メニューの選択値を取得するには，CascadingDropDownクラス（AjaxControlToolkit名前空間）のParseKnownCategoryValuesStringメソッドを使用します。ParseKnownCategoryValuesStringメソッドは，引数knownCategoryValuesを経由して渡された値＊2を解析し，カテゴリ名と値の連想配列をStringDictionaryオブジェクトとして返します。StringDictionaryオブジェクトの内容は，Itemメソッドによって取得できます。
（2）戻り値はCascadingDropDownNameValueオブジェクトの配列で
　GetDropDownDataメソッドは，下位ドロップダウン・メニューに引き渡す値リストを，CascadingDropDownNameValueオブジェクトの配列（リスト）として返す必要があります。CascadingDropDownNameValueクラスのコンストラクタは，以下の通りです。

New CascadingDropDownNameValue(オプションの表示テキスト, オプション値)

CascadingDropDownコントロールを利用しよう　値リストを取得するためのサービスクラスが用意できたら，あとはこれを呼び出すための「.aspx」ファイルを作成するだけです。cdd.aspxのフォームレイアウトは図2の通りです（カッコ内はID値）。図2：cdd.aspxのフォームレイアウト

　また，画面をコードエディタに切り替えたうえで，CascadingDropDownコントロールのプロパティ値を設定しておきましょう（リスト3）。執筆時点のバージョンでは，CascadingDropDownコントロールの一部のプロパティについては，プロパティ・ウィンドウからは設定できませんので，注意してください。
リスト3：cdd.aspx（抜粋）

<cc1:cascadingdropdown id="cdd1" runat="server"
  TargetC Category="Dept"
  LoadingText="ロード中..." PromptText="部署名を選択してください"
  ServicePath="cdd.asmx" ServiceMethod="GetDropDownData" />
<cc1:CascadingDropDown id="cdd2" runat="server"
  TargetC Category="Section"
  LoadingText="ロード中..." PromptText="課名を選択してください"
  ServicePath="cdd.asmx" ServiceMethod="GetDropDownData"
  ParentC />

　CascadingDropDownコントロールで設定可能な主なプロパティは，表5の通りです。表5：CascadingDropDownコントロールの主なプロパティプロパティ概要TargetControlID設定対象となるDropDownListコントロールParentControlID親となるDropDownListコントロール（最上位のドロップダウン・メニューでは不要）Category階層内でドロップダウン・メニューを一意に識別するためのカテゴリ名LoadingText値リスト読み込み時の表示テキストPromptTextオプション未選択時に表示するテキストServicePathオプション値を取得するための「.asmx」ファイルServiceMethodオプション値を取得するためのメソッド名
　つまり，ここではDropDownListコントロール"ddl_dept"と"ddl_sec"とが親子関係にある階層式ドロップダウン・メニューを定義しているというわけです。本稿ではいずれの値リストを取得するにもcdd.asmxのGetDropDownDataメソッドを使用していますが，ServicePath/ServiceMethodプロパティを指定することで，ドロップダウン・メニュー単位に「.asmx」ファイル，取得メソッドを分けることも可能です。
　また，ここではとりあえずシンプルな例として2階層のドロップダウン・メニューを例としていますが，ParentControlIDプロパティを指定することで，同じ要領で階層を3，4...と増やすこともできます。
　以上を理解したら，cdd.aspxを実行してみましょう。冒頭の図1のように，部署名を選択したタイミングで対応する課名が表示されれば成功です。

☆　　　　　　　　　☆　　　　　　　　　☆　以上，全9回を通じて，ASP.NET AJAXプログラミングのごく基本的な事項を学んできました。本連載で扱ったのは，ASP.NETAJAX（あるいはASP.NET AJAX Control Toolkit）で提供されている機能のほんの一部にすぎませんが，ASP.NETAJAXによってAjaxアプリケーションの開発生産性がいかに向上するか，その一端を感じていただけたのではないかと思います。本連載が，ASP.NET AJAXの基本を理解したい皆さんの取っ掛かりとなれば幸いです。

		自动登录	找回密码
密码			注～册