asp.net表單提交時防重復(fù)提交并執(zhí)行前臺的JS驗(yàn)證
更新時間：2013年10月25日 17:14:21 作者：
今天遇到這樣的一個情況，就是用戶重復(fù)提交。當(dāng)然這個不能怪用戶，只能怪.NET或者服務(wù)器反應(yīng)遲鈍，下面有個不錯的教程，大家可以參考下
在項(xiàng)目開發(fā)中，遇到這樣的一個情況，就是用戶重復(fù)提交。當(dāng)然這個不能怪用戶，只能怪.NET或者服務(wù)器反應(yīng)遲鈍......我是這樣理解的。
在網(wǎng)上搜了一下，解決方案是不少，比如：
http://bbs.csdn.net/topics/340048988
（這個大家提了不少建議）
http://www.cnblogs.com/blsong/archive/2009/12/24/1631144.html
（這個基本上總結(jié)了網(wǎng)上的方法）
但實(shí)際上做互聯(lián)網(wǎng)web項(xiàng)目中，需要在前臺執(zhí)行JS或者Jquery的驗(yàn)證（主要是增強(qiáng)用戶體驗(yàn)），那么再使用上面的方法，就會出現(xiàn)問題。要么重復(fù)提交依然存在，要么前臺JS驗(yàn)證失效。最后沒辦法，只有自己寫一個，在滿足阻止用戶重復(fù)提交的情況下，還能保證前臺JS驗(yàn)證有效。代碼如下：
//按鈕注冊加載樣式事件
var ItSelfButton;
var ControlRegPostResult = true;
function AddInputClick() {
$("input[type='submit']").click(function () {
ItSelfButton = $(this);
if (ItSelfButton.attr("repeat") == null) {
var btnDiv = $("<div>");
btnDiv.attr("id", "Mask_BTN");
var divimg = $("<img>");
divimg.attr("alt", "加載中...");
divimg.attr("src", "/Images/ButtonLoading.gif");
divimg.css({ "margin-left": ($(this).width() - 4) / 2, "margin-top": ($(this).height() - 16) / 2 });
btnDiv.append(divimg);
btnDiv.css({ width: $(this).width() + 12 + "px", height: $(this).height() + "px", top: $(this).offset().top + "px", left: $(this).offset().left + "px", position: "absolute" });
$(document.body).append(btnDiv);
setTimeout(MaskTimeOutRemove, 200);
}
});
}
$(function () {
AddInputClick();
});
$(window).resize(function () {
if (ItSelfButton != null) {
$("#Mask_BTN").css({ top: ItSelfButton.offset().top + "px", left: ItSelfButton.offset().left + "px" });
}
});
function MaskRemove() {
$("#Mask_BTN").remove();
}
function MaskTimeOutRemove() {
if (!ControlRegPostResult) {
$("#Mask_BTN").remove();
ControlRegPostResult = true;
}
}
其中在JS 驗(yàn)證失敗中將
ControlRegPostResult = false;
這樣基本上滿足我的目的了。
ButtonLoading.gif 可以是一個打轉(zhuǎn)的圖片 ，也可以和按鈕一樣大。反正目的是這個層把按鈕遮住。
在網(wǎng)上搜了一下，解決方案是不少，比如：
http://bbs.csdn.net/topics/340048988
（這個大家提了不少建議）
http://www.cnblogs.com/blsong/archive/2009/12/24/1631144.html
（這個基本上總結(jié)了網(wǎng)上的方法）
但實(shí)際上做互聯(lián)網(wǎng)web項(xiàng)目中，需要在前臺執(zhí)行JS或者Jquery的驗(yàn)證（主要是增強(qiáng)用戶體驗(yàn)），那么再使用上面的方法，就會出現(xiàn)問題。要么重復(fù)提交依然存在，要么前臺JS驗(yàn)證失效。最后沒辦法，只有自己寫一個，在滿足阻止用戶重復(fù)提交的情況下，還能保證前臺JS驗(yàn)證有效。代碼如下：
復(fù)制代碼 代碼如下:
//按鈕注冊加載樣式事件
var ItSelfButton;
var ControlRegPostResult = true;
function AddInputClick() {
$("input[type='submit']").click(function () {
ItSelfButton = $(this);
if (ItSelfButton.attr("repeat") == null) {
var btnDiv = $("<div>");
btnDiv.attr("id", "Mask_BTN");
var divimg = $("<img>");
divimg.attr("alt", "加載中...");
divimg.attr("src", "/Images/ButtonLoading.gif");
divimg.css({ "margin-left": ($(this).width() - 4) / 2, "margin-top": ($(this).height() - 16) / 2 });
btnDiv.append(divimg);
btnDiv.css({ width: $(this).width() + 12 + "px", height: $(this).height() + "px", top: $(this).offset().top + "px", left: $(this).offset().left + "px", position: "absolute" });
$(document.body).append(btnDiv);
setTimeout(MaskTimeOutRemove, 200);
}
});
}
$(function () {
AddInputClick();
});
$(window).resize(function () {
if (ItSelfButton != null) {
$("#Mask_BTN").css({ top: ItSelfButton.offset().top + "px", left: ItSelfButton.offset().left + "px" });
}
});
function MaskRemove() {
$("#Mask_BTN").remove();
}
function MaskTimeOutRemove() {
if (!ControlRegPostResult) {
$("#Mask_BTN").remove();
ControlRegPostResult = true;
}
}
其中在JS 驗(yàn)證失敗中將
復(fù)制代碼 代碼如下:
ControlRegPostResult = false;
這樣基本上滿足我的目的了。
ButtonLoading.gif 可以是一個打轉(zhuǎn)的圖片 ，也可以和按鈕一樣大。反正目的是這個層把按鈕遮住。
相關(guān)文章
ASP.NET2.0使用Enter Key作為默認(rèn)提交問題分析(附源碼)
這篇文章主要介紹了ASP.NET2.0使用Enter Key作為默認(rèn)提交,結(jié)合實(shí)例形式分析了ASP.NET2.0使用Enter Key默認(rèn)提交的注意事項(xiàng)與相關(guān)實(shí)現(xiàn)技巧,并附上源碼供讀者參考,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細(xì)介紹了WPF實(shí)現(xiàn)簡單的跑馬燈效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
.NET6使用ImageSharp實(shí)現(xiàn)給圖片添加水印
這篇文章主要為大家詳細(xì)介紹了.NET6使用ImageSharp實(shí)現(xiàn)給圖片添加水印功能的相關(guān)資料，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-12-12
ASP.NET?MVC使用Knockout獲取數(shù)組元素索引的2種方法
這篇文章介紹了ASP.NET?MVC使用Knockout獲取數(shù)組元素索引的2種方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
在?.NET?平臺使用?ReflectionDynamicObject?優(yōu)化反射調(diào)用的代碼詳解
這篇文章主要介紹了在?.NET?平臺使用?ReflectionDynamicObject?優(yōu)化反射調(diào)用代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
下面是本人對常用對話框使用的匯總，希望對大家有所幫助，同時也歡迎大家補(bǔ)充。2013-07-07
一說到Cookie我想大家都應(yīng)該知道它是一個保存在客戶端，當(dāng)瀏覽器請求一個url時，瀏覽器會攜帶相關(guān)的Cookie達(dá)到服務(wù)器端,需要的朋友可以了解下2012-12-12
asp.net中一次性動態(tài)綁定多個droplistdown
asp.net中一次性動態(tài)綁定多個droplistdown的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-10-10
這篇文章主要介紹了.NET邏輯分層架構(gòu)，分層架構(gòu)的三個基本層次分別為：表示層、業(yè)務(wù)邏輯層和數(shù)據(jù)訪問層，感興趣的小伙伴們可以參考一下2015-11-11
the sourcesafe database has been locked by the administrator
今天早上打開soucesafe的時候出現(xiàn)提示：“the sourcesafe database has been locked by the administrator"。仔細(xì)想想， 可能是前天晚上用"f:\analyze.exe" -I- -DB -F -V3 -D "f:\vssData\data" 命今分析的時候鎖定了database2009-04-04