.NET TIPS ［ASP.NET AJAX］NumericUpDownコントロールでアップダウン・ボタンを生成するには？［2.0のみ、C#、VB］ 山田 祥寛 2007/06/07

　NumericUpDownコントロール（NumericUpDownExtender）は、ASP.NET AJAX Control Toolkit（以降、Control Toolkit）で提供されるコントロールの1つで、TextBoxコントロールに対して、表示されている数値を増減させるためのアップダウン・ボタン（スピン・ボックスとも呼ばれる）を付与するためのコントロールだ。

　Windowsアプリケーションではごく見慣れたユーザー・インターフェイスであるが、NumericUpDownコントロールを利用することで、Webアプリケーションでも限りなくコーディングレスで以下のようなアップダウン・ボタンを導入できるようになる。

［▲］ボタンをクリック

NumericUpDownコントロールによるアップダウン・ボタンの生成

テキストボックス内の数値をアップダウン・ボタンのクリックによって増減できる。

　動作自体は明快なので、以下ではさっそく、上の画面のようなアップダウン・ボタンをASP.NETページに実装する手順を見ていくことにしよう。

　なお、本サンプル・プログラムを動作させるに当たっては、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。

●NumericUpDownコントロールの基本

　新規のWebフォーム（NumericUpDown.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。また、それぞれのコントロールに対しては、表の内容でプロパティ値を設定しておこう。

NumericUpDown.aspxのフォーム・レイアウト

各コントロールに対するプロパティの設定内容は以下のとおり。

コントロール（ID） プロパティ 設定値 ScriptManager（manager） − − TextBox（txtNum） Columns 5 NumericUpDownExtender（numud） TargetControlID txtNum Step 1 Width 50

　NumericUpDownコントロールのTargetControlIDプロパティは、関連付けるTextBoxコントロールを指定するものだ。これによって、TextBoxコントロールtxtNumにNumericUpDownコントロールの機能が付与されたことになるわけだ。

　なお、NumericUpDownコントロールのそのほかのプロパティを設定する場合、（NumericUpDownコントロールではなく）関連付けたTextBoxコントロールのプロパティとして設定する必要がある点に注意してほしい。本稿の場合であれば、TextBoxコントロールのプロパティ・ウィンドウに「numud（NumericUpDownExtender）」という項目が追加されているので、この項目の配下から個々のプロパティ値を設定する。

　ここでは、取りあえず最低限必要な設定として、Stepプロパティに値を増減する場合の増分／差分値を、Widthプロパティに表示幅を設定しておくことにしよう。ただし、Widthプロパティの値は、アップダウン・ボタン単体ではなくTextBoxコントロールの幅との総計値である点に注意してほしい（従って、アップダウン・ボタン自体の幅である25未満の値を本プロパティに指定することはできない）。この値は、後述するTargetButtonDownID／TargetButtonUpIDプロパティが指定された場合には無視される。

　以上で一連の手順は完了だ。作成したサンプル・プログラムを実行し、冒頭の画面のような動作を確認できれば、まずは成功だ。

●自前のアップダウンを設定する方法

　もっとも、これだけでは面白くないので、以下ではNumericUpDownで利用可能ないくつかの機能についても見てみることにしよう。

　まずはNumericUpDownコントロールが自動で生成するボタンではなく、自身で配置したボタン系コントロールをアップダウン・ボタンとして利用する方法だ。

［減］ボタンをクリック

変更したサンプル・アプリケーションの実行結果

［増］［減］ボタンをそれぞれアップダウン・ボタンとして利用する。

　先ほど作成したNumericUpDown.aspxを以下のように変更してみよう。

NumericUpDown.aspxのフォーム・レイアウト（変更）

プロパティの設定内容は以下のとおり。

コントロール（ID） プロパティ 設定値 Button（btnUp） Text 増 Button（btnDown） Text 減 NumericUpDownExtender（numud） TargetButtonDownID btnDown TargetButtonUpID btnUp

　NumericUpDownコントロールのTargetButtonDownID／TargetButtonUpIDプロパティは、それぞれアップダウン・ボタンの役割を果たすボタン系コントロールのID値を指定するものだ。TargetButtonDownID／TargetButtonUpIDプロパティを指定した場合、NumericUpDownコントロールはアップダウン・ボタンを自動生成する代わりに、指定されたボタンに対してアップダウン機能を付与するというわけだ。

　なお、TargetButtonDownID／TargetButtonUpIDプロパティを指定した場合には、先述したようにNumericUpDownコントロールのWidthプロパティは無視されるので注意すること。

●任意の文字列リストを使って増減を表現する方法

