Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

入力処理機能を持ったWebページを作成する

InputMan for ASP.NET 3.0J の検証アクションエクステンダ、マスク、メッセージボックスコントロールを使ったWebページの作成

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

 今回はInputMan for ASP.NET 3.0J の機能の中で、メッセージボックスを使った入力処理、マスクコントロールを使った入力処理、検証アクションエクステンダを使った入力処理、の3つの入力処理を持ったWebページを作成してみました。

はじめに

 前回(.NETコンポーネントを利用して入力エラーチェック機能を持ったWebページを作成する)は、InputMan for ASP.NET 3.0Jの検証コントロールを使ったWebページを作成しましたが、入力処理にはまだまだいろいろな方法があります。

 特に、入力時に正しいデータを入力してもらうようにする機能を組み込んでおけば、その後のエラー処理が楽になります。

 そこで、今回はInputMan for ASP.NET 3.0Jの機能の中で「メッセージボックスを使った入力処理」「マスクコントロールを使った入力処理」「検証アクションエクステンダを使った入力処理」の3つの入力処理を持ったWebページを作成してみました。

入力文字数の不足をメッセージボックスで表示
入力文字数の不足をメッセージボックスで表示
メッセージボックスのボタンのイベント処理が可能
メッセージボックスのボタンのイベント処理が可能
マスクコントロールで入力値を制限する
マスクコントロールで入力値を制限する
入力エラーをバルーンと文字色で表示
入力エラーをバルーンと文字色で表示
入力エラーをバルーン、文字色、アイコンの点滅で表示
入力エラーをバルーン、文字色、アイコンの点滅で表示

対象読者

 Visual Basic/Visual C# 2008を使ってプログラムを作ったことのある人

必要な環境

 Visual Basic 2008、Visual C# 2008、Visual Studio 2008 SP1でプログラムが作れる環境、およびIISなどのASP.NETが動作できるWebサーバ。また、.NET Framework 3.5 SP1がインストールされていることが必須条件です。

 なお、本プログラムはWindows Vista上で動作するVisual Studioを使用して作成し、IIS6.0 Webサーバ上でInternet Explorer 8を使って動作確認を行っています。

※注

 本記事で紹介しているコントロールは、Visual Basic 2005、Visual C# 2005、Visual Studio 2005では動作しませんので注意してください。

サンプルプログラム実行時の注意事項

 Visual Studio 2008に、InputMan for ASP.NET 3.0Jトライアル版をインストールし、ソースコード圧縮ファイル「myinput_vb_src.zip」または「myinput_cs_src.zip」を解凍して作成されるプロジェクトファイルをVisual Studioで開き、実行させてください。

コントロールのインストール

 はじめてInputMan for ASP.NET 3.0Jを使用する方は、プロジェクトにInputMan for ASP.NET 3.0Jをインストールする必要があります。

 インストーラは、グレープシティのWebページからユーザー情報を登録します。ダウンロード用のURLとトライアル版プロダクトキーが記載されているメールが送られてきますので、ここからダウンロードしてインストールしてください。ファイルはzip形式で圧縮されています。

 制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールの追加

 InputMan for ASP.NET 3.0Jをインストールしたら、ツールボックスに専用のタブを作成し、コントロールを追加します。追加するコントロールは、「.NET Frameworkコンポーネント」の「名前空間」が「GrapeCity.Web.Input」で始まる「ValidatorAction」「Mask」「MessageBox」「CharacterTypeValidator」コントロールの4つです。

「名前空間」が「GrapeCity.Web.Input」で始まる「ValidatorAction」「Mask」「MessageBox」「CharacterTypeValidator」コントロールを選択する
「名前空間」が「GrapeCity.Web.Input」で始まる「ValidatorAction」「Mask」「MessageBox」「CharacterTypeValidator」コントロールを選択する

Webページの作成

 今回作成するWebページは、次のような構成です。各コントロールのプロパティ設定は、このあとの記事の中で説明していきます。

Webページの構成
Webページの構成

