jQueryを使用して[注文]ボタンがダブルクリック(二重注文)されるのを防止する
ASP.NETの環境でWebフォーム(Webページ)をWebサーバーに送信(Post Back)させる方法には、ブラウザ経由とASP.NET経由の２種類あります。
ユーザーがWebフォームから[注文]ボタンをクリックしたときに二重注文を防ぐには、
[注文]ボタンをクリックした時点でボタンを無効(disabled)にします。
ただし、注文ボタンを無効にするとWebフォームがブラウザからポストバックされないのでASP.NET経由でポストバックさせる必要があります。
このサンプルでは[注文]ボタンを無効にする方法とASP.NET経由でWebフォームをポストバックさせる方法について解説します。
作成手順
-
VS2019(Visual Studio 2019 or Visual Studio 2022)を起動したら新規のWebフォーム「Article007.aspx」を作成します。
Webフォームのヘッダータグ内「<head>...</head>」にSCRIPTタグを追加してjQueryの最新のライブラリーを取り込みます。
ここではjQuery 3.6.0のライブラリーを取り込んでいます。
Article007.aspx:
<head runat="server">
<title>JavaScript/jQuery: jQueryを使用して[注文]ボタンをダブルクリック(二重注文)するのを防止する</title>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
</head>
-
WebフォームにHTMLのTABLEタグを追加して「Command」「HeaderRow.Col1」「HeaderRow.Col2」「HeaderRow.Col3」の列からなる表を作成します。
VS2019のツールボックスからButtonコントロールをドラッグ＆ドロップして表の「Command」の列に配置します。
ButtonにCssClassプロパティを追加して「btnOrder」を設定します。Textプロパティには「Order」を設定します。
OnCommandイベント、CommandArgumentプロパティ、CommandNameプロパティを追加します。
CommandArgumentには商品名(Item1)、CommandNameには「Order」を設定します。
これらの情報はOnCommandイベントに渡されます。
さらにButtonにUseSubmitBehaviorプロパティを追加して「false」を設定します。
UseSubmitBehaviorプロパティのデフォルトは「true」に設定されています。
このプロパティが「true」のときWebフォームはブラウザからポストバックされます。
「false」のときWebフォームはASP.NET経由でポストバックされます。
Buttonを無効(Disabled)にするとブラウザからポストバックされないので「false」を設定してASP.NET経由でポストバックされるようにします。
同様の手順で表の２行目から３行目にButtonを配置します。
Article007.aspx:
<table border="1" class="listView" runat="server">
<tr class="listViewHeader">
<th>Command</th>
<th class="listViewSortUp">HeaderRow.Col1</th>
<th>HeaderRow.Col2</th>
<th class="listViewSortDown">HeaderRow.Col3</th>
</tr>
<tr>
<td class="alignCenter">
<asp:Button runat="server" CssClass="btnOrder" Text="Order"
UseSubmitBehavior="false"
OnCommand ="btnOrder_Command" CommandArgument="Item1" CommandName="Order" />
</td>
<td>Item1.Row1.Col1</td>
<td>Item1.Row1.Col2</td>
<td>Item1.Row1.Col3</td>
</tr>
=== 省略 ===
<tr>
<td class="alignCenter">
<asp:Button runat="server" CssClass="btnOrder" Text="Order"
UseSubmitBehavior="false"
OnCommand ="btnOrder_Command" CommandArgument="Item10" CommandName="Order" />
</td>
<td>Item10.Row10.Col1</td>
<td>Item10.Row10.Col2</td>
<td>Item10.Row10.Col3</td>
</tr>
</table>
-
Webフォームのヘッダータグ内「<head>...</head>」にSCRIPTタグを追加して、jQueryのコードを追加します。
jQueryの「$('input.btnOrder').click()」では表に配置した注文ボタンにクリック時のイベントを登録しています。
クリックのイベントでは、ASP.NETのLabelコントロール「lblMessage」のTextプロパティを書き換えています。
TextプロパティをHTMLのIMGタグとテキスト文字「Processing Your Order... Please wait 3 seconds !」で書き換えることにより処理中を示すGIFアニメーションとテキスト文字が表示されます。
詳細はLive DEMOでご覧ください。
jQueryの「$(this).attr('disabled', 'disabled')」では注文Buttonのdisabled属性に「disabled」を設定してボタンを無効にしています。
これでボタンはクリックできない状態になります。ボタンのクリック時のイベントから戻るとASP.NET経由でWebフォームがポストバックされます。
NOTE: ASP.NETのButtonコントールに「UseSubmitBehavior="false"」を設定するとHTMLの「input type="button"」タグに変換されてonclickイベントが追加されます。
ボタンをクリックするとクリックイベントが実行されてJavaScriptの「__doPostBack()」が実行されます。これでWebフォームがASP.NET経由でポストバックされます。
参考までに「UseSubmitBehavior="true"」を設定するとHTMLの「input type="submit"」タグに変換されてブラウザがWebフォームをポストバックします。
Article007.aspx:
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
<input type="button" name="ctl17" value="Order" onclick="javascript:__doPostBack('ctl17','')" class="btnOrder" />
Article007.aspx:
<asp:Label ID="lblMessage" ForeColor="Red" runat="server" CssClass="lblMessage" Text="Welcome to JavaScript/jQuery..." />
<script type="text/javascript">
$(function () {
$('input.btnOrder').click(function () {
$('.lblMessage').html('<img src="img/Article007/progress.gif" /> Processing Your Order... Please wait 3 seconds !');
$(this).attr('disabled', 'disabled');
});
});
</script>
-
VS2019からWebフォーム(Article007.aspx)のコードビハインド(Article007.aspx.cs)を開いたら、注文ボタンのOnCommandイベントを追加します。
このイベントでは引数「CommandEventArgs」のCommandNameプロパティをチェックして「Order」ならCommandArgumentプロパティから商品名(Item1,...)を取得しています。
SleepSeconds(3)関数では３秒間スリープしています。
そして、メッセージ領域に配置したLabel「lblMessage」のTextプロパティに「Your Order (Item1) has been processed succussfully!」を設定しています。
ブラウザにWebフォームが送信されるとWebフォームにメッセージが表示されます。そして注文ボタンは初期化されて有効(Enabled)になりクリックできる状態に戻ります。
Article007.aspx:
<asp:Label ID="lblMessage" ForeColor="Red" runat="server" CssClass="lblMessage" Text="Welcome to JavaScript/jQuery..." />
<asp:Button runat="server" CssClass="btnOrder" Text="Order"
UseSubmitBehavior="false"
OnCommand ="btnOrder_Command" CommandArgument="Item1" CommandName="Order" />
Article007.aspx.cs:
protected void btnOrder_Command(object sender, CommandEventArgs e)
{
if (e.CommandName == "Order")
{
string strItem = (string)e.CommandArgument; // Item1, Item2, Item3,...
SleepSeconds(3);
lblMessage.Text = String.Format("Your Order({0}) has been processed successfully !", strItem);
}
}
private void SleepSeconds(int intSeconds)
{
int intMilliSeconds = 1000 * intSeconds;
System.Threading.Thread.Sleep(intMilliSeconds);
}
操作手順と処理の流れ
-
商品を注文するには注文(Order)ボタンをクリックします。
注文ボタンをクリックするとボタンのクリックイベント（クライアント側）が発生します。
クライアント側のクリックイベントでは、メッセージ領域に処理中のメッセージを表示します。
それから注文ボタンを無効(Disabled)にしてASP.NET経由でWebフォームをポストバックさせます。
-
WebフォームがポストバックされてWebサーバーにコントロールが移動します。
そして、注文ボタンのクリックイベント（サーバー側）が発生します。
サーバー側のクリックイベントでは、３秒間スリープしてからメッセージ領域に注文完了のメッセージを設定してブラウザに送信します。
-
ブラウザはWebサーバーから送信されたWebフォームをロードして表示します。
これでWebフォームのメッセージ領域に注文処理完了のメッセージが表示されます。
そして注文ボタンが初期化されて有効状態(クリックできる状態)に戻ります。
-
実際のデータベースと連動したASP.NETのサンプルについては
「Article017」のライブデモをご覧ください。
-
「Live DEMO」を実行するときはWebフォーム先頭に配置されている「説明文の表示」のトグルボタンをオフ(チェック)にして「説明文」を非表示にしてください。
これで「Live DEMO」のメッセージも見れる状態になります。