Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

使ってみようASP.NET AJAX Control Toolkit(入力補助コントロール編2)

ASP.NET AJAX Control Toolkitの利用方法を学習する 後編

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

前回のASP.NET AJAX Control Toolkitの入力ページ補助コントロール編に続いて、本稿では「入力検証機能を強化するエクステンダ」と「特殊なメニュー表示を可能にするエクステンダ」の計11個のコントロールをサンプルを交えて学習していきます。

目次

はじめに

 前回の記事で、ASP.NET AJAX Control Toolkit(以下、Control Toolkit)の入力ページ補助コントロールの一部について解説しました。

 本稿では「入力検証機能を強化するエクステンダ」と「特殊なメニュー表示を可能にするエクステンダ」の各コントロールの魅力を伝えつつ、コントロールの使い方について解説していきたいと思います。ただし、各コントロールすべてのプロパティを網羅しているわけではないので、各コントロールについて詳しく知りたい方は公式ページを参照して学習してください。

 また、今回のサンプルプログラムはごく基礎的な用途の紹介ですので、さらに詳細な使い方を学習したい方も公式ページを参考にしてください。

対象読者

  • ASP.NET 2.0を使ったことがある人
  • ASP.NET AJAXに興味がある人
  • AJAXに興味がある人
  • AJAXに興味があるが、JavaScriptが分からない人

必要な環境と準備

  • Visual Web Developer 2005 Express EditionもしくはVisual Studio 2005(以下、VS)
  • ASP.NET AJAX V1.0
  • ASP.NET AJAX Control Toolkit

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

今回ご紹介するASP.NET AJAX Control Toolkit

データ入力ページの作成に役立つ部品

 本稿ではデータ入力ページの作成に役立つ部品の中の「入力検証機能を強化するエクステンダ」「特殊なメニュー表示を可能にするエクステンダ」について触れて行きます。

  1. 入力検証機能を強化するエクステンダ
  2. ValidatorCallout、TextBoxWatermark、ConfirmButton、PasswordStrength、MutuallyExclusiveCheckbox、AutoComplete、MaskedEdit
     
  3. 特殊なメニュー表示を可能にするエクステンダ
  4. PopupControl、ModalPopup、HoverMenur、Calendar

入力検証機能を強化するエクステンダ

 まずは、Webページの作成で使用頻度の高い「入力検証機能を強化するエクステンダ」について説明します。

ValidatorCalloutExtenderコントロール

 ValidatorCalloutExtenderコントロールは既存の検証コントロールの機能性を高めるエクステンダコントロールで、ポストバックが発生する際に既存の検証コントロールをコールアウトさせることが可能になります。デフォルトで警告アイコンなどが設定されていますが、プロパティ設定によりカスタマイズすることも可能となっています。

表1
プロパティ名 概要
WarningIconImageUrl 警告アイコンのImageを設定
CloseImageUrl 閉じる部分のImageを設定
Width コールアウトの幅を設定
TargetControlID コールアウトする「検証コントロール」のIDを設定

 テキストボックスにインターネットURLの値以外が入力された際に警告を表示するには、次のように設定します。

ValidatorCalloutExtender.aspx(一部)
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1"
runat="server"
ControlToValidate="TextBox1"
display="None"
ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?"
ErrorMessage="<b>入力エラーです。</b><br /> インターネットアドレスを入力してください。http(s)://****.***" />
<ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender1"
runat="server" TargetControlID="RegularExpressionValidator1" />
<asp:Button ID="Button1" runat="server"
OnClientClick="return false" Text="Button" />

 サンプルを実行すると図1~2のようになります(ダウンロードサンプルのファイルは「/ValidatorCalloutExtender/ValidatorCalloutExtender.aspx」です)。

図1 上のテキストボックスの検証コントロールをコールアウトした画面
図1 上のテキストボックスの検証コントロールをコールアウトした画面
図2 下のテキストボックスの検証コントロールをコールアウトした画面
図2 下のテキストボックスの検証コントロールをコールアウトした画面

TextBoxWatermarkExtenderコントロール

 TextBoxWatermarkExtenderコントロールはテキストボックスに入力がされていない場合、透かしを表示させる機能を付加するエクステンダコントロールで、テキストボックスに何を入力するべきか、あらかじめ通知できるようになっています。テキストボックスにフォーカスが当たると透かしは消えます。

表2
プロパティ名 概要
WatermarkText 透かしに表示されるテキストを設定
WatermarkCssClass 透かしテキストの背景のCSSを設定する設定しない場合は透明な表示
TargetControlID 透かしを表示させる「TextBoxコントロール」のIDを設定

 テキストボックスに名前を入力させたい場合は、次のような設定で実現できます(CSS設定は省いています)。

TextBoxWatermarkExtender.aspx(一部)
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1"
runat="server" TargetControlID="TextBox1"
WatermarkText="名前を入力してください" />

 サンプルを実行すると図3~5のようになります(ダウンロードサンプルのファイルは「/TextBoxWatermarkExtender/TextBoxWatermarkExtender.aspx」です)。

図3 サンプル実行直後の画面
図3 サンプル実行直後の画面
図4 上のテキストボックスにフォーカスがあたった画面
図4 上のテキストボックスにフォーカスがあたった画面
図5 上のテキストボックスに値を入力し、下のテキストボックスにフォーカスがあたった画面
図5 上のテキストボックスに値を入力し、下のテキストボックスにフォーカスがあたった画面

ConfirmButtonExtenderコントロール

 ConfirmButtonExtenderコントロールは、ASP.NETのボタン系コントロールクリック時に確認ダイアログを表示するエクステンダコントロールで、Buttonコントロール、LinkButtonコントロール、ImageButtonコントロールで利用することが可能です。

表3
プロパティ名 概要
ConfirmText 確認ダイアログに表示するテキストを設定
TargetControlID 確認ダイアログを表示させる「Button系コントロール」のIDを設定

 ボタンクリック時に確認ダイアログを表示するには、次のように設定します。

ConfirmButtonExtender.aspx(一部)
<asp:Button ID="Button1" runat="server" Text="Button" />
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1"
runat="server" ConfirmText="ボタンをクリックしましたか?"
TargetControlID="Button1" />

 サンプルを実行すると図6~7のようになります(ダウンロードサンプルのファイルは「/ConfirmButtonExtender/ConfirmButtonExtender.aspx」です)。

図6 サンプル実行直後の画面
図6 サンプル実行直後の画面
図7 ボタンをクリックすると表示される確認ダイアログ
図7 ボタンをクリックすると表示される確認ダイアログ

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

著者プロフィール

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

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

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

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

バックナンバー

連載:使ってみようASP.NET AJAX Control Toolkit
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5