现在的位置: 首页 > 综合 > 正文

Asp.net 用UpdateProgress加载数据显示进度条

2013年08月14日 ⁄ 综合 ⁄ 共 1756字 ⁄ 字号 评论关闭

背景:在做asp.net项目时,遇到页面打开加载数据的时候,如果数据加载过慢,就会导致页面出现空白,在网上也查找了一些资料,都是用的js模拟的,查找了一阵子,未果。

所以自己思考了下,自己写了个。

实现原理:

页面中添加一个UpdatePanel,里面添加updateProgress,并在这里添加加载时候的动画页面,在updatePanel里面添加一个按钮,模拟点击事件。尴尬晕了,快说不明白了,直接上代码吧,代码如下:

前台代码:

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

<!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">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title></title>    
    <link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>    
    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
        }       
        #upLoading{height:2px}        
    </style>
 <script type="text/javascript">
     window.onload = function () {
         $("#LoadData").click();
     }
 </script>
</head>
<body>
    
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="upLoading" runat="server">
    <ContentTemplate>
          <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="upLoading">
              <ProgressTemplate>
                <img src="Images/loadinfo.gif" />正在加载数据...
              </ProgressTemplate>
         </asp:UpdateProgress>
        <asp:Button ID="LoadData" runat="server" Text="Button" onclick="LoadData_Click" style="display:none"/>
    </ContentTemplate>  
    </asp:UpdatePanel>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="allData" runat="Server" visible="false">
                   编写控件绑定数据
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

后台代码:

 protected void LoadData_Click(object sender, EventArgs e)
        {
            
            if (Request.QueryString.Count > 0)
            {
               //绑定数据
                BindData();
                allData.Visible = true;
            }
        }

总结:一句话就是在在updatePanel里面添加按钮,在加载的时候执行按钮事件获取数据,

觉得这种方法还是不大好,如有更好的方法请说下大笑

抱歉!评论已关闭.