Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ASP.NET AJAXで学ぶAJAX対応コントロール実装の基本(前篇)

ASP.NET AJAX Controlの作成方法を学習する

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/08/03 14:00

ASP.NET AJAXと同様に、ASP.NET AJAX Control Toolkitも非常に便利な開発ツールです。開発の幅を広げるのに役立ちますが、使っているうちにもう少し利用しやすいコントロールが欲しいと思うことがあるかもしれません。本稿ではASP.NET AJAX Control Toolkit Extenderを利用して自作のExtenderコントロールを作成する方法を学習します。

目次

はじめに

 ASP.NET AJAX V1.0も使い慣れてきた方がいると思います。しかしASP.NET AJAX Controlは英語圏で使うことを想定して作られているため、日本で扱うには少々扱いづらいコントロールが存在することも事実です。そういったコントロールをカスタマイズするためにも、本稿ではASP.NET AJAXコントロールを自作する方法について、またAJAXの機能は持たずとも、コントロールに対してちょっとした機能拡張を行うためのExtenderコントロールの作成方法について学習していきたいと思います。

対象読者

  • ASP.NET 2.0を使ったことがある方
  • ASP.NET AJAXに興味がある方
  • AJAXに興味がある方
  • JavaScriptを使える方

必要な環境と準備

  • Visual Studio 2005(以下、VS)もしくは、J#、C++を除くExpress Edition
  • ASP.NET AJAX V1.0
  • ASP.NET AJAX Control Toolkit

 ASP.NET AJAXの入手方法、インストール方法はこちらの記事を参照してください。また、Control Toolkitの入手方法と利用方法はこちらの記事を参照してください。

Extenderコントロール作成のためにプロジェクトを作成する

 Control Toolkitの利用方法の解説でASP.NET AJAX Control Toolkit Extenderのテンプレートのインストールが完了していると思うので、Visual Studio 2005の[ファイル]-[新しいプロジェクト]から[ASP.NET AJAX Control Project]のテンプレートを選択し、プロジェクト名を決めて[OK]をクリックします(図1)。今回はVBによるプロジェクト作成ですが、実際にはC#による作成も可能です。また、この[ASP.NET AJAX Control Project]テンプレートはVB 2005 Express EditionとC# 2005 Express Editionでも利用できます。

図1 新しいプロジェクトのダイアログ
図1 新しいプロジェクトのダイアログ

 [OK]ボタンをクリックすると次のようなソリューションが出来上がります。既定で3種類のファイルが作成されます(図2)。

図2 ソリューションエクスプローラ
図2 ソリューションエクスプローラ
表1
ファイル名概要
プロジェクト名+Behavior.js(以下xxxBehavior.js)コントロールにどういった振る舞いを持たせるかをJavaScriptで直接記述するファイル。
プロジェクト名+Designer.vb(以下xxxDesigner.vb)フォームデザイナ上でコントロールを張り付けた時に表示されるコントロールのデザインが必要な場合は記述するが、基本的なExtenderコントロールの場合は記述する必要がないファイル。
プロジェクト名+Extender.vb(以下xxxExtender.vb)コントロールのExtenderを作ることを管理して、デザイン時にプロパティをセットすることができるサーバーサイドのコントロールクラス。Extenderにセットされるプロパティを設定します。このプロパティはデザイン時にプロパティウィンドウやスマートタグから、コード記述時に直接記述することでアクセスでき、xxxBehavior.jsファイルで設定されるプロパティとマッチします。

 ほとんどのExtenderコントロールはxxxExtender.vbファイルとxxxBehavior.jsファイルの2種類を設定することで作成可能です。xxxDesigner.vbを利用するのは、Ratingコントロールや、ReorderListコントロールなど、既存のコントロールの機能拡張では無く、そのコントロールだけで利用できるコントロールを作成する際に必要になります。

 ただし、xxxDesigner.vbに書き込むにはレンダリングされるHTMLの記述や、デザイン時のプロパティに応じた表示の変更に対応したコーディング、必要に応じてスマートタグの記述などが必要になってきます。本稿ではxxxDesigner.vbの内容はテンプレートで作成された状態から手を加えませんのでご了承ください。

HelloAjaxControlExtenderコントロールを作成する

 それでは実際にアプリケーションを作成して、AJAX Control Extenderの動作を確認しましょう。コントロール全般を拡張するExtenderコントロールを作成します。肝心の拡張内容は次のとおりです。

  • TargetControlIDプロパティに設定したコントロール(サンプルはラベル)の上にマウスオーバーさせた時に、アラートを表示する
  • アラート表示後に対象のButtonコントロール(<asp:Button --/>)1つの利用状態を可能・不可能に切り替える

 上記から分かるように本稿は学習をメインに進めていくので、作成サンプルは実際に活用できるExtenderコントロールではありません。完成したExtenderコントロールは図3~5のように動作します。

図3 初期表示画面
図3 初期表示画面
図4 マウスオーバーイベントを発生させた画面
図4 マウスオーバーイベントを発生させた画面
図5 マウスオーバーイベント終了後の画面
図5 マウスオーバーイベント終了後の画面

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト ナオキ(ナオキ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:ASP.NET AJAXで学ぶAJAX対応コントロール実装の基本
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5