ASP .Net提交時禁用Button

 

今天遇到一種小情況,想要在.net的服務器控件asp:button按下去時通過OnClientClick進行客戶端處理,成功就提交到後臺,提交後button變灰,disabled=true。但問題來了,在 OnClientClick="return check();",js函數check如果設置button..disabled = true,將不再提交。

 

上網查了很多資料,最後總結了一下,成功完成。

1、設置asp:button屬性UseSubmitBehavior="false",這樣button type將變成“button”,而不是默認的“submit”;

2、js函數中調用__doPostBack進行提交,這步很關鍵,__doPostBack可以讓客戶端的js觸發服務器端的事件(頁面會回發),網上很多的教程都沒有這部,可能他們都不是在OnClientClick做驗證處理,不需要return的原因。

下面這兩段代碼可以參考下。

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebTest.aspx.cs" Inherits="DoubleClick.WebTest" %> 
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4.  
  5.  
  6. <html xmlns="http://www.w3.org/1999/xhtml" > 
  7. <head id="Head1" runat="server"> 
  8.     <title>Untitled Page</title> 
  9.     <script type="text/javascript"> 
  10.  
  11.     function check() { 
  12.         if (document.getElementById("TextBox1").value == "") { 
  13.             alert("空"); 
  14.             return false; 
  15.         } else { 
  16.             document.getElementById("Button4").disabled = true
  17.             __doPostBack('Button4', ''); 
  18.             return true; 
  19.         } 
  20.     } 
  21.     </script> 
  22. </head> 
  23. <body> 
  24.     <form id="form1" runat="server" > 
  25.     <div> 
  26.         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
  27.         <asp:Button ID="Button4" UseSubmitBehavior="false" runat="server" Text="My" OnClientClick="return check();" OnClick="Button1_Click" /> 
  28.     </div> 
  29.     </form> 
  30. </body> 
  31. </html> 


 

  1. public partial class WebTest : System.Web.UI.Page 
  2.     { 
  3.         protected void Page_Load(object sender, EventArgs e) 
  4.         { 
  5.         } 
  6.  
  7.         protected void Button1_Click(object sender, EventArgs e) 
  8.         { 
  9.             Response.Write(TextBox1.Text); 
  10.             System.Threading.Thread.Sleep(2000); 
  11.         } 
  12.     } 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章