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

来源：互联网发布：nba2kol软件编辑：程序博客网时间：2024/05/16 06:58

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

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