Ajax实现静态刷新页面过程带加载旋转图片
程序员文章站
2022-07-02 16:22:42
复制代码 代码如下:
<!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 id="head1" runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="/style/niulan.css" rel="stylesheet" type="text/css" />
<title></title>
<script type="text/javascript">//当刷新的时候 原先的页面的展示数据不会隐藏这里面是隐藏函数
//取得pagerequestmanager对象，每一个asp.net ajax页面中会右唯一一个这种对象负责处理所有的async - postback要求
var prm = sys.webforms.pagerequestmanager.getinstance(); //新增事件处理至pagerequestmanager的initializerequest事件，当async-postback发生时，此事件会被触发，我们的initrequest函数便会被运行
prm.add_initializerequest(initrequest);
//新增事件处理至pagerequestmanager的endrequest事件，当async-postback完成时，此事件会被触发，我们的endrequest函数便会被运行
prm.add_endrequest(endrequest); function initrequest(sender, args) {
//显示出updateprogress1控件
document.getelementbyid('detail').style.display = "none";
}
function endrequest(sender, args) {
//隐藏updateprogress1控件
document.getelementbyid('detail').style.display = "block";
}
//用于取消async-postback动作
function cancelclick() {
//当处于async-postback动作时，get_isinasyncpostback函数会回传true，此时调用abortpostback 函数便会取消async-postback动作。
if (prm.get_isinasyncpostback()) {
prm.abortpostback();
}
}
</script>
</head>
<body >
<form id="form1" runat="server">
//使用 ajax extensitons 中的scriptmanager
<asp:scriptmanager runat="server">
</asp:scriptmanager>
//使用地方比如
<asp:updatepanel id="updatepanel1" runat="server">
<contenttemplate>
//放代码
<div id="detail"><asp:imagebutton id="ibtnfbsj" runat="server" imageurl="/images/ershoufang/bs/fbsj.gif"
onclick="ibtnfbsj_click" />
</div>
//当在静态刷新页面的时候会调用updateprogress 但是这个后台也是需要代码的看下面
<asp:updateprogress id="updateprogress1" runat="server" associatedupdatepanelid="updatepanel1">
<progresstemplate>
<div style="text-align: center">
<img alt="" src="/images/loading.gif" />
</div>
</progresstemplate>
</asp:updateprogress>
</contenttemplate>
</asp:updatepanel>
</form>
</body>
</html>
后台
protected void ibtnfbsj_click(object sender, imageclickeventargs e)
{
system.threading.thread.sleep(2000);
drpsortorder.selectedvalue = ((int)ershoufangjichuzufang.order.按发布时间排序).tostring();
populatedetails();
}
//这样就可以实现为静态刷新页面，带加载过程中有旋转图片,用户体验会很好效果如下
当然你也可以使用jquery或者ajax写动态加载table的方式来实现
复制代码 代码如下:
<!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 id="head1" runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="/style/niulan.css" rel="stylesheet" type="text/css" />
<title></title>
<script type="text/javascript">//当刷新的时候 原先的页面的展示数据不会隐藏这里面是隐藏函数
//取得pagerequestmanager对象，每一个asp.net ajax页面中会右唯一一个这种对象负责处理所有的async - postback要求
var prm = sys.webforms.pagerequestmanager.getinstance(); //新增事件处理至pagerequestmanager的initializerequest事件，当async-postback发生时，此事件会被触发，我们的initrequest函数便会被运行
prm.add_initializerequest(initrequest);
//新增事件处理至pagerequestmanager的endrequest事件，当async-postback完成时，此事件会被触发，我们的endrequest函数便会被运行
prm.add_endrequest(endrequest); function initrequest(sender, args) {
//显示出updateprogress1控件
document.getelementbyid('detail').style.display = "none";
}
function endrequest(sender, args) {
//隐藏updateprogress1控件
document.getelementbyid('detail').style.display = "block";
}
//用于取消async-postback动作
function cancelclick() {
//当处于async-postback动作时，get_isinasyncpostback函数会回传true，此时调用abortpostback 函数便会取消async-postback动作。
if (prm.get_isinasyncpostback()) {
prm.abortpostback();
}
}
</script>
</head>
<body >
<form id="form1" runat="server">
//使用 ajax extensitons 中的scriptmanager
<asp:scriptmanager runat="server">
</asp:scriptmanager>
//使用地方比如
<asp:updatepanel id="updatepanel1" runat="server">
<contenttemplate>
//放代码
<div id="detail"><asp:imagebutton id="ibtnfbsj" runat="server" imageurl="/images/ershoufang/bs/fbsj.gif"
onclick="ibtnfbsj_click" />
</div>
//当在静态刷新页面的时候会调用updateprogress 但是这个后台也是需要代码的看下面
<asp:updateprogress id="updateprogress1" runat="server" associatedupdatepanelid="updatepanel1">
<progresstemplate>
<div style="text-align: center">
<img alt="" src="/images/loading.gif" />
</div>
</progresstemplate>
</asp:updateprogress>
</contenttemplate>
</asp:updatepanel>
</form>
</body>
</html>
后台
protected void ibtnfbsj_click(object sender, imageclickeventargs e)
{
system.threading.thread.sleep(2000);
drpsortorder.selectedvalue = ((int)ershoufangjichuzufang.order.按发布时间排序).tostring();
populatedetails();
}
//这样就可以实现为静态刷新页面，带加载过程中有旋转图片,用户体验会很好效果如下
当然你也可以使用jquery或者ajax写动态加载table的方式来实现
上一篇： ajax后退解决方案