| |
 |
連載：Microsoft AJAX Library＆JavaScriptプログラミング
第4回 MS AJAX LibでAJAX対応コントロールを開発しよう（後編）
山田 祥寛（http://www.wings.msn.to/）
2008/02/08 |
|
前回は、Microsoft AJAX Library（以降、MS AJAX Lib）＋ASP.NET AJAX Control Toolkit（以降、Control Toolkit）を利用したExtenderコントロール作成の基本を理解した。ExtenderControlBaseクラス（Control Toolkit）を利用することで、サーバ／クライアント間の値の授受などといった原始的な手続きを意識することなく、Extenderコントロールを作成できることがお分かりいただけたはずだ。
もっとも、前回紹介したサンプルは、ただ単にメッセージボックスを表示するためのJavaScriptコンポーネントをサーバ・コントロール（Extenderコントロール）としてラッピングしただけのものであり、Ajax機能を含んでいないものであった。
そこで今回は、前回紹介したDialogButtonコントロールを拡張して、Ajax機能を付与する方法について紹介する。また、本稿後半では、Control Toolkitの既存機能を利用して、表示するメッセージボックスを（JavaScript標準のものではなく）自作のデザインにカスタマイズする方法についても見ていくことにする。
Ajax対応のExtenderコントロールを作成しよう
まずは、Ajax対応のDialogButtonコントロール――AjaxDialogButtonを実装していこう。AjaxDialogButtonコントロールは、前回作成したDialogButtonコントロールを拡張したもので、メッセージボックスに表示するメッセージを、サーバサイドでXML Webサービスとして実装されたメソッド（以降、サービス・メソッド）から取得するように修正したものだ。
 |
| 図1 ボタン・クリックによって、サーバ側から取得したメッセージをメッセージボックスに表示 |
このAjaxDialogButtonコントロールが公開するプロパティは、以下のとおりである。
| プロパティ |
概要 |
| TargetControlID |
メッセージボックス機能を関連付けるターゲット要素（ID値） |
| ServicePath |
メッセージ取得に使用するXML Webサービス（.asmxファイル）のパス |
| ServiceMethod |
メッセージ取得に使用するサービス・メソッドの名前 |
| Key |
サービス・メソッドに引き渡すキー値 |
|
| 表1 AjaxDialogButtonコントロールで利用可能なプロパティ |
なお、AjaxDialogButtonコントロールから使用するサービス・メソッドは、必ず以下のシグニチャに従う必要があるものとする（つまり、メソッド名は自由に決められるが、引数／戻り値のデータ型、仮引数名は固定であるということ）。また、C#／Visual Basic（VB）いずれを利用しているかにかかわらず、パラメータの名前は大文字／小文字まで厳密に区別されるので、注意してほしい。
[WebMethod()]
public String ＜メソッド名＞(String key)
|
<WebMethod()> _
Public Function ＜メソッド名＞(ByVal key As String) As String
|
|
| AjaxDialogButtonコントロールから使用するサービス・メソッドのシグニチャ（上：C#、下：VB） |
| メソッド名は変更可能だが、引数／戻り値のデータ型、仮引数名は固定である。パラメータの名前は大文字／小文字が区別される。 |
■AjaxDialogButtonコントロールを実装する
それではさっそく、具体的な開発の手順を見ていくことにしよう。
［1］新規のExtenderコントロールを作成する
前回で紹介したのと同じ要領で、「ASP.NET AJAX Control Project」プロジェクト上で新規のExtenderコントロールを作成しよう。名前は「AjaxDialogButton」とする。これにより、
- AjaxDialogButtonExtender.vb（AjaxDialogButtonExtender.cs）
- AjaxDialogButtonDesigner.vb（AjaxDialogButtonDesigner.cs）
- AjaxDialogButtonBehavior.js
といったファイルが生成されるので、例によって、デザイナ・クラスを除くエクステンダ・クラス、Behaviorオブジェクトに対して、コードを追加していくことにしよう。
［2］エクステンダ・クラスを編集する
まずはエクステンダ・クラスからだ。デフォルトで必要最低限のコードは生成されているはずであるので、実際に追記／変更しなければならない部分は、以下のリストの白字部分だけだ。
using System;
using System.Web.UI.WebControls;
using System.Web.UI;
using System.ComponentModel;
using System.ComponentModel.Design;
using AjaxControlToolkit;
// アセンブリに組み込むリソースを宣言
[assembly: System.Web.UI.WebResource(
"MyAjaxLib.AjaxDialogButtonBehavior.js", "text/javascript")]
namespace MyAjaxLib {
// クラスレベルの属性を宣言
[Designer(typeof(AjaxDialogButtonDesigner))]
[ClientScriptResource("MyAjaxLib.AjaxDialogButtonBehavior",
"MyAjaxLib.AjaxDialogButtonBehavior.js")]
[TargetControlType(typeof(IButtonControl))]
public class AjaxDialogButtonExtender : ExtenderControlBase {
// ServicePathプロパティを定義
[ExtenderControlProperty]
[DefaultValue("")]
public string ServicePath {
get {
return GetPropertyValue("ServicePath", "");
}
set {
SetPropertyValue("ServicePath", value);
}
}
// ServiceMethodプロパティを定義
[ExtenderControlProperty]
[DefaultValue("")]
public string ServiceMethod {
get {
return GetPropertyValue("ServiceMethod", "");
}
set {
SetPropertyValue("ServiceMethod", value);
}
}
// Keyプロパティを定義
[ExtenderControlProperty]
[DefaultValue("")]
public string Key {
get {
return GetPropertyValue("Key", "");
}
set {
SetPropertyValue("Key", value);
}
}
}
}
|
Imports System
Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports AjaxControlToolkit
' アセンブリに組み込むリソースを宣言
<Assembly: System.Web.UI.WebResource(
"MyAjaxLib.AjaxDialogButtonBehavior.js",
"text/javascript")>
Namespace MyAjaxLib
' クラスレベルの属性を宣言
<Designer(GetType(AjaxDialogButtonDesigner))> _
<ClientScriptResource("MyAjaxLib.AjaxDialogButtonBehavior", _
"MyAjaxLib.AjaxDialogButtonBehavior.js")> _
<TargetControlType(GetType(IButtonControl))> _
Public Class AjaxDialogButtonExtender
Inherits ExtenderControlBase
' ServicePathプロパティを定義
<ExtenderControlProperty()> _
<DefaultValue("")> _
Public Property ServicePath() As String
Get
Return GetPropertyValue("ServicePath", "")
End Get
Set(ByVal value As String)
SetPropertyValue("ServicePath", value)
End Set
End Property
' ServiceMethodプロパティを定義
<ExtenderControlProperty()> _
<DefaultValue("")> _
Public Property ServiceMethod() As String
Get
Return GetPropertyValue("ServiceMethod", "")
End Get
Set(ByVal value As String)
SetPropertyValue("ServiceMethod", value)
End Set
End Property
' Keyプロパティを定義
<ExtenderControlProperty()> _
<DefaultValue("")> _
Public Property Key() As String
Get
Return GetPropertyValue("Key", "")
End Get
Set(ByVal value As String)
SetPropertyValue("Key", value)
End Set
End Property
End Class
End Namespace
|
|
| リスト1 AjaxDialogButtonコントロールのサーバ側の挙動を定義するエクステンダ・クラス（上：AjaxDialogButtonExtender.cs、下：AjaxDialogButtonExtender.vb） |
前回でも紹介したように、エクステンダ・クラスではExtenderコントロールに関連する属性／プロパティの宣言を行っているのみで、ここで特筆すべきことは特にない。エクステンダ・クラスで利用可能な属性については、前回で紹介した表（3ページ目の表7）も併せて参照いただきたい。
Insider.NET 記事ランキング
本日
月間
