例えば、「更新ボタン」。更新ボタンが押下された場合、サーバー処理を行う前にユーザーに対して「入力された内容で更新します。よろしいですか?」と聞きたい場合などですね。 そんな時は、そのボタンに対してクライアント側で動作するスクリプトを埋め込みたいものです。
その方法と注意点をいくつか紹介します。
ボタンにjavascriptを追加してダイアログを表示して見ましょう。
画面初期化処理に以下のようなコードを追加します。
Me.btnUpdate.Attributes.Add("onclick", "javascript:return window.confirm('更新しておっけー?');")
window.confirmの結果をreturnするスクリプトですね。
この場合、「いいえ」が選択されるとfalseが返されるので、ボタンイベントはクライアントレベルでキャンセルされサーバー処理は行われなくなります。
ただし、重要な注意点があります。
上記では、更新ボタンを例として挙げましたが、更新ボタンとか登録ボタンというのは、往々にしてCausesValidationプロパティはTrueに設定されているものです。
この場合、ASP.NETが下記のような属性を自動的に付加してHTMLを返します。
onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); "
これに加えて先ほどの例のコードを追加すると返されるHTMLは下記のようになります。
onclick="javascript:return window.confirm('更新しておっけー?');if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); "
コードを見てわかるようにこれではバリデーションチェックが実行されません。(確認ダイアログの結果をreturnするだけになってしまう)
そこで、CausesValidationプロパティがTrue、かつ、確認ダイアログを表示したいという場合は、下記のようにします。
Me.btnUpdate.Attributes.Add("onclick", "javascript:if (window.confirm('更新しておっけー?')==false) return false; ")
言葉で言うと「確認画面で”いいえ”が選択された場合は、falseを返す。」という感じでしょうか。
こうすると、確認画面で”はい”が選択された場合は、次のステートメント(バリデーションチェックを呼び出すスクリプト)が実行されるようになります。
※注
当ブログのTipsは、@IT等の情報サイトの内容を参考にして構成された記事
もあります。Tipsの内容に著作権等権利を侵害する内容があった場合には、
告知して下さい。早急に訂正または削除にて対応したいと思います。
画面初期化処理に以下のようなコードを追加します。
Me.btnUpdate.Attributes.Add("onclick", "javascript:return window.confirm('更新しておっけー?');")
window.confirmの結果をreturnするスクリプトですね。
この場合、「いいえ」が選択されるとfalseが返されるので、ボタンイベントはクライアントレベルでキャンセルされサーバー処理は行われなくなります。
ただし、重要な注意点があります。
上記では、更新ボタンを例として挙げましたが、更新ボタンとか登録ボタンというのは、往々にしてCausesValidationプロパティはTrueに設定されているものです。
この場合、ASP.NETが下記のような属性を自動的に付加してHTMLを返します。
onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); "
これに加えて先ほどの例のコードを追加すると返されるHTMLは下記のようになります。
onclick="javascript:return window.confirm('更新しておっけー?');if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); "
コードを見てわかるようにこれではバリデーションチェックが実行されません。(確認ダイアログの結果をreturnするだけになってしまう)
そこで、CausesValidationプロパティがTrue、かつ、確認ダイアログを表示したいという場合は、下記のようにします。
Me.btnUpdate.Attributes.Add("onclick", "javascript:if (window.confirm('更新しておっけー?')==false) return false; ")
言葉で言うと「確認画面で”いいえ”が選択された場合は、falseを返す。」という感じでしょうか。
こうすると、確認画面で”はい”が選択された場合は、次のステートメント(バリデーションチェックを呼び出すスクリプト)が実行されるようになります。
※注
当ブログのTipsは、@IT等の情報サイトの内容を参考にして構成された記事
もあります。Tipsの内容に著作権等権利を侵害する内容があった場合には、
告知して下さい。早急に訂正または削除にて対応したいと思います。