处理时的遮罩层-控件的妙用，基于微软ajax框架

来源：互联网发布：重庆助赢软件编辑：程序博客网时间：2024/06/05 21:04

遮罩层与基础ajax控件已经封装在一个用户控件，使用方便。
使用的页面的代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Src="webtools/AjaxSetup.ascx" TagName="AjaxSetup" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <uc1:AjaxSetup ID="AjaxSetup1" runat="server" />
        <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="Button" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Button1_Click执行的为一个处理事件，我使用一个循环做的测试：
    protected void Button1_Click(object sender, EventArgs e)
    {
        long start = DateTime.Now.Ticks;
        for (int i = 0; i < 1000000000; i++)
        {
            ;
        }
        TextBox1.Text = (DateTime.Now.Ticks - start).ToString();
    }

关键的用户控件代码如下：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AjaxSetup.ascx.cs" Inherits="webtools_AjaxSetup" %>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<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: 240px;
      height: 60px;
      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>

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
<div id="showBox" style="display:none;">
      <div id="msleft">
          <div id="content">
              <span class="h1"><strong>数据处理中</strong></span>
              <br />
              <span style="text-align: center;"><img src="<%=url %>images/loading.gif" /></span>
              <br />
              <span class="intro">技术支持：<a href="http://losingrose.cnblogs.com" target="_blank">losingrose.cnblogs.com</a></span>
          </div>
      </div>
      <div id="alphaBox"></div>
</div>
<script type="text/javascript">

</script>
    </ProgressTemplate>
</asp:UpdateProgress>

最终效果如下图所示：