　NumericUpDownコントロールでは、数値の増減を表現できるだけではない。あらかじめ文字列リストを用意しておくことで、そのリスト内の項目を順に表示するテキストボックスを作成することも可能だ。

［▲］ボタンをクリック

変更したサンプル・アプリケーションの実行結果

アップダウン・ボタンをクリックすることで、月の和名を順に表示できる。

　これを行うには、最初に作成したNumericUpDown.aspxに対して追加でRefValuesプロパティを指定するだけだ。指定値は以下のとおり。

睦月;如月;弥生;卯月;皐月;水無月;文月;葉月;長月;神無月;霜月;師走

　文字列リスト（RefValuesプロパティ）はセミコロン（;）区切りで任意の数だけ列挙が可能だ。

●XML Webサービス・メソッドから前後の値を取得する方法

　値リストはRefValuesプロパティで静的に指定するばかりではない。XML Webサービス・メソッドから動的に前後の値を取得することも可能だ。

　以下で示すサンプルは、それぞれRandomクラス（System名前空間）で動的に生成した0〜指定値の乱数値を現在値に対して加算／減算してみる例だ。

［▲］ボタンをクリック

XML Webサービス・メソッドから前後の値を取得するサンプル

アップダウン・ボタンをクリックすることで、0〜指定値の範囲内の乱数で値を増加／減少する。

　それでは具体的な実装手順を見てみよう。

1. 新規のXML Webサービス・クラスを定義する

　まずは、現在の値に対して、指定した値未満の乱数を加算／減算した後の値を返すためのXML Webサービス・クラスを用意する。

　以下に具体的なASP.NET Webサービス（.asmxファイル）のコードを示す。

