關於Asp.Net中避免用戶連續屢次點擊按鈕，重複提交表單的處理

時間 2019-11-19

標籤關於 asp.net asp 避免用戶連續屢次點擊按鈕重複提交表單處理欄目 ASP 简体版

原文原文鏈接

Web頁面中常常碰到這類問題,就是客戶端屢次點擊一個按鈕或者連接,致使程序出現不可預知的麻煩.javascript

客戶就是上帝,他們也不是有意要給你的系統形成破壞,這麼作的緣由很大一部分是由於網絡慢,點擊一個操做以後,系統響應慢,因而點擊屢次.若是咱們遇到這種狀況,css

也許是同樣的操做方法,因此解決問題纔是王道.html

廢話很少說,直接切入正題.java

方法一:在客戶端製做一個遮罩層.web

即用js和css製做一個純白色或者黑色的遮罩的div,當客戶端點擊按鈕時,彈出這個div並覆蓋在當前用戶界面之上,服務器

這樣遮罩層下面的內容被屏蔽,用戶就沒法進行鼠標的屢次點擊操做.網絡

優勢:一個好的遮罩層具備很美觀的UI感覺,而且相對下降一點用戶等待服務器響應的枯燥度.測試

缺點:遮罩下面的內容,若是用鍵盤操做,好比Enter鍵,仍是能夠操做的哦.(親,這也是後來測試中才發現的,也許還有更好的遮罩層的代碼,可以作到這些吧,我是沒有用過).this

遮罩層代碼再也不給出,能夠在網上搜索使用.spa

方法二:用js代碼判斷重複提交,給出提示並拒絕提交至服務器.

前臺代碼:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<script type="text/javascript">
    //記錄是否重複提交表單數據
    var repeatFlag = false;
    function CheckRepeatClick() {
        if (repeatFlag == false) {
            repeatFlag = true;
            return true;
        }
        else {
            alert("數據處理中,請稍候...");
            return false
        }
    }
</script>
<body>
    <form id="form1" runat="server">
    <div>
         這只是個測試網頁
        <asp:Button ID="btnOK" runat="server" OnClick="btnOK_Click" Text="OK" OnClientClick="return CheckRepeatClick();"/>

<asp:LinkButton ID="lkbtnOK" runat="server" onclick="lkbtnOK_Click" OnClientClick="return CheckRepeatClick();" >測試LinkButton按鈕</asp:LinkButton>
    </div>
    </form>
</body>
</html>
後臺代碼:
 
        protected void btnOK_Click(object sender, EventArgs e)
        {

           System.Threading.Thread.Sleep(5000); //這裏只是爲了模擬後臺相應慢的一個動做,替換成你本身的處理邏輯就OK了

        }

效果:當單擊OK按鈕後,提交請求至服務器，再次單擊按鈕，則彈出消息"數據處理中，請稍候..."。
對於LinkButton按鈕的測試也是一樣道理.
代碼很簡單，不過多說明。
優勢：方法一中的缺點在這裏獲得了彌補。
缺點：方法一的優勢這裏沒有了。
因此，將方法一和方法二同時使用，則相對完美一些啦，哈哈，我就是這麼使用的。
方法三：單擊按鈕後,用js將按鈕置爲不可用狀態,避免用戶屢次單擊.
前臺代碼:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" EnableEventValidation="false" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<script type="text/javascript">
    //記錄是否重複提交表單數據
    var repeatFlag = false;
    function CheckRepeatClick() {
        if (repeatFlag == false) {
            repeatFlag = true;
            return true;
        }
        else {
            alert("數據處理中,請稍候...");
            return false
        }
    }
</script>
<body>
    <form id="form1" runat="server">
    <div>
         這只是個測試網頁
        <asp:Button ID="btnOK" runat="server" OnClick="btnOK_Click" Text="OK" />
        <asp:LinkButton ID="lkbtnOK" runat="server" onclick="lkbtnOK_Click" >測試LinkButton按鈕</asp:LinkButton>
    </div>
    </form>
</body>
</html>
後臺代碼:

        protected void Page_Load(object sender, EventArgs e)
        {
            this.btnOK.Attributes.Add(" onclick ", ClientScript.GetPostBackEventReference
                (btnOK, " Click ") + " ;this.disabled=true; this.value='提交中...'; ");
 
            this.lkbtnOK.Attributes.Add(" onclick ", ClientScript.GetPostBackEventReference
                 (lkbtnOK, " Click ") + " ;this.disabled=true; ");
        }
 
        protected void btnOK_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000); //這裏只是爲了模擬後臺相應慢的一個動做,替換成你本身的處理邏輯就OK了
        }
 
        protected void lkbtnOK_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000);
        }

效果:當單擊按鈕OK後,按鈕自己更改成灰色不可用,並更改文本爲"提交中..."，這時候再次單擊按鈕，沒法向服務器發送請求，從而屏蔽了重複提交，
當服務器響應第一次請求完畢後，按鈕恢復爲可用狀態和本身的文本。(對於LinkButton呢，我想說的是，同樣能夠變成灰色，可是它是可用的，再次
單擊，仍然會向服務器發送請求)
優勢：直接變成灰色不可用，比起再次單擊一下而後給你個提示信息，要友好一些吧。
缺點：對於LinkButton該方法不湊效。
由於在項目中還要使用較多的LinkButton，因此果斷放棄了該方法。
由於LinkButton生成的客戶端頁面中，是<a>標籤，嘗試使用diplay等進行修飾，都沒有成功。若是有哪位大大有好的方法，不妨告知。
注意:前臺頁面的Page中要加上這句話 EnableEventValidation="false" 緣由你懂得

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。