2010-05-21 45 views
8

我有一個asp.net應用程序,我想要禁用按鈕,只要他們被點擊,以防止多次提交。我想使用jquery,因爲該站點已經寬鬆地使用它。在.net應用程序中使用jquery禁用按鈕回發.net應用程序

我已經試過是:

$(document).ready(function() { 
    $("#aspnetForm").submit(function() { 
     $('input[type=submit]', $(this)).attr("disabled", "disabled"); 
    }) 
}); 

以上將禁用按鈕,頁面提交,但在單擊處理asp.net按鈕永遠不會被調用。簡單地刪除上述和按鈕正常工作。

有沒有更好的方法?或者,相反,我做錯了什麼?

UPDATE 好的,我終於有一點時間把一個非常簡單的頁面放在一起。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SubTest.aspx.cs" Inherits="MyTesting.SubTest" %> 

<!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> 
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#form1").submit(function() { 
       $('input[type=submit]', $(this)).attr("disabled", "disabled"); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" /> 
     <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Button 2" /> 
    </div> 
    </form> 
</body> 
</html> 

後面的代碼看起來像:

using System; 

namespace MyTesting { 
    public partial class SubTest : System.Web.UI.Page { 
    protected void Page_Load(object sender, EventArgs e) { 
     if (IsPostBack) { 
      // this will execute when any button is pressed 
      Response.Write("postback"); 
     } 
    } 
     protected void Button1_Click(object sender, EventArgs e) { 
     // never executes 
      System.Threading.Thread.Sleep(1000); 
      Response.Write("Button 1 clicked<br />"); 
     } // method::Button1_Click 

     protected void Button2_Click(object sender, EventArgs e) { 
     // never executes 
      System.Threading.Thread.Sleep(1000); 
      Response.Write("Button 2 clicked<br />"); 
     } // method::Button2_Click 
    } 
} 

當你點擊一個按鈕,它顯然是禁用的按鈕,但無論是按鍵的點擊中運行。

渲染HTML

<!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><title> 

</title> 
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#form1").submit(function() { 
       $('input[type=submit]', $(this)).attr("disabled", "disabled"); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form name="form1" method="post" action="SubTest.aspx" id="form1"> 
<div> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTcxODU4OTc0MWRkParC5rVFUblFs8AkhNMEtFAWlU4=" /> 
</div> 

<div> 

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKB57WhCAKM54rGBgK7q7GGCC6LlWKFoij9FIBVuI0HOVju/fTy" /> 
</div> 
    <div> 
     <input type="submit" name="Button1" value="Button" id="Button1" /> 
     <input type="submit" name="Button2" value="Button 2" id="Button2" /> 
    </div> 
    </form> 
</body> 
</html> 
+0

非常有趣gotchya – 2010-05-28 21:37:12

+0

,我想我現在知道究竟發生了什麼事情。因爲禁用了按鈕屬性,所以asp.net引擎會說:「哦,按鈕被禁用,請不要運行它的回發代碼!」但是,由於提交已發送,它會繼續執行並執行常規回發... grr – NotMe 2010-05-28 21:44:24

回答

1

我只是想牛逼o增加一個額外的決議。我們決定在點擊按鈕後將其完全刪除,並將其替換爲一些文本。

要做到這一點,我們做的:

$(function() { 
    $(".DisableButton").click(function() { 
     $(this).hide(); 
     $(this).after('<p>Please Wait. Retrieving information. This may take up to 60 seconds.</p>'); 

    }); 
}); 

注意這個隱藏按鈕,然後注入這些按鈕的代碼後,一些HTML。隱藏它允許.Net繼續,並在回發期間運行onclick處理程序,同時將其作爲屏幕上的可點擊事物移除。

+0

謝謝,這是我見過的最簡單的答案。 – 2014-02-10 20:08:58

7

你可以做到這一點的方式略有不同,像這樣:

$(function() { 
    $("#aspnetForm").submit(function() { 
    $('input[type=submit]').click(function() { return false; }); 
    }); 
}); 

這樣做是使未來的點擊是無效的,基本上讓他們一籌莫展。當您禁用輸入時,它也會刪除與<form>一起提交的鍵/值對,因此您所觸發的服務器端操作不起作用。

值得一提的,在的jQuery 1.4.3你就可以縮短這個下來:如果你有你的頁面變得複雜,對ASP.NET驗證控件

$(function() { 
    $("#aspnetForm").submit(function() { 
    $('input[type=submit]').click(false); 
    }); 
}); 
+0

我正在運行1.4.2。第一個似乎並沒有停止多個按鈕按下; – NotMe 2010-05-21 03:26:53

+0

@Chris - 你可以發佈你的標記嗎?您是否使用提交按鈕或可能的鏈接? – 2010-05-21 09:44:22

+0

@Nick Craver:終於有機會發布一些標記 – NotMe 2010-05-28 20:46:07

0

。但是,這並前已回答:Disable button on form submission

+0

我試過了。我收到一個編譯錯誤:名稱'ClientScript'在當前上下文中不存在。如果我拿出引用'ClientScript'的行,那麼該按鈕被禁用,但它永遠不會提交 – NotMe 2010-05-21 03:21:29

+0