<%@ WebService Language="C#" Class="NumericUpDown" %> using System; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Web.Script.Services; [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ScriptService()] public class NumericUpDown : System.Web.Services.WebService {   [WebMethod()]   public int NextValue(int current, String tag){     // tagパラメータによる指定値未満の値を     // 現在値（currentパラメータ）に加算     Random rnd = new Random(DateTime.Now.Millisecond);     return current + rnd.Next(Int32.Parse(tag));   }   [WebMethod()]   public int PrevValue(int current, String tag){     // tagパラメータによる指定値未満の値を     // 現在値（currentパラメータ）から減算     Random rnd = new Random(DateTime.Now.Millisecond);     return current - rnd.Next(Int32.Parse(tag));   } } <%@ WebService Language="VB" Class="NumericUpDown" %> Imports System.Web Imports System.Web.Services Imports System.Web.Services.Protocols Imports System.Web.Script.Services <WebService(Namespace:="http://tempuri.org/")> _ <WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _ <ScriptService()> _ Public Class NumericUpDown   Inherits System.Web.Services.WebService   <WebMethod()> _   Public Function NextValue(ByVal current As Integer, ByVal tag As String) As Integer      ' tagパラメータによる指定値未満の値を      ' 現在値（currentパラメータ）に加算     Dim rnd As New Random(DateTime.Now.Millisecond)     Return current + rnd.Next(tag)   End Function   <WebMethod()> _   Public Function PrevValue(ByVal current As Integer, ByVal tag As String) As Integer      ' tagパラメータによる指定値未満の値を      ' 現在値（currentパラメータ）から減算     Dim rnd As New Random(DateTime.Now.Millisecond)     Return current - rnd.Next(tag)   End Function End Class

前後の値を取得するためのXML Webサービス・クラス（NumericUpDown.asmx）（上：C#、下：VB）

　サンプル・アプリケーションの大まかな流れについては、コード内のコメントを参照していただくとして、ここで注目していただきたいのは、以下の2点だ（なお、ここではXML Webサービス・クラスそのものの記法については割愛する。詳細については、「MSDN：ASP.NETを使用したXML Webサービス」を参照していただきたい）。

（1）XML Webサービス・クラスにはScriptService属性を付与する

　ScriptService属性（System.Web.Script.Services名前空間）は、該当のXML Webサービス・クラスがクライアント側スクリプトから呼び出し可能であるかどうかを表すものだ。

　NumericUpDownコントロールは（ほかの多くのExtender系のコントロールと同様に）内部的に自動生成したJavaScript経由でサーバ側のXML Webサービスと非同期通信を行うので、通信先となるXML Webサービス・クラスでは必ずScriptService属性を付与する必要がある。

（2）サービス・メソッドのパラメータ名、戻り値の型は固定

　NumericUpDownコントロールにおいて、サービス・メソッドの名前は自由に決めることができるが（ここではNextValue／PrevValue）、戻り値のデータ型、および、パラメータの名前／データ型は完全に固定であり、アプリケーション開発者が変更することはできない。

　つまり、いかなる場合にもサービス・メソッドは以下のシグニチャに従う必要がある。C#／Visual Basic（VB）いずれを利用しているかにかかわらず、パラメータの名前は大文字／小文字まで厳密に区別されるので、注意してほしい。

[WebMethod()] public int NextValue(int current, string tag) <WebMethod()> _ Public Function NextValue(ByVal current As Integer, ByVal tag As String) As Integer

次の値を取得するためのサービス・メソッドのシグニチャ（上：C#、下：VB）

[WebMethod()] public int PrevValue(int current, string tag) <WebMethod()> _ Public Function PrevValue(ByVal current As Integer, ByVal tag As String) As Integer

前の値を取得するためのサービス・メソッドのシグニチャ（上：C#、下：VB）

　サービス・メソッドがパラメータを介して受け取るのは、テキストボックス上の現在の値（currentパラメータ）、処理を識別するための任意のキー値（tagパラメータ）だ。tagパラメータには、NumericUpDownコントロールのTagプロパティで指定された値がセットされる。後述するように、本稿では増減の最大値を表す値をセットしておくものとする。

　tagパラメータは、サービス・メソッドを複数のNumericUpDownコントロールから共有して利用する場合に、処理を分岐させるためのキーとして利用することも可能だ。もちろん、特にキー値が必要ない場合にはTagプロパティは省略しても構わない。

2. NumericUpDownコントロールのプロパティ値を設定する

　あとは、サービス・メソッドを呼び出すための関連付け情報をNumericUpDownコントロールに対して設定するだけだ。最初に作成したNumericUpDown.aspx上のNumericUpDownコントロールに対して以下のプロパティ設定を追加する。

プロパティ	設定値
ServiceDownMethod	PrevValue
ServiceDownPath	NumericUpDown.asmx
ServiceUpMethod	NextValue
ServiceUpPath	NumericUpDown.asmx
NumericUpDownコントロールのプロパティ設定（追加のみ）

　ServiceDownMethodおよびServiceUpMethodプロパティには、XML Webサービスのサービス・メソッド名を指定する。

■

　以上、NumericUpDownコントロールで利用可能な諸プロパティの利用方法について紹介してきた。アップダウン・ボタンを生成するだけのごくシンプルなコントロールであるが、プロパティ設定によってさまざまなパターンでのアップダウン機能を実装できることがお分かりいただけたのではないかと思う。

　最後に、本稿で登場したNumericUpDownコントロールの主要なプロパティを表にまとめておく。

プロパティ名	概要
TargetControlID	関連付けるTextBoxコントロールのID値
Width	表示幅（TextBoxコントロールとアップダウン・ボタンの合計サイズ。TargetButtonDownID／TargetButtonUpIDプロパティの指定時は無視される）
RefValues	NumericUpDownコントロールで利用する文字列リスト（セミコロン区切り）
Step	数値を増減する際の増分／減分（デフォルトは1）
TargetButtonDownID	減少ボタンを表すコントロールのID値
TargetButtonUpID	増加ボタンを表すコントロールのID値
ServiceDownPath	減少ボタンをクリックしたときに呼び出される「.asmx」ファイル
ServiceUpPath	増加ボタンをクリックしたときに呼び出される「.asmx」ファイル
ServiceDownMethod	減少ボタンをクリックしたときに呼び出されるWebサービス・メソッド
ServiceUpMethod	増加ボタンをクリックしたときに呼び出されるWebサービス・メソッド
Tag	任意のパラメータ値（Webサービス・メソッドに引き渡すカスタム・パラメータ）
NumericUpDownコントロールの主なプロパティ

　いま一度、サンプル・アプリケーションと照らし合わせながら、自分でアップダウン・ボタンを実装する際の参考にしていただきたい。

利用可能バージョン：.NET Framework 2.0のみ カテゴリ：Webフォーム　処理対象：ASP.NET AJAX 使用ライブラリ：NumericUpDownコントロール 使用ライブラリ：ScriptService属性（System.Web.Script.Services名前空間） 関連TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？

この記事と関連性の高い別の.NET TIPS ［ASP.NET AJAX］DynamicPopulateコントロールでXML Webサービスを非同期に呼び出すには？ ［ASP.NET AJAX］AutoCompleteコントロールでGoogleサジェスト風なオートコンプリート機能を実装するには？ ［ASP.NET AJAX］ダイナミック・コンテキスト機能でポップアップ・コントロールの内容を動的に生成するには？ ［ASP.NET AJAX］Sliderコントロールでスライダを定義するには？ ［ASP.NET AJAX］SlideShowコントロールでスライドショー機能を実装するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）