取消UpdatePanel更新,防止多次提交

说明:

当在.Net的UpdatePanel,执行更新操作,会遇到网路延迟导致用户无意多次点击更新按钮(也包括有意的),

数据库中会出现多条同样的数据....这样偏离了用户操作的实现结果...

此代码避免了这样情况的发生...

 

 

      注释下JS脚本...会出现数据库添加多条数据....

 

 

准备:

      数据库名称Temp,表名:PRM,字段:AutoID(自增主键),CreateTime(默认当前时间),CName

 

 

Default.aspx

 

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %> <!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> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="false" DisplayAfter="0"> <ProgressTemplate> <div id="load" style="color:Red;" mce_style="color:Red;">Loading...</div> </ProgressTemplate> </asp:UpdateProgress> <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label><br /> <asp:Button ID="btnLogin" runat="server" Text="登 陆" OnClick="btnLogin_Click" Width="84px" /> </ContentTemplate> </asp:UpdatePanel> <mce:script type="text/javascript" language="javascript"><!-- var lastPostBackButtonid = null; //上一次提交的按钮 Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest( function (sender,e) { //获取 PageRequestManager 实例 var prm = Sys.WebForms.PageRequestManager.getInstance(); //判断是否正在处理回发 if(prm.get_isInAsyncPostBack()) { //判断是否与前一次提交的按钮相同 if(lastPostBackButtonid==e.get_postBackElement().id) { //不可重复发起优先的刷新,取消此次异步刷新 e.set_cancel(true); } return; } lastPostBackButtonid = e.get_postBackElement().id; }); // --></mce:script> </div> </form> </body> </html>

 

 

Defautl.aspx.cs

 

using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Threading; using System.Data.SqlClient; public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btnLogin_Click(object sender, EventArgs e) { string sql = "insert into PRM (CName) values('AAA')"; SqlCommand cmd = new SqlCommand(sql); cmd.Connection = new SqlConnection("Data Source=127.0.0.1;database=Temp;uid=sa;pwd=sa"); cmd.CommandType = CommandType.Text; cmd.Connection.Open(); cmd.ExecuteNonQuery(); cmd.Connection.Close(); Thread.Sleep(5000); } }

 

 

-----------------------------------------------------------------------------

 

下面这种方式,当点击按钮后,按钮消失,会出现Loading的图片....让用户无法再次点击

 

Default.aspx.cs

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %> <!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> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label><br /> <asp:Button ID="btnLogin" runat="server" Text="登 陆" OnClick="btnLogin_Click" Width="84px" OnClientClick="ClickBtnLogin()" Height="26px" /> <asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="false" DisplayAfter="0"> <ProgressTemplate> <%--<div id="load" style="color: Red;" mce_style="color: Red;"> Loading...</div>--%> <asp:Image ID="Image1" runat="server" Width="84px" ImageUrl="~/images/loading2.gif" Height="26px" /> </ProgressTemplate> </asp:UpdateProgress> </ContentTemplate> </asp:UpdatePanel> <div style=""> </div> <mce:script type="text/javascript" language="javascript"><!-- function ClickBtnLogin() { $get("btnLogin").style.display = "none"; } // --></mce:script> </div> </form> </body> </html>

 

你可能感兴趣的:(取消UpdatePanel更新,防止多次提交)