学习AJAX (三) (UpdatePanel 客户端)
学习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元素 常用操作： 读取此请求信息 取消此次异步刷新 //解释下这里有两个按钮，提交这两个按钮都会产生异步的提交，通常是后面一个提交覆盖掉前面一个提交 //这里就在initializeRequest事件中实现一个优先按钮和一个普通按钮异步提交会不会被覆盖掉 <scripttype="text/javascript"language="javascript"> varlastPostBackButtonId=null; //得到优先级高的按钮 varbtnPrecedenceId="<%=this.btnPrecedence.ClientID%>"; Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest( function(sender,e) { //获得PageRequestManager这个类的实例 varprm=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; } elseif(e.get_postBackElement().id==btnPrecedenceId) { showMessage("发起优先的刷新，普通的刷新将被取消。"); } else { showMessage("重新发起普通的刷新，前一次提交将被取消。"); } } lastPostBackButtonId=e.get_postBackElement().id; }); </script> 要点：为每个控件指定明确的ID 不要为页面中的UpdatePanel添加Trigger 使用ContentTemplateContainer属性向UpdatePanel内添加新控件 updatepanel必须要from控件中 InitializeRequest:它的作用主要是取消回发,和优先级,看看它的ventArgs有什么内容InitializeRequestEventArgs PRM-beginRequest 事件 参数类型:BeginRequestEventArs request属性:用于获得WebRequest对象 postBackElement：触发异步刷新的Dom元素 常用操作: 改取请求消息 改变请求方式 显示更新提示 这里要实现在外部按钮提交异步刷新显示UpdateProgress <scriptlanguage="javascript"type="text/javascript"> Sys.WebForms.PageRequestManager.getInstance().add_beginRequest( function(sender,e) { if(e.get_postBackElement().id!="<%=this.Button2.ClientID%>") { return; } varupdateProgress=$get("<%=this.UpdateProgress1.ClientID%>"); vardynamicLayout=<%=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样式改变
<scriptlanguage="javascript"type="text/javascript"> //改变样式的函数 functionhighlightPanels(panels,clear) { for(vari=0;i<panels.length;i++) { varpanel=panels[i]; panel.style.border=clear?"solid0pxwhite":"solid2pxred"; panel.style.backgroundColor=clear?"white":"#d6dde8"; } } Sys.WebForms.PageRequestManager.getInstance().add_pageLoading( function(sender,e) { //这里注意获得即将要更新的updatepanel是一个数组 //也就是说会有好几个updatepanel会更新 varpanelsUpdating=Array.clone(e.get_panelsUpdating()); highlightPanels(panelsUpdating); //延迟的函数进行清空 window.setTimeout( function(){highlightPanels(panelsUpdating,true);}, 2000); }); </script> PRM-pageLoaded事件 参数类型:pageLoadedEventArgs dataItems属性：获得服务器注册的数据项 panelsCreated属性：获得新建的UpdatePanel panelsUpdated属性：获得应经更新的UpdatePanel 将更新的Updatepanel换一个位置 <scriptlanguage="javascript"type="text/javascript"> Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded( function(sender,e) { varupId="<%=this.UpdatePanel1.ClientID%>"; //获得已经更新的Updatepanel是一个数组类型 varrefreshedPanels=e.get_panelsUpdated(); for(vari=0;i<refreshedPanels.length;i++) { if(refreshedPanels[i].id==upId) { refreshedPanels[i].id=upId+Math.floor(9999*Math.random()); vardiv=document.createElement("div"); div.id=upId; $get("commentContainer").appendChild(div); return; } } }); </script> PRM-endRequest事件 参数类型:EndRequestEventArgs dataItems属性：获得服务器注册的数据项 error属性:获得异步刷新时获得的错误 errorHandled属性:表明错误是否已经被处理了 response属性获得这次请求 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |