FilteredTextBoxExtender・NumericUpDownExtender・Rating
ここから先は実際に各コントロールの特徴と利用する上で必須のプロパティなどの設定などを解説しながら進めていきます。先ずは、より直感的で便利なデータ入力を可能とするエクステンダについてです。
FilteredTextBoxExtenderコントロール
FilteredTextBoxExtenderコントロールはTextBoxコントロールに入力されるデータの制限機能を付加するエクステンダコントロールです。実際に利用するプロパティはFilterTypeプロパティとValidCharsプロパティです。
| プロパティ名 | 概要 |
| FilterType | フィルタのタイプ「LowercaseLetters」（半角アルファベットの小文字のみ入力可能）、「Numbers」（半角数字のみ入力可能）、「UppercaseLetters」（半角アルファベットの大文字のみ入力可能）、「Custom」（前述3つのフィルタを組み合わせたり、例外を設定したフィルタの入力を可能）”の4種類の中から1つ設定 |
| ValidChars | FilterTypeプロパティがCustomに設定されている時に付け加える例外キャラクター |
| TargetControlID | フィルタ設定を行う「TextBoxコントロール」のIDを設定 |
TargetControlIDプロパティの設定を行うことで、TargetControlIDプロパティに設定されたコントロールのプロパティウィンドウの上部に図1のように拡張されます（図はFilteredTextBoxExtenderコントロールの拡張プロパティ）。フォームデザイナから必要なプロパティの設定を行うことができます。しかし例外として、AnimationExtenderコントロール、UpdatePanelAnimationExtenderコントロール等、いくつかのコントロールではHTMLソース画面からしかプロパティ設定は行えないので確認する必要があります。
メールアドレスのみを受け付けるようなTextBoxコントロールにしたい場合は次のような設定で実現できます。
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="TextBox1" FilterType="Custom, Numbers , LowercaseLetters" ValidChars="-_@." />
このコントロールの実行結果は体感しないと分からないのですが、サンプルを実行すると図2のようになります（ダウンロードサンプルのファイルは「/FilteredTextBoxExtender/FilteredTextBoxExtender.aspx」です）。
NumericUpDownExtenderコントロール
NumericUpDownExtenderコントロールはTextBoxコントロールの横に表示されるボタンを押すことで値の増減や登録されているリストの表示を切り替える機能を付加するエクステンダコントロールです。通常の入力とは違い、テキスト入力の補助を行うことが可能です。
| プロパティ名 | 概要 |
| Width | 対象のTextBoxコントロールの幅を設定（増減ボタン込みの幅） |
| Refvalues | 列挙体の記述を行い、増減させる値を設定 |
| TargetButtonDownID | 自分で作成したImgファイルの設定（Downボタン） |
| TargetButtonUpID | 自分で作成したImgファイルの設定（Upボタン） |
| TargetControlID | 値の増減を行うボタンを拡張させる「TextBoxコントロール」のIDを設定 |
生まれた年を入力させる際にテキストボックスの値は変更させたくない環境などでは次のように設定することで実現できます。
<asp:TextBox ID="TextBox1" runat="server" Text="1980" Enabled="False"> </asp:TextBox> <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" TargetControlID="TextBox1" Step="1" Width="80"/>
このコントロールの実行結果も体感しないと分からないのですが、サンプルを実行すると図3のようになります（ダウンロードサンプルのファイルは「/NumericUpDownExtender/NumericUpDownExtender.aspx」です）。
Ratingコントロール
Ratingコントロールはユーザーがその項目に対して評価するために使用するコントロールで、マウスカーソルに合わせて評価が変更されるので、ユーザーにも分かりやすくフィードバックを得やすいコントロールだと言えます。このRatingコントロールは自身のプロパティウィンドウから設定が可能な数少ないコントロールです。このコントロールはCSSの設定をメインに利用します。以下に4種類のCSSクラスプロパティについてはすべて必須の設定となっています。StarCSSClassは表示する画像の幅、高さなどの表示に関するCSSを、その他の3種類のCSSクラスプロパティには画像を参照設定することが必要になっています。
| プロパティ名 | 概要 |
| AutoPostBack | Ratingの項目クリック時にPostbackを起こすかどうかを設定 |
| CurrentRating | Ratingの初期値を設定 |
| MaxRating | Ratingの最大値を設定 |
| ReadOnly | Ratingの変更ができるかどうかを設定 |
| StarCSSClass | 表示するImageのCSS（サイズ等）を設定 |
| WaitingStarCSSClass | 通信の時のImageのCSS(普通は画像参照)を設定 |
| FilledStarCSSClass | 評価されている時のImageのCSS（普通は画像参照）を設定 |
| EmptyStarCSSClass | 評価されていない部分のImageのCSS(普通は画像参照)を設定 |
| RatingAlign | Imageの並びが水平か垂直かを設定 |
| RatingDirection | Imageの並び順を設定 |
Ratingコントロールはスマートタグが実装されていて、そこからいくつかの項目を設定することができます（図4）。
ページ呼び出し時に評価を3と設定して、最大で5まで評価可能なレーティングを作成する場合は次のような設定を行うことで実現できます。
<ajaxToolkit:Rating
ID="Rating1"
runat="server"
CurrentRating="3"
MaxRating="5"
StarCssClass="formatStar"
WaitingStarCssClass="savedStar"
FilledStarCssClass="filledStar"
EmptyStarCssClass="emptyStar" />
各CSSは次のように設定することでRatingコントロールの表示を実現できます。
.formatStar
{
width:15px;
height:15px;
cursor:pointer;
display: block;
}
.savedStar
{
background-image: url(Images/SavedStar.png);
}
.filledStar
{
background-image: url(Images/FilledStar.png);
}
.emptyStar
{
background-image: url(Images/EmptyStar.png);
}
サンプルを実行すると図5のようになります（ダウンロードサンプルのファイルは「/Rating/Rating.aspx」です）。