MessageBoxコントロールについて

 InputMan for ASP.NET 3.0Jには、JavaScriptのalert、confirmおよびpromptメソッドにより表示される各種ダイアログと同様のダイアログを、サーバ側コントロールとして表示できる「メッセージボックス(MessageBox)」コントロールがあります。

 このコントロールを使うと、入力エラーをWindowsフォームと同じようにメッセージボックスで表示させることができます。

 使用できるメッセージボックスのタイプは次の3種類で、Windowsフォームのようにいくつものタイプのメッセージボックスを表示できるわけではありませんが、押されたボタンに応答してイベント処理を実行させることができます。

MessageBoxコントロールで使用できるメッセージボックスのタイプ(ヘルプファイルより抜粋)
MessageBoxコントロールで使用できるメッセージボックスのタイプ(ヘルプファイルより抜粋)

 使い方は簡単で、WindowsフォームのMessageBoxクラスと同様、Showメソッドを実行します。引数は2つで、メッセージ文字列と表示させるメッセージボックスのタイプをDialogType列挙型のメンバで指定します。

DialogType列挙体のメンバ
メンバ名 説明
0 - Alert Javascriptのalertメソッドで表示される警告メッセージボックスを表示します。
1 - Confirm Javascriptのconfirmメソッドで表示される確認メッセージボックスを表示します。
2 - Prompt JavascriptのPromptメソッドで表示される入力メッセージボックスを表示します。

メッセージボックスを使った処理

 今回は、パスワードを設定するテキストボックスを例にとり、このメッセージボックスを使ってみました。TextBoxはMaxLengthを「8」文字に設定し、8文字以上入力できないようにしていますが、「6文字以上」という最低文字数の制限は設定できないため、6文字未満しか入力されなかった場合にメッセージボックスで警告を表示させます。

 処理は、「入力」ボタンのClickイベントハンドラで行い、StringクラスのLengthプロパティを使用してTextBoxの入力データから文字数を取得し、文字数が6未満であればAlertタイプのメッセージボックスを表示します。

 そして、6文字以上入力されていれば、確認のメッセージボックスを表示します。これは、「OK」「キャンセル」の2つのボタンを持ったConfirmタイプのメッセージボックスを使います。

Visual Basic
Imports GrapeCity.Web.Input.Core

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
        Dim pass As String = Me.TextBox1.Text

        If pass.Length < 6 Then
            MessageBox1.Show("文字数が不足しています。", DialogType.Alert)
        ElseIf pass.Length >= 6 Then
            MessageBox1.Show("この内容でよろしいですか?。", DialogType.Confirm)
        End If

    End Sub
C#
using GrapeCity.Web.Input.Core;

namespace valid_web_cs
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Button1_Click(object sender, EventArgs e)
        {
            string pass = TextBox1.Text;

            if(pass.Length < 6){  
                MessageBox1.Show("文字数が不足しています。", DialogType.Alert);
            }
            else if (pass.Length >= 6)
            {
                MessageBox1.Show("この内容でよろしいですか?。", DialogType.Confirm);
            }
        }

MessageBoxコントロールのイベント処理

 MessageBoxコントロールがWindowsフォームのMessageBoxクラスと違うのは、メッセージボックスのボタンが押された時の処理です。MessageBoxクラスでは押されたボタンの種類がShowメソッドの戻り値で返されましたが、MessageBoxコントロールではMessageBoxコントロールのResponseイベントハンドラで処理を行うことになります。

 Confirmタイプのメッセージボックスでは、「OK」と「キャンセル」のどちらのボタンが押されたのかによって処理を振り分けます。

 ユーザーがメッセージボックスの[OKボタン]を押すと、MessageBoxコントロールにはResponseイベントが発生します。そして、[OKボタン]が押されるとこのイベントパラメータのConfirmedプロパティにTrueが設定されます。

 そこで、まず[OKボタン]が押されたのかどうかをチェックし、押されたのであれば設定した旨のAlertタイプのメッセージボックスを表示し、TextBoxコントロールを無効にして入力できないようにします。[キャンセルボタン]が押された場合は何もせず、再度パスワードの入力を受けつけます。

Visual Basic
Protected Sub MessageBox1_Response(ByVal sender As Object, ByVal e As GrapeCity.Web.Input.IMMessageBox.ResponseEventArgs) Handles MessageBox1.Response
    If e.DialogType = DialogType.Confirm Then
        If e.Confirmed Then
            MessageBox1.Show("パスワードを設定しました", DialogType.Alert)
            Me.TextBox1.Enabled = False
        End If
    End If
