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

原创 2012年05月21日 15:56:13


背景:在做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里面添加按钮,在加载的时候执行按钮事件获取数据,

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

相关文章推荐

UpdateProgress控件

9.4 UpdateProgress控件 在现实的网络中,当我们打开某一个网站或链接时,由于种种原因经常要等待页面显示出来,这样的用户体验真的很差。如果能在页面执行较长时间操作的同时,给用户提供一个...

使用UpdateProgress控件实现加载进度条

                      var prm = Sys.WebForms.PageRequestManager.getInstance();  function Cancel()  {...

asp.net页面加载前进度条

  • 2011年04月06日 16:55
  • 3KB
  • 下载

在ASP.NET中将Excel文件中数据导入数据库并显示进度条

在ASP.NET中经常会遇到Excel文件导入数据库的问题,遇到数据量比较大的时候,最好显示进度条。进度条设计是参考网上某牛人提供的代码,利用JS实现的,谢谢这个大牛了(忘记了当时记录下他的大名了,:...

Asp.Net上传组件RadUpLoad(带进度条时间显示)

在我的企业管理系统开发的过程中,遇到的最大问题就是大文件的上传了。在asp或者php中要想上传大文件就需借助于组件(这会受到虚拟主机的限制)。但是在asp.net中大文件上传似乎要简单了很多。下面提供...

在ASP.NET中显示进度条

  • 2008年10月11日 16:14
  • 28KB
  • 下载

文件上传显示进度条(asp.net)

  • 2008年02月18日 15:01
  • 18KB
  • 下载

asp.net 实现进度条 用来显示加载进度或程序处理进度

private void Page_Load(object sender, System.EventArgs e) { beginProgress(); for...

ExtJS+ASP.NET实现真实的进度条显示服务器端长时间操作的进度

ExtJS+ASP.NET实现真实的进度条显示服务器端长时间操作的进度 当服务器端执行一个长时间的操作时,页面上如何显示一个反应真实的进度条,报告服务器端执行耗时操作的进度,而不是让用户永远等待...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Asp.net 用UpdateProgress加载数据显示进度条
举报原因:
原因补充:

(最多只允许输入30个字)