导航

避免user多次點擊按鈕

Posted on 2010-07-30 09:49  杨彬Allen  阅读(207)  评论(0)    收藏  举报

當一個事件處理的時間較長，我們又不想用戶多次點擊按鈕。這時可以用一個遮罩層遮住頁面，避免用戶再次點擊按鈕，同時層上可以用一個圖片提示用戶：“數據正在處理中，請稍後...”

1.建立一個usercontrol.可以重複使用.

uc:on_loading 
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="on_loading.ascx.cs" Inherits="UC_on_loading_on_loading" %>
<style type="text/css">
#showBox {
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 99;
      width: 100%;
      height: 100%;
      }
#msleft {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1002;
      width: 100%;
      height: 100%;    
      }
#alphaBox {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1000;
      width: 100%;
      height: 100%;    
      background: #000;
      filter:alpha(opacity=30);     /* IE */ 
      opacity: 0.6;     /* 支持CSS3的浏览器（FF 1.5也支持）*/
      -moz-opacity: 0.6; /* Moz + FF */ 
      }
#content {
      color: #416f02;
      margin: 0 auto;
      margin-top: 220px;
      width: 300px;
      height: 50px;
      border: 1px solid #3C3C3C; 
      background-color: #fff;
      }
#content a { color: #416f02;text-Decoration:none; }
#content a:hover { color: #c00; }

.h1 { font-size: 14px; color: #c00; text-align: center; }
.intro{ color: #c27006; font-size: 12px; text-align: center;}
.close { text-align: right; height: 20px; margin: 20px 20px 0 0; }
</style>

<div id="showBox" style="display:block;">
    <div id="msleft">
        <div id="content">
            <span class="h1"><strong>數據處理中...</strong></span>
            <br />
            <table>
                <tr>
                    <td>
                        <asp:Image ID="Image1" ImageUrl="~/UC/on_loading/on_loading29.gif" runat="server" />
                    </td>
                    <td>
                        <input id="cmdCancel" onclick="AbortPostBack()" type="button" value="Cancel" />
                    </td>
                </tr>
            </table>
        </div> 
    </div>
    <div id="alphaBox"></div>
</div>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);

function InitializeRequest(sender, args)
{
    if(prm.get_isInAsyncPostBack())
    {
        args.set_cancel(true);
    }
}

function AbortPostBack()
{
    if(prm.get_isInAsyncPostBack())
    {
        prm.abortPostBack();
    }
}
</script>

 

2。配置前臺，記得要拉一個ScriptManager,我們這裡用ajax的progresstemplate...

 

HTML 
<%@ Register src="UC/on_loading/on_loading.ascx" tagname="on_loading" tagprefix="uc1" %>


<!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">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
       
        
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>     
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>   
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button1" />
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                         <uc1:on_loading ID="on_loading1" runat="server" />
                    </ProgressTemplate>
                </asp:UpdateProgress>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:Button ID="Button2" runat="server" Text="Button2" onclick="Button2_Click" />
    </div>
    </form>
</body>
</html>

3.後臺測試：

 

後臺 
    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(4000);
        TextBox1.Text = "11";
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(4000);
        TextBox1.Text = "22";
    }