你是在一個控件而不是頁面中嘗試這個嗎?如果是這樣,則需要引用頁面上的ClientScript屬性,例如'Page.ClientScript.GetPostBackEventReference(btnSubmit,string.Empty)'。 – jrummell 2010-05-23 02:20:16

+0

它在一個頁面中,沒有驗證。只是用標記更新了我的答案。 – NotMe 2010-05-28 20:45:47

2

提交之前禁用按鈕的方法有兩個作用: -

一)該按鈕呈現禁用的外觀。

b)該按鈕的值不張貼在表單參數中。

如果按鈕的值沒有發佈到服務器,ASP.Net不知道哪個按鈕被按下,因此它不運行相關的OnClick處理程序。

要驗證以下內容添加到您的代碼背後

protected void Page_Load(object sender, EventArgs e) 
{ 
    Response.Write("Load " + IsPostBack + "<br />"); 
    foreach (string s in Request.Form.AllKeys) 
    { 
     Response.Write(string.Format("s:'{0}' = {1}<br />", s, Request.Form[s])); 
    } 
} 

然後運行該頁面(都與J.S.禁用按鈕和無)。 如果按鈕的值沒有發佈到服務器,ASP.Net不知道哪個按鈕被按下,因此它不運行相關的OnClick處理程序。

+0

+1這是我的發現。如你所說,這是一個有趣的gotchya。 – NotMe 2010-05-28 22:45:05

2

只是另一種觀察。或者,你可以用一個不錯的覆蓋忙信息來鎖定用戶界面。

的Mark-了一部分:

$(function() { // when document has loaded 

    ($.unblockUI); //unlock UI 

    //Show busy message on click event and disable UI 
    $('#btnHelloWorld').click(function() { 
    $.blockUI({ message: '<h4><img src="busy.gif" />Please wait...</h4>' }); 

    }); 

}); 

<asp:Button ID="btnHelloWorld" runat="server" Text="Hello World" /><br/> 

後面的代碼:

Protected Sub btnHelloWorld_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnHelloWorld.Click 
     Label1.Text = "Hello World" 
     Threading.Thread.Sleep(5000) 
    End Sub 

退房jQuery BlockUI Plugin

+0

有趣的方法。我必須嘗試這個。 – NotMe 2011-03-09 16:27:00

0

這個屬性添加到您的按鈕:

usesubmitbehavior="False" 

這將插入類似以下內容的onclick:

javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$Main$Tabs$SaveTab$Cancel", "", true, "", "", false, false)) 

此代碼將導致一個回即使按鈕被禁用。顯示一個確認對話框,並允許後回到被取消變得更有趣:

var click = $("[id$='_Cancel']")[0].onclick; 
    $("[id$='_Cancel']")[0].onclick = null; 
    $("[id$='_Cancel']").bind('click', function (event) { addFeeSchedule.onCancelClick(event) }); 
    $("[id$='_Cancel']").bind('click', click); 

爲了防止背部後立即從發生,除去由.NET插入的onclick代碼後自己將它綁定函數使用jQuery。使用event.stopImmediatePropagation(),防止回發:

onCancelClick: function (event) { 

    var confirmResponse; 

    confirmResponse = confirm('No fee schedule will be created.\n\nAre you sure you want to cancel?'); 

    if (confirmResponse == true) { 

     showWait(); 
     event.target.disabled = 'true'; 

    } else { 

     event.stopImmediatePropagation(); 

    } 

}, 
-3

對於這一點,你必須使用輸入按鈕屬性禁用由尼克提供的所有控件

<script language="javascript" type="text/javascript"> 
    function MyDisableFunction() { 
     alert(`Now You Postback Start`); 
     $(":input").attr("disabled", true); 
     return true; 
    } 

</script> 

富勒更詳細覈查this link

+1

此處不接受個人博客推廣.. – rahularyansharma 2012-10-02 11:42:38

0

答案Craver是迄今爲止我在網上找到的最好的解決方案。但是,有一種情況是解決方案效果不好 - 當表單包含UpdatePanel中的提交按鈕並將其UpdateMode屬性設置爲「有條件」並且/或者ChildrenAsTriggers屬性設置爲false時。

在這些情況下,當異步回發完成時,更新面板的內容不會自動刷新。所以如果這些更新面板包含任何提交按鈕,那麼給定的解決方案將實際上將這些按鈕永久禁用。

下增強該解決方案通過重新啓用按鈕異步後,或「部分」處理這個問題,回傳:

var canProcessClicks = true; 

if (typeof (Sys) != 'undefined') { 
    // handle partial-postback 
    var requestManager = Sys.WebForms.PageRequestManager.getInstance(); 
    requestManager .add_initializeRequest(function() { 
     // postback started 
     canProcessClicks = false; 
    }); 
    requestManager .add_endRequest(function() { 
     // postback completed 
     canProcessClicks = true; 
    }); 
} 

$(function() { 
    $('input[type=submit]').on("click", function() { 
     return canProcessClicks ; 
    }); 
    $("#aspnetForm").submit(function() { 
     if (typeof (Sys) != 'undefined' && Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) { 
      // this is an async postback so ignore because this is already handled 
     } else { 
      // full postback started 
      canProcessClicks = false; 
     } 
    }); 
});