AJAX.NET的UpdatePanel全面应用(3) (客户端)

最新推荐文章于 2024-11-13 01:18:00 发布
最新推荐文章于 2024-11-13 01:18:00 发布
阅读量1.4k 收藏 2
点赞数
文章标签： button asp server triggers function javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ccp5780199/article/details/1767677
版权

 前面两篇主要都是服务端方面的,今天这个都是客户端的,一样还是看WebCast上的视频

l          PageRequestManager类 （以下简称为PRM）

 

getInstance静态方法

–获得全局唯一的PageRequestManager实例

 

isInAsyncPostBack属性

–是否正处在一个异步更新过程中

 

abortPostBack方法

–取消当前的异步更新

–不会产生异常

 

l          客户端生命周期

 

Sys.Application与PageRequestManager共同形成

 

Sys._Application的事件

–init事件

基于浏览器window.onload事件

只在页面第一次初始化时触发

所有脚本已经加载完毕

所有组件还没有开始创建

用于创建各种组件

–为组件建立相互引用关系的时期

–将在之后的课程中进行详细介绍

 

–load事件

–参数类型：Sys.ApplicationLoadEventArgs

components属性：获得这次加载阶段中所有建立的对象。

isPartialLoad属性：是否为异步调用导致页面加载。和IsPostBack差不多

 

–unload事件仅用于通知

 

 

“捷径”方法

–pageLoad方法

–pageUnload方法

 

 

PageRequestManager的事件

 

–异步刷新时触发

–initializeRequest

–beginRequest

–pageLoading

–pageLoaded

–endRequest

进入页面

 

离开页面

PRM–pageLoaded事件

pageUnload方法

App–init事件

App–unload事件(页面加载完后)

App–load事件

 

pageLoad方法

 

 

 

 

PRM–initializeRequest事件

 

PRM–beginRequest事件

 

服务端处理，错误超时取消直接PRM–endRequest事件

 

PRM –pageLoading事件

 

PRM–pageLoaded事件

 

App–load事件

 

pageLoad方法

 

PRM–endRequest事件

 

 

PRM–initializeRequest事件

 

参数类型：InitializeRequestEventArgs

–request属性：用于获得WebRequest对象（用于请求的信息）

–postBackElement：触发异步刷新的DOM元素

 

常用操作：

–读取请求信息

–取消此次异步更新

 

 异步刷新级别

  <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode=Debug>

        </asp:ScriptManager>

       

        <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" DynamicLayout=false>

            <ProgressTemplate>

                <span style="color:Red">loading.....</span>

            </ProgressTemplate>

        </asp:UpdateProgress>

       

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

            <ContentTemplate>

                <%= DateTime.Now %>><br />

                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

                <asp:Button ID="btnPrecedence" runat="server" Text="优先" OnClick="btnPrecedence_Click" />

                <asp:Button ID="Button2" runat="server" Text="普通" OnClick="btnPrecedence_Click" />

            </ContentTemplate>

        </asp:UpdatePanel>

       

        <script language=javascript type="text/javascript">

        var lastPostBackButtonID = null;

        var btnPrecedenceID = "<%= this.btnPrecedence.ClientID %>";

               

       Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(

            function(sender,e){

                var prm = Sys.WebForms.PageRequestManager.getInstance();

              

               //是否处在一个异步更新过程中

               if(prm.get_isInAsyncPostBack()) {

                     //如果发起异步刷新的DOM元素的ID等于优先控件的ID

                    if(lastPostBackButtonID == btnPrecedenceID){

                        e.set_cancel(true);

                       

                        //如果发起异步刷新的DOM元素的ID等于优先控件的ID

                        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;

            }         

        );

       

        var timeoutSeed = null;

        function showMessage(message,timeout){

            $get("message").innerHTML = message;

            if(timeoutSeed){

                window.clearTimeout(timeoutSeed);

            }

            

            timeoutSeed = window.setTimeout(

                function(){ $get("message").innerHTML = ""; },

               timeout || 2500);

        }

        </script>

    </div>

<div id="message" style="color:Red" ;></div>

 

    protected void btnPrecedence_Click(object sender, EventArgs e)

    {

        Thread.Sleep(3000);

 

        Button btn = sender as Button;

        this.Label1.Text = String.Format("您点击了 {0} 按钮 ", btn.Text);

    }

 

PRM –beginRequest事件

 

参数类型：BeginRequestEventArgs

–request属性：用于获得WebRequest对象（用于请求的信息）

–postBackElement：触发异步刷新的DOM元素

 

常用操作：

–读取请求信息

–改变请求方式（替换Executor）

–显示更新提示

 

强制显示UpdateProgress

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

       

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

            <ContentTemplate>

                <%= DateTime.Now %>

                <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />

            </ContentTemplate>

            <Triggers>

                <asp:AsyncPostBackTrigger ControlID="Button2" />

            </Triggers>

        </asp:UpdatePanel>

       

        <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter=0 DynamicLayout=false AssociatedUpdatePanelID="UpdatePanel1">

            <ProgressTemplate>

                <span style="color:Red">Loading....</span>

            </ProgressTemplate>

        </asp:UpdateProgress>

        <hr />

        <asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button1_Click" />

        

        <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事件

参数类型：PageLoadingEventArgs

–dataItems属性：获得服务器端注册的数据项

–panelsDeleting属性：获得即将删除的UpdatePanel

–panelsUpdating属性：获得即将更新的UpdatePanel

 

常用操作

–提示更新的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)

              {

                     var panelsUpdating = Array.clone(e.get_panelsUpdating());

                     highlightPanels(panelsUpdating);

                    

                     window.setTimeout(

                            function(){ highlightPanels(panelsUpdating, true); },

                            2000);

              });