End Sub
C#
protected void MessageBox1_Response(object sender, GrapeCity.Web.Input.IMMessageBox.ResponseEventArgs e)
{
    if (e.DialogType == DialogType.Confirm)
    {
        if (e.Confirmed)
        {
            MessageBox1.Show("パスワードを設定しました", DialogType.Alert);
            TextBox1.Enabled = false;
        }
    }
}

Maskコントロールを使った入力処理

 Maskコントロールを使ってあらかじめ入力書式を設定し、その書式のデータ以外の入力を受けつけないようにできます。このコントロールの特徴は、コードを一切書かずにプロパティの設定だけで入力データに制限を設けることができるようになっている点です。

 Maskコントロールでは、入力欄が空欄の際に表示するプロンプト文字列を設定でき、また大文字小文字を自動的に変換する機能を持っています。

 書式設定では、デフォルトで電話番号と郵便番号入力の書式が設定されていますが、独自の書式を設定することもできます。書式設定は簡単で、Maskコントロールのスマートタグから[書式を設定]を選び、ダイアログで書式を設定します。

 また、[AutoConvertを有効にする]にチェックがあれば、大文字・小文字の自動変換が行われます。[AutoPostBackを有効にする]を使うと、コントロールの値が変更されてフォーカスを失ったときに、自動的にサーバにポストバックするかどうかを設定できます。

 Maskコントロールに入力された値を取得するには、ValueプロパティまたはTextプロパティを参照します。Textプロパティは、リテラル文字列とプロンプト文字を含んだ値を、Valueプロパティはリテラル文字列とプロンプト文字列を除いたコントロール内の文字列を、取得または設定できます。

 例えば、Maskコントロールに「〒 111-2222」と入力されているときは、Textプロパティにはそのまま「〒 111-2222」が格納され、Valueプロパティの値は「1112222」となります。 

書式設定ダイアログ
書式設定ダイアログ

文字種検証コントロール(CharacterTypeValidatorコントロール)を使った処理

 前回の記事では、テキストボックスの入力にEditコントロールを使用し、特定の文字種だけしか入力を受けつけないように入力文字に制限を加えましたが、ASP.NET標準のTextBoxコントロールを使用し、入力文字種のチェックを行うこともできます。

 InputMan for ASP.NETの検証コントロールの1つに、CharacterTypeValidatorコントロールがあります。このコントロールは、ユーザーがコントロールに入力した文字の文字種を検証できます。

 使い方は、まずページにTextBoxコントロールを配置し、その横にCharacterTypeValidatorコントロールを配置します。そして、CharacterTypeValidatorコントロールの「ControlToValidate」プロパティでTextBoxコントロールのオブジェクト名を設定します。これで、2つのコントロールが関連付けられます。

 次に、CharacterTypeValidatorコントロールの「CharacterSet」プロパティで、対象のTextBoxコントロールに入力可能な文字種を次のキーワードで設定します。

入力書式に設定するキーワード
全角 半角 説明
A A 大文字のアルファベット(A~Z)
a 小文字のアルファベット(a~z)
K K カタカナ(促音・拗音の小書き表記あり)
9 9 数字(0~9)
# 数字および数字関連記号(0~9、+ - $ % \ , .)
@ 記号
B B 2進数(0または1)
X X 16進数(0~9、A~F)
J - ひらがな(促音・拗音の小書き表記あり)
Z - 空白文字以外のすべての全角文字
- H 空白文字以外のすべての半角文字
N N カタカナ(促音・拗音の小書き表記なし)
G - ひらがな(促音・拗音の小書き表記なし)
- ^ 指定した書式に含まれないすべての文字
T - サロゲート ペア文字
D - 空白文字以外の2バイト文字(サロゲート ペア文字、空白文字を除いた全角文字)
S S 空白文字

 そして、CharacterTypeValidatorコントロールの「ErrorMessage」プロパティに、設定した文字種以外の文字が入力された場合のエラーメッセージを設定します。

検証アクションエクステンダを使った処理

 検証アクションエクステンダを使うと、さらにいろいろな形で入力エラーをユーザーに示すことができます。

 検証アクションエクステンダ(ValidatorAction)は、検証コントロールにさまざまな検証結果の通知方法を拡張するコントロールで、InputMan for ASP.NETの各コントロールだけではなく、Visual Studio標準の検証コントロールにも適用できます。

 追加される検証アクションは、次の3種類です。

1.色によるエラー通知

 ColorNotifyクラスを使用して、エラー検出時にコントロールの背景色や文字色を変更することで、エンドユーザーにエラーを通知できます。ColorNotifyクラスでは、次のプロパティを設定できます。

プロパティ 説明
InvalidBackColor 不正値が入力されたときの背景色
InvalidForeColor 不正値が入力されたときの文字色
ValidBackColor 正しい値が入力されたときの背景色
ValidForeColor 正しい値が入力されたときの文字色
色によるエラー通知(ヘルプファイルより抜粋)
色によるエラー通知(ヘルプファイルより抜粋)

2.バルーンチップによるエラー通知

 TipNotifyクラスを使用して、エラー検出時にバルーンチップの表示によって、エンドユーザーにエラーを通知できます。TipNotifyクラスでは、次のプロパティを設定できます。

プロパティ 説明
ToolTipIcon バルーンチップに表示するアイコンの種類
ToolTipSpan バルーンチップが自動的に閉じるまでの時間間隔
ToolTipText バルーンチップに表示する文字列
ToolTipTitle バルーンチップのタイトル文字列
バルーンチップによるエラー通知(ヘルプファイルより抜粋)
バルーンチップによるエラー通知(ヘルプファイルより抜粋)

3.アイコンによるエラー通知

 IconNotifyクラスを使用して、エラー検出時にアイコンの表示によって、エンドユーザーにエラーを通知できます。IconNotifyクラスでは、次のプロパティを設定できます。

プロパティ 説明
BlinkRate アイコンの点滅間隔
BlinkStyle アイコンの点滅動作の種類
Icon 表示するアイコン
IconAlignment アイコンとアイコンを表示するコントロールとの位置関係
IconPadding アイコンとアイコンを表示するコントロールとの間隔
IconTip マウスポインタがアイコン上にあるときに表示するツールチップ文字列
アイコンによるエラー通知(ヘルプファイルより抜粋)
アイコンによるエラー通知(ヘルプファイルより抜粋)

 使い方は、検証アクションエクステンダをWebフォームに配置すると、Webフォーム上にある各検証コントロールのプロパティページにValidatorAction1のValidateActionなどといったプロパティが追加されます。

 このプロパティをクリックすると、「検証動作の編集」というダイアログが表示されるので、ここで設定したい検証アクションを追加・編集します。1つの検証コントロールに複数のアクションを設定できます。

 ここでは、最初の検証コントロール「CharacterTypeValidator1」に色とバルーンのアクションを、もう1つの検証コントロール「CharacterTypeValidator2」に色とバルーン、アイコンのアクションを設定しました。

 エラーによって表示されたこれらのアクションは、正しい値が入力されれば取り消されますが、ValueProcessクラスを使用して、コントロールに入力された値が不正なときに、この値をどのように処理するかを設定できます。

 不正入力値の処理は、ValueProcessクラスのValueProcessOptionプロパティにValueProcessOption列挙体のメンバを設定します。設定は、同じく「検証動作の編集」ダイアログを使用し、次のいずれかの値を設定します。

プロパティの値 説明
Keep 入力された値を保持
Clear 入力された値を消去
Restore 変更前の値に戻す
「検証動作の編集」ダイアログ
「検証動作の編集」ダイアログ

まとめ

 ユーザーに正確な入力を行わせるには、的確な表示とエラーの指摘が重要になってきます。InputMan for ASP.NET 3.0Jのこれらの機能を使用すれば、入力段階での防御、入力後のエラー通知を的確にかつ視覚的に行わせることができます。

 昨今は、Webページでのデータ入力が頻繁に行われているので、入力処理の重要性が増してきていますから、このようなコンポーネントを導入することで効率よくアプリケーションを開発できるのではないでしょうか。

製品情報

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

修正履歴

  • 2010/02/16 22:03 「サンプルプログラム実行時の注意事項」を一部修正しました。

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5