学习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事件中实现一个优先按钮和一个普通按钮异步提交会不会被覆盖掉
<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

<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样式改变

 

<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换一个位置 

<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属性获得这次请求