学习AJAX (三) (UpdatePanel 客户端)
PageRequestManager类
-getInstance静态方法
获得全局唯一的PageRequestManager实例
-isInAsyncPostBack属性
是否正在处于一个异步更细过程中
-abortPostBack方法
取消当前的异步更新
多次调用不会产生异常
客户端的生命周期
Sys.Application与PageRequestManager共同形成
Sys._Application类
init 事件
load 事件
unload 事件
捷径方法
pageLoad方法
pageUnload方法
PageRequestManager的事件
异步刷新时触发
initializeRequest
beginRequest
pageLoading
pageLoaded
endRequest
进入页面
PRM-pageLoaded事件
App-init
App-load
pageLoad
离开页面
pageUnload 方法
App-unload事件
异步提交过程
发起一个异步提交
PRM-initializeRequest
PRM-beginRequest
服务器端处理
PRM-pageLoading(正常)
PRM-pageLoaded
App-load
pageLoad
PRM-endRequest(异常)
App-init事件
基于浏览器Window.onload 事件
所有脚本已经加载完毕
所有组件还没有开始创建
用于创建各种组件
这里给出一个App-init中实现更新优先级的程序
App-load与unload事件
load事件 参数类型(Sys.ApllicationLoadEventArgs)
components属性:获得这次加载阶段中所有建立对象
isPartialLoad属性:是否为异步调用导致页面加载
unload事件
用户通知
PRM-initializeRequest事件
reques属性 :用于获得WebRequest对象
postBackElement:触发异步刷新的Dom元素
常用操作:
读取此请求信息
取消此次异步刷新
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
//解释下这里有两个按钮,提交这两个按钮都会产生异步的提交,通常是后面一个提交覆盖掉前面一个提交
//这里就在initializeRequest事件中实现一个优先按钮和一个普通按钮异步提交会不会被覆盖掉
<script type="text/javascript" language="javascript">
var lastPostBackButtonId = null;
//得到优先级高的按钮
var btnPrecedenceId = "<%= this.btnPrecedence.ClientID %>";
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(
function(sender, e)
{
//获得PageRequestManager这个类的实例
var prm = Sys.WebForms.PageRequestManager.getInstance();
//调用get_isInAsyncPostBack判断这个实例是否处于回发当中
if (prm.get_isInAsyncPostBack())
{
//条件:上次更新处与回发当中
//判断上次按钮是否是优先按钮
if (lastPostBackButtonId == btnPrecedenceId)
{
//是的话,取消当前的异步更新
e.set_cancel(true);
//如果这次更新的提交的按钮是优先按钮
if (e.get_postBackElement().id == btnPrecedenceId)
{
showMessage("不可重复发起优先的刷新。");
}
else
{
showMessage("请等待优先的刷新结束。");
}
return;
}
else if (e.get_postBackElement().id == btnPrecedenceId)
{
showMessage("发起优先的刷新,普通的刷新将被取消。");
}
else
{
showMessage("重新发起普通的刷新,前一次提交将被取消。");
}
}
lastPostBackButtonId = e.get_postBackElement().id;
});
</script>
要点:为每个控件指定明确的ID
不要为页面中的UpdatePanel添加Trigger
使用ContentTemplateContainer属性向UpdatePanel内添加新控件
updatepanel必须要from控件中
InitializeRequest:它的作用主要是取消回发,和优先级,看看它的ventArgs有什么内容InitializeRequestEventArgs
get_postBackElement();可以得到引发回发的元素,例如,Button1引发了回发.我们用e.get_postBackElement()就可以得到这个Button的所有信息.get_request()获取表示当前回发的请求对象.set_cancel(Bool);取消回发.我们就是用它控制回发优先级.另外.一个同等级的回发单击 两次.如果第一次回发还没结束.就会被取消,接着实行第二次回发
PRM-beginRequest 事件
参数类型:BeginRequestEventArs
request属性:用于获得WebRequest对象
postBackElement:触发异步刷新的Dom元素
常用操作:
改取请求消息
改变请求方式
显示更新提示
这里要实现在外部按钮提交异步刷新显示UpdateProgress
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
<script language="javascript" type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(
function(sender, e)
{
if (e.get_postBackElement().id != "<%= this.Button2.ClientID %>")
{
return;
}
var updateProgress = $get("<%= this.UpdateProgress1.ClientID %>");
var dynamicLayout = <%= this.UpdateProgress1.DynamicLayout.ToString().ToLower() %>;
if (dynamicLayout)
{
updateProgress.style.display = "block";
}
else
{
updateProgress.style.visibility = "visible";
}
});
</script>
PRM-pageLoading事件
dataItems属性:获得服务器注册的数据项
panelsDeleting属性:获得即将删除的UpdatePanel
panelsUpdating属性:获得即将更新的Updatepanel
即将要更新的Updatepanel样式改变
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
<script language="javascript" type="text/javascript">
//改变样式的函数
function highlightPanels(panels, clear)
{
for (var i = 0; i < panels.length; i++)
{
var panel = panels[i];
panel.style.border = clear ? "solid 0px white" : "solid 2px red";
panel.style.backgroundColor = clear ? "white" : "#d6dde8";
}
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(
function(sender, e)
{
//这里注意获得即将要更新的updatepanel是一个数组
//也就是说会有好几个updatepanel会更新
var panelsUpdating = Array.clone(e.get_panelsUpdating());
highlightPanels(panelsUpdating);
//延迟的函数 进行清空
window.setTimeout(
function(){ highlightPanels(panelsUpdating, true); },
2000);
});
</script>
PRM-pageLoaded事件
参数类型:pageLoadedEventArgs
dataItems属性:获得服务器注册的数据项
panelsCreated属性:获得新建的UpdatePanel
panelsUpdated属性:获得应经更新的UpdatePanel
将更新的Updatepanel换一个位置
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
<script language="javascript" type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(
function(sender, e)
{
var upId = "<%= this.UpdatePanel1.ClientID %>";
//获得已经更新的Updatepanel是一个数组类型
var refreshedPanels = e.get_panelsUpdated();
for (var i = 0; i < refreshedPanels.length; i++)
{
if (refreshedPanels[i].id == upId)
{
refreshedPanels[i].id = upId + Math.floor(9999 * Math.random());
var div = document.createElement("div");
div.id = upId;
$get("commentContainer").appendChild(div);
return;
}
}
});
</script>
PRM-endRequest事件
参数类型:EndRequestEventArgs
dataItems属性:获得服务器注册的数据项
error属性:获得异步刷新时获得的错误
errorHandled属性:表明错误是否已经被处理了
response属性获得这次请求