忍者ブログ

技術メモ

Home > ブログ > > [PR] Home > ブログ > Ajax > ◆独自のエクステンダ・コントロールを作成する

◆独自のエクステンダ・コントロールを作成する

[ASP.NET AJAX]独自のエクステンダ・コントロールを作成するには?(サーバサイド編)
http://www.atmarkit.co.jp/fdotnet/dotnettips/947aspajaxcustomextender1/aspajaxcustomextender1.html
[ASP.NET AJAX]独自のエクステンダ・コントロールを作成するには?(クライアントサイド編)
http://www.atmarkit.co.jp/fdotnet/dotnettips/951aspajaxcustomextender2/aspajaxcustomextender2.html

1. プロジェクト作成
  クラスライブラリでプロジェクトを作成
  binにAjaxControlToolkit.dllを配置

2. プロジェクトに参照を追加する
  System.Design
  System.Web
  System.Web.Extensions
  System.Web.Extensions.Design
  AjaxControlToolkit.dll

3. デザイナ・クラスを定義する
  最低限のファイルは以下の構成
  XxxxxExtender.cs
    エクステンダ・クラス。コントロールのサーバサイド機能を定義するクラス
  XxxxxDesigner.cs
    デザイナ・クラス(コントロールのフォーム・デザイナ上での挙動を定義するためのクラス)
  XxxxxBehavior.js
    Behaviorオブジェクト。コントロールのクライアントサイド機能を定義するクラス

  必要であれば、画像ファイル・スタイルシートなどのリソースファイルを追加

  エクステンダー・コントロールはフォーム・デザイナ上の見掛けを持たないので
  デザイナクラスは空のものでよい

  ①デザイナ・クラス定義
    デザイナ・クラスであることの条件は、
    ExtenderControlBaseDesigner<T>クラス(AjaxControlToolkit.Design名前空間)を継承するという
    ジェネリックの型パラメータには、対応するエクステンダ・クラスを指定すればよい

    -------------------------------------------------------------------------------------------
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using AjaxControlToolkit.Design;

    namespace MyExtender {
     class DialogButtonDesigner : ExtenderControlBaseDesigner<DialogButtonExtender> { }
    }
    -------------------------------------------------------------------------------------------

  ②エクステンダ・クラスを定義
    サーバサイド機能を定義する
    エクステンダ・クラスで定義する必要があるのは、コントロールとして公開すべきプロパティの定義と、
    デザイナ・クラス/Behaviorオブジェクトの宣言(関連付け)

    ・エクステンダ・クラスはExtenderControlBaseクラスを継承する
     ExtenderControlBaseクラス(AjaxControlToolkit名前空間)は、クライアントサイド・スクリプトの
     管理をはじめ、Behaviorオブジェクトとのプロパティ値の受け渡し、ターゲット要素とのひも付けなど、
     エクステンダ・コントロールの動作には欠かせない基本的な機能を提供するクラス
    ・TargetControlType属性は、エクステンダを適用できるコントロールを制限するための属性

    -------------------------------------------------------------------------------------------
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.ComponentModel;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using AjaxControlToolkit;

    [assembly:WebResource("MyExtender.DialogButtonBehavior.js", "text/javascript")]
    namespace MyExtender {

     [Designer(typeof(DialogButtonDesigner))]
     [ClientScriptResource("MyExtender.DialogButtonBehavior", "MyExtender.DialogButtonBehavior.js")]
     [TargetControlType(typeof(IButtonControl))]
     public class DialogButtonExtender : ExtenderControlBase {

      // Messageプロパティを定義
      [ExtenderControlProperty]
      [DefaultValue("")] 
      public string Message {
       get {
        return GetPropertyValue("Message", "");
       }
       set {
        SetPropertyValue("Message", value); 
       }
      }
     }
    }
    -------------------------------------------------------------------------------------------

4. Behaviorオブジェクトを定義する
  ・Behaviorオブジェクトはエクステンダのクライアントサイド機能を定義するためのJavaScriptのクラス
  ・Behaviorオブジェクトはエクステンダの挙動を決める
   ―実質、エクステンダ・コントロールの中核を担うクラス
  ・Behavior.jsは「ビルドアクション」-「埋め込まれたリソース」として設定する

  ①AjaxControlToolkit.BehaviorBaseクラスを継承すること
  ②エクステンダ・クラスのプロパティと対応していること
  ③プロパティ値の変更はraisePropertyChangedメソッドで通知
  ④イベント・ハンドラを登録する

    -------------------------------------------------------------------------------------------
    // MyExtender名前空間を宣言
    Type.registerNamespace("MyExtender");

    // MyExtender.DialogButtonBehaviorクラスのコンストラクタ
    MyExtender.DialogButtonBehavior = function(element) {

     // 基底クラスのコンストラクタをコール
     MyExtender.DialogButtonBehavior.initializeBase(this, [element]);

     // Messageプロパティの値を格納するためのプライベート変数を初期化
     this._Message = '';
    }

    // MyExtender.DialogButtonBehaviorクラスのメソッドを定義
    MyExtender.DialogButtonBehavior.prototype = {

     // Behaviorオブジェクトを初期化
     initialize: function() {

     // 基底クラスのinitializeメソッドをコール
      MyExtender.DialogButtonBehavior.callBaseMethod(this, 'initialize');


      // ターゲット要素にclickイベント・ハンドラを関連付け
      $addHandler(
       this.get_element(),
       'click',
       Function.createDelegate(this, this._onClick)
      );

    },

     // Messageプロパティのゲッター・メソッド
     get_Message: function() {
       return this._message;
     },

     // Messageプロパティのセッター・メソッド
     set_Message: function(value) {

      // 設定値が元の値と異なる場合にのみ変更処理を実施
      if (this._message !== value) {
       this._message = value;
       this.raisePropertyChanged('Message');
      }
     },

     // ターゲット要素がクリックされたときの処理
     _onClick: function(e) {
    
      // ダイアログを表示した後、イベントをキャンセル(ポストバックを抑制)
      window.alert(this._message);
      return false;
     }
    };

    // BehaviorBaseオブジェクトを継承する
    // MyExtender.DialogButtonBehaviorクラスを登録
    MyExtender.DialogButtonBehavior.registerClass(
     'MyExtender.DialogButtonBehavior',
     AjaxControlToolkit.BehaviorBase);
    -------------------------------------------------------------------------------------------
 

PR

Comment0 Comment

Comment Form

  • お名前name
  • タイトルtitle
  • メールアドレスmail address
  • URLurl
  • コメントcomment
  • パスワードpassword

PAGE TOP