目次 > 第3章 サンプルアプリケーション構築 > 3.2 二重押下防止
3.2 二重押下防止
概要
本節では、Server Frameworkが提供する二重押下防止機能を用いて、ボタンのクリックイベント実行中に再度ボタンがクリックされることを防止する方法を学習する。
二重押下防止機能を有効にすると、ボタンをクリックしたタイミングで自動的にJavaScriptが働き、画面に存在するすべてのボタンを無効化する処理が行われる。なお、画面ごとに二重押下防止を行うかどうかの切り替えもできる。しかし、ブラウザの設定でJavaScriptが無効にされると、この機能は動作しないので注意すること。詳細は、機能説明書『WA-03 二重押下防止機能』を参照のこと。
動作イメージ
図3.2-1 動作イメージ
- 対象画面
- ログオン画面(LogonForm.aspx)
- メニュー画面(MenuForm.aspx)
- 処理概要
- (クライアント)ログオン画面でログオンボタンを押下する。
- (クライアント)ログオンボタンが無効化される。
作業手順
- 作成イメージ
1. Web構成ファイルの設定
Web構成ファイル(Web.config)でコメントアウトされている二重押下防止機能(PreventDoubleSubmitImplクラス)のコメントアウトを解除し、設定を有効にする。
Web.config
<httpModules> <!-- 画面遷移機能の設定 --> <add name="TransitionListenerImpl" type="TERASOLUNA.Fw.Web.HttpModule.TransitionListenerImpl, TERASOLUNA.Fw.Web"/> <!-- 画面遷移保障機能の設定 <add name="TokenProcessorImpl" type="TERASOLUNA.Fw.Web.HttpModule.TokenProcessorImpl, TERASOLUNA.Fw.Web"/> --> <!-- 二重押下防止機能の設定--> <add name="PreventDoubleSubmitImpl" type="TERASOLUNA.Fw.Web.HttpModule.PreventDoubleSubmitImpl, TERASOLUNA.Fw.Web"/> <!-- エラー画面遷移機能の設定 --> <add name="ExceptionTransitionListerImpl" type="TERASOLUNA.Fw.Web.HttpModule.ExceptionTransitionListenerImpl, TERASOLUNA.Fw.Web"/> </httpModules>
動作確認前準備
ボタンを押してすぐに別画面に遷移するとボタンが無効化されたかどうか確認できないので、ここではログオンボタンのクリックイベントにスレッドをスリープさせるコードを追加する。動作確認が終了したら、スレッドをスリープさせるコードは削除すること。
LogonForm.aspx.cs
/// <summary> /// ログオン処理を行う。 /// </summary> /// <param name="sender">イベントのソース。</param> /// <param name="e">イベントデータを格納している<see cref="EventArgs"/>。</param> protected void ButtonLogon_Click(object sender, EventArgs e) { // スレッドをスリープさせる System.Threading.Thread.Sleep(3000); // ユーザIDが"tera"、パスワードが"soluna"の場合、 // ログオン成功とみなしメニュー画面への遷移を行う。 if ("tera".Equals(TextBoxUserId.Text) && "soluna".Equals(TextBoxPassword.Text)) { WebUtils.Transit("MenuForm"); } else { // ログオンに失敗した場合、エラーメッセージを表示する LabelLogonError.Visible = true; } }
動作確認
- サーバアプリケーションを起動する(TutorialServerWebプロジェクトの発行)。
- ブラウザのアドレス欄のURLに「http://localhost/tutorialServerWeb/Form/LogonForm.aspx」を入力し、移動ボタンをクリックし、正常にログオン画面が表示されることを確認する。
- ログオン画面でユーザID "tera"、パスワード "soluna" と入力し、ログオンボタンを押下する。
- ログオンボタンが無効化され、2回目以降のクリックができないことを確認する。
図3.1-2 二重押下できないことの確認