背景:在做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" οnclick="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里面添加按钮,在加载的时候执行按钮事件获取数据,
觉得这种方法还是不大好,如有更好的方法请说下