</script>

PRM–pageLoaded事件

 

参数类型：PageLoadedEventArgs

–dataItems属性：获得服务器端注册的数据项

–panelsCreated属性：获得新建的UpdatePanel,用于嵌套UpdatePanel

–panelsUpdated属性：获得已经更新的UpdatePanel

 

常用操作：

–（能够）获得服务器端注册的数据项

–（能够）执行服务器端注册的脚本

 

局部内容添加

public class Comment

{

       public string Content;

 

       public DateTime Time;

}

 

      <strong>Comment:</strong> <br /><br />

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

    <div id="commentContainer">

       

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

            <ContentTemplate>

                <asp:Repeater ID="Repeater1" runat="server">

                    <ItemTemplate>

                        <%# (Container.DataItem as Comment).Content %><br />

                        <i><%# (Container.DataItem as  Comment).Time %></i>

                        <hr />

                    </ItemTemplate>

                </asp:Repeater>

            </ContentTemplate>

            <Triggers>

                <asp:AsyncPostBackTrigger ControlID="Button1" />

            </Triggers>

        </asp:UpdatePanel>

    </div>

      <br />

         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

        <asp:Button ID="Button1" runat="server" Text="Add Comment" OnClick="Button1_Click" />       

 

   <script language=javascript type="text/javascript">

        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(

            function(sender,e){

                var upID = "<%= this.UpdatePanel1.ClientID %>";

                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属性：获得这次请求获得的结果对象

 

•常用操作：

–处理异步刷新结果（异常、超时、取消, etc.）

–获得请求结果中额外的信息

–（能够）获得服务器端注册的数据项

 

处理异步刷新结果

    protected void Page_Load(object sender, EventArgs e)

    {

              ScriptManager.GetCurrent(this).AsyncPostBackTimeout = 3;

    }

 

       protected void btnError_Click(object sender, EventArgs e)

       {

              int two = 2;

              int i = 3 / (two - 2);

       }

 

       protected void btnTimeout_Click(object sender, EventArgs e)

       {

              Thread.Sleep(5000);

       }

 

       protected void btnDataItem_Click(object sender, EventArgs e)

       {

              ScriptManager.GetCurrent(this).RegisterDataItem(this.UpdatePanel1, DateTime.Now.ToString());

    }

 

       <asp:UpdatePanel ID="UpdatePanel1" runat="server">

              <ContentTemplate>

                     <%= DateTime.Now %><br />

                     <asp:Button ID="btnError" runat="server" Text="Error" OnClick="btnError_Click" />

                     <asp:Button ID="btnTimeout" runat="server" Text="Timeout" OnClick="btnTimeout_Click" />

                     <input type="button" value="Abort" onclick="Sys.WebForms.PageRequestManager.getInstance().abortPostBack();" />

                     <asp:Button ID="btnDataItem" runat="server" Text="Register DataItem" OnClick="btnDataItem_Click" />

              </ContentTemplate>

       </asp:UpdatePanel>

      

       <script language="javascript" type="text/javascript">

              Sys.WebForms.PageRequestManager.getInstance().add_endRequest(

                     function(sender, e)

                     {

                            if (e.get_error())

                            {

                                   e.set_errorHandled(true);

                                  

                                   if (e.get_response().get_timedOut())

                                   {

                                          showMessage("您的请求已超时。");

                                   }

                                   else if (e.get_response().get_statusCode() != 200)

                                   {

                                          showMessage("遇到未知错误。");

                                   }

                                   else

                                   {

                                          showMessage(e.get_error().message);

                                   }

                            }

                            else if (e.get_response().get_aborted())

                            {

                                   showMessage("您的请求已被取消。");

                            }

                            else

                            {

                                   var upId = "<%= this.UpdatePanel1.ClientID %>";

                                   var item = e.get_dataItems()[upId];

                                   showMessage("您注册了：" + item);

                            }

                     });

     </script>

 

l          更多资源

 

当心异步刷新后的脚本文件加载http://www.cnblogs.com/JeffreyZhao/archive/2007/04/09/Be_careful_with_loading_script_files_after_an_async_postback.html

 

•MSDN中文网站http://www.microsoft.com/china/msdn

 

•MSDN中文网络广播http://www.msdnwebcast.com.cn

 

•MSDN Flashhttp://www.microsoft.com/china/newsletter/case/msdn.aspx

 

•MSDN开发中心http://www.microsoft.com/china/msdn/DeveloperCenter/default.mspx

 

 
ccp5780199
关注
专栏目录
一起来学ASP.NET Ajax(六)之UpdatePanel简单应用及其原理
李达
08-21 2167
话说今天遇到了这样一个问题：点击一个GridView控件的某一行，在另外的一个GridView中显示出此行详细数据；这个简单，使用中间表获取数据源绑定给新的GridView即可，但是每次都刷新页面，没有平滑连续的用户体验，故使用UpdatePanel。         实例前，先来说说UpdatePanel，常用属性如下：         属性的作用 RendrMode：内容出现
asp.net UpdatePanel的简单用法
10-30
ASP.NET UpdatePanel 是一个用于实现客户端部分页面更新的服务器端控件，它是ASP.NET AJAX库的核心组成部分。UpdatePanel允许开发者在不刷新整个页面的情况下更新页面的特定区域，从而提供更好的用户体验。以下是...
updatepanel使用ajax时候代码被jq操作失效---局部刷新片【1】
Swift猎手~
03-21 593
实 践中我见过的问题：UpdatePanel中的服务器控件用jquery绑定id获取对象；获取的变成是一个服务器控件对象组；而不是一个对象；所以一般 对象后要加[0]。例如         var btnSave = document.getElementById("btnSave");         var btnSave2 = $("#btnSave")[0]; 这两种获取的对象才
错误：Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息
weixin_30646315的博客
06-17 135
今天在Ajax的UpdatePanel下实现 Export Excel时，它即出现error： 错误：Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息。之所以出现此错误，常见的原因是：在通过调用Response.Write()修改响应时，将启用相应筛选器、HttpModule或服务器跟中。 解决方法一： 找到问...
AJAX在ASP.NET中的应用（四）——探寻UpdatePanel的工作原理
mlcactus的专栏
01-10 1481
前言：ASP.NET的AJAX_Extensions虽然用起来很方便，也能应付大部分的开发需求，但是如果对它的实现机制一点也不了解的话，编写程序的时候总有种被微软绑住手脚的感觉。于是，我花了几天时间大致了解了UpdatePanel实现AJAX的方法，也基本摸清了头脑，这里把我的所想所得写出来，希望能给读者带来一些帮助。当然，我仅仅是从整体布局上的了解，具体细节了解不多，因此这里也不能将其所有机制完
解决:Sys.WebForms.PageRequestManagerServerErrorException(status code 500 OR 12031)问题
热门推荐
fox123871的专栏
08-04 1万+
今天重新装的浏览器，装的是IE8，结果发现以前写的项目有问题了，其实就是在一个微软AJAX框架 UpdatePanel中 加了1个 GridView 然后 GridView中有控件事件的相互调用，为了无刷新 ，加了这个UpdatePanel控件，在IE6中运行没任何问题，但在IE
asp.net UpdatePanel实现无刷新上传图片
10-29
UpdatePanel通过AJAX技术实现在后台执行服务器端操作，并将结果返回到客户端，而不是整个页面。它包括一个ContentTemplate区域，用于放置需要异步更新的控件，以及可选的Triggers，用于定义触发更新的事件。默认...
CAjax.rar_Ajax 留言_ajax_ajax .net_ajax C#_net
09-23
在.NET框架下，开发人员可以利用Ajax技术来构建更高效、更动态的Web应用程序。标题中的“CAjax.rar_Ajax 留言_ajax_ajax .net_ajax C#_net”表明这是一个关于使用C#和.NET框架实现Ajax无刷新留言功能的源码示例。这...
使用AJAX.NET和ContextMenu的TreeView
04-04
总结来说，这个主题涵盖了ASP.NET WebForms中的AJAX技术，尤其是AJAX.NET和UpdatePanel的使用，以及JavaScript中ContextMenu的创建，这些都是提升Web应用用户体验的重要技术。通过学习这些知识点，开发者可以创建更...
ASP.NET:为 AJAX 请求添加客户端事件
周公（周金桥）的专栏
09-05 2554
一、添加/删除请求开始事件的方法： Sys.WebForms.PageRequestManager.instance.add_beginRequest(beginRequestHandler) Sys.WebForms.PageRequestManager.instance.remove_beginRequest(beginRequestHandler) 参数beginRequestHandler
Sys.WebForms.PageRequestManagerServerErrorException: 在服务器上处理请求时出现未知错误解决办法
hugeben6的专栏
08-02 1690
问题描述 在使用updatepanel 时，上传到服务器出现如下错误：Sys.WebForms.PageRequestManagerServerErrorException: 在服务器上处理请求时出现未知错误。服务器返回的状态码为: 500。 问题原因 一般的原因都是页面存在潜在的危险字符 问题解决 1.在页首加入ValidateRequest="false"，如下：
ASP.NET Ajax 调试技巧：用 FireBug 调试 UpdatePanel 不更新问题
weixin_33806914的博客
07-26 80
今天有一个人询问我 UpdatePanel 不更新的问题，他在 Fiddler 里面已经看到传递的数据了，但是搞不明白为什么没有更新。那么这个时候就要调试到脚本中去，看看到底发生了什么。我用的是 FireBug，情况如下图：图中当前页面引用了两个 ScriptResource.xsd 脚本文件，其内容是系统生成的 js 脚本：MicrosoftAjax.jsMicrosoftAjaxWebForm...
updatepanel ajax pagerequestmana…
qizhanfeng的专栏
06-16 105
来自: http://hi.baidu.com/grayworm/blog/item/1b2183175141f50ac83d6d4e&lt;wbr&gt;.html&lt;/wbr&gt; Ajax.Net--PageRequestManager对象 ScriptManager和UpdatePanel两个控件已经能够实现了客户端与服务器端的异步通信了。要想对异步操作进一步控...
Sys.WebForms.PageRequestManagerParserErrorException错误
liyun919的专栏
05-21 2594
错误消息：Sys.WebForms.PageRequestManagerParserErrorException: 无法分析从服务器收到的消息。之所以出现此错误，常见的原因是: 在通过调用 Response.Write() 修改响应时，将启用响应筛选器、HttpModule 或服务器跟踪。 发生状况：页面使用了ajax的UpdatePanels，在使用excel导出时，使用了Res
AJAX.NET的UpdatePanel全面应用(2)
黑色空间
08-29 1418
l          脚本注册 ASP.NET 2.0脚本支持–不推荐,或者说不要使用Response.Write方法不止是破坏了整个页面模型,特别是开发控件–使用Framework所支持的方法RegisterArrayDeclarationRegisterClientScriptBlockRegisterClientScriptIncludeRegisterC
ASP.NET AJAX编程详解：客户端与服务器端交互
"ASP.NET AJAX编程参考手册" 本书是ASP.NET AJAX程序员的权威指南，...这本书通过丰富的实例和代码分析，为读者提供了一个全面理解和应用ASP.NET AJAX开发的平台，无论是初学者还是经验丰富的开发者，都能从中受益。
错误: Sys.WebForms.PageRequestManagerParserErrorException: 未能分析从服务器收到的消息。
my1989night的专栏
08-07 2960
使用了AJAX控件后，.NET 后台写Response.Write("alert('对不起，账号和密码错误')"); 报 错误: Sys.WebForms.PageRequestManagerParserErrorException: 未能分析从服务器收到的消息。 解决方法： ScriptManager.RegisterStartupScript(this.UpdatePanel1, th
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
最新发布
zhzijun的博客
11-13 410
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 154
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值