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控件实现加载进度条

                      var prm = Sys.WebForms.PageRequestManager.getInstance();  function Cancel()  {...
  • helen_shw
  • helen_shw
  • 2009年08月13日 01:34
  • 1925

asp.net多线程,执行真实时间与百分比的进度条

asp.net利用多线程执行长时间的任务,客户端显示任务执行的真实时间与百分比。 在asp.net中执行一个长时间的操作,有的时候需要在在客户端有一个反馈能了解到任务的执行进度,大致看了一下有这么几种...
  • lovegonghui
  • lovegonghui
  • 2015年11月11日 09:22
  • 1313

UpdateProgress控件

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

在datatable中显示百分比进度条

在DataTable的每个单元格中,显示百分比进度条,根据具体的百分比,进步条显示不同的颜色(绿色:正常;黄色:警告;红色:危险),用于分析效率之类的问题,废话不多说,看效果。 如果你有这种需求,...
  • zql898626913
  • zql898626913
  • 2017年07月26日 17:35
  • 596

updateprogress 实现层遮罩效果

转自:http://www.cnblogs.com/losingrose/articles/952490.html 遮罩层与基础ajax控件已经封装在一个用户控件,使用方便。使用的页面的代码如下:  ...
  • wang4978
  • wang4978
  • 2009年09月28日 11:15
  • 2070

C# 下载带进度条代码(普通进度条)

/// /// 下载带进度条代码(普通进度条) /// /// 网址 /// 下载后文件名为 /...
  • xunzaosiyecao
  • xunzaosiyecao
  • 2015年05月11日 12:23
  • 2946

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

private void Page_Load(object sender, System.EventArgs e) { beginProgress(); for...
  • smartsmile2012
  • smartsmile2012
  • 2012年11月09日 16:29
  • 8766

Ajax控件UpdateProgress的使用心得

             最近做网站用到了UpProgress控件,所以把遇到的问题和自己的看法写下来,供以后参考,也希望给大家代码帮助。UpProgress是和UpdatePanel一起使用的。实现...
  • shengyongwang
  • shengyongwang
  • 2009年11月30日 20:09
  • 4422

C# asp.net与jquery做ajax简单进度条

一直以为response.Flush() 可以实现。。。。发现不行的 最后还是采用了全局参数保存到 cahe 来做了 setCahe.ashx 模拟操作的事件进度 public voi...
  • livelymoon
  • livelymoon
  • 2015年08月28日 11:47
  • 803

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

在ASP.NET中经常会遇到Excel文件导入数据库的问题,遇到数据量比较大的时候,最好显示进度条。进度条设计是参考网上某牛人提供的代码,利用JS实现的,谢谢这个大牛了(忘记了当时记录下他的大名了,:...
  • jasonwu_bj
  • jasonwu_bj
  • 2011年01月02日 11:36
  • 2765
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Asp.net 用UpdateProgress加载数据显示进度条
举报原因:
原因补充:

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