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

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量262 收藏
点赞数
分类专栏： UpdatePanel 文章标签： button asp server function javascript textbox

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>

guangqq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.Net Ajax框架 UpdatePanel控件 局部刷新
寂寞的一只狗的博客
04-10 2697
UpdatePanel控制简介         UpdatePanel控件用于局部更新网页上的内容， 网页上要局部更新的内容放在UpdatePanel控件的内容模板中，         其强大之处在于不用编写任何客户端脚本，但它必须要和ScriptManager控件一同使用         UpdatePanel的常用属性和子元素
asp.net UpdatePanel的简单用法
10-30
ASP.NET UpdatePanel 是一个用于实现客户端部分页面更新的服务器端控件，它是ASP.NET AJAX库的核心组成部分。UpdatePanel允许开发者在不刷新整个页面的情况下更新页面的特定区域，从而提供更好的用户体验。以下是...
自定义 ASP.NET UpdatePanel 控件的错误处理
游游的记事本
01-05 1177
http://msdn.microsoft.com/zh-cn/library/bb398934(v=vs.100).aspx 如果在 UpdatePanel 控件中更新部分页时发生错误，则默认行为是显示带有错误消息的浏览器消息框。本教程将向您演示如何自定义向用户显示错误的方式以及如何自定义错误消息。 先决条件 若要在您自己的开发环境中
【.NET全栈】ASP.NET开发Web应用——AJAX开发技术
JosieBook
07-18 1031
AJAX技术是这几年中出现的较为热闹的技术。大多数的Web开发者都已经关注，或正在使用AJAX。AJAX全称是Asynchironous JavaScript and XML。中文称为异步JavaScript和XML。AJAX本身不能称为一门技术、语言或者软件。它是由多种技术组合，这些技术存在了很多年，现在借助于AJAX组合，称为一种新的开发模式。认识ASP.NET AJAXASP.NET AJAX服务器扩展ASP.NET AJAX服务器端控件扩展。
ASP.Net UpdatePanel控件（转）
05-31 116
Asp.net UpdatePanel 允许用户构建一个丰富的，以客户端为中心的应用程序，引用UpdatePanel控件，能够实现页面的部分刷新，一个包含scriptManage和 UpdatePanel控件的页面自动具有页面部分刷新的功能，不需要写任何的客户端JavaScript代码。一个web页面只能包含一个 ScriptManage控件，但可以包含一个或多个UpdatePane...
ASP.net UpdatePanel控件
jessie1984的博客
01-06 253
UpdatePanel可以用来创建丰富的局部更新Web应用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。通过本文来学习一下UpdatePanel简单的使用方法（第一篇）。 主要内容 1．UpdatePan...
ajax 基本及在.net中的使用
BugsBunnywyj的博客
08-10 585
文章目录基本特性XMLHttpRequest 对象 (异步的与服务器交换数据)GET 还是 POST？GET 请求POST 请求url - 服务器上的文件异步 - True 或 False？Async=trueAsync = false服务器响应responseText 属性responseXML 属性服务器端构架客户端构架ScriptManagerscriptManager 属性 基本特性 AJ...
AJAX.NET的UpdatePanel全面应用(2)
guangqq的专栏
09-02 241
脚本注册 ASP.NET 2.0脚本支持–不推荐,或者说不要使用Response.Write方法不止是破坏了整个页面模型,特别是开发控件–使用Framework所支持的方法RegisterArrayDeclarationRegisterClientScriptBlockRegisterClientScriptIncludeRegisterClientScript
初学 ASP.NET AJAX (三）：使用 UpdatePanel
weixin_30947043的博客
08-01 372
1 概述 ASP.NET UpdatePanel 控件能让你创建丰富的、以客户为中心的 Web 应用程序。使用 UpdatePanel 控件，可以刷新选择的页面部分而不是使用回发来刷新整个页面，这就像是执行了一个局部页面更新一样。包含一个 ScriptManager 和一个或多个 UpdatePanel 的 Web 页面会自动加入局部页面更新，而不需要定制客户端代码。 1....
asp.net ajax教程,ASP.NET Ajax控件
weixin_39684454的博客
08-06 539
AJAX代表异步的JavaScript和XML。这是一个跨平台的技术，可以加快响应速度。 AJAX服务器控件将脚本添加到由浏览器执行和处理的页面。但是，像其他ASP.NET服务器控件一样，这些AJAX服务器控件也可以拥有与它们关联的方法和事件处理程序，这些处理程序在服务器端处理。Visual Studio IDE中的控件工具箱包含一组称为“AJAX扩展” 的控件，ScriptManager控件Sc...
asp.net UpdatePanel实现无刷新上传图片
10-29
UpdatePanel通过AJAX技术实现在后台执行服务器端操作，并将结果返回到客户端，而不是整个页面。它包括一个ContentTemplate区域，用于放置需要异步更新的控件，以及可选的Triggers，用于定义触发更新的事件。默认...
使用AJAX.NET和ContextMenu的TreeView
04-04
总结来说，这个主题涵盖了ASP.NET WebForms中的AJAX技术，尤其是AJAX.NET和UpdatePanel的使用，以及JavaScript中ContextMenu的创建，这些都是提升Web应用用户体验的重要技术。通过学习这些知识点，开发者可以创建更...
客户端 ajax asp.net ajax
09-07
结合客户端AJAX和ASP.NET AJAX，开发者可以创建更高效、更响应式的Web应用，同时保持ASP.NET的强大服务器端功能。例如，可以使用JavaScript和ASP.NET AJAX库（如jQuery和MicrosoftAjax.js）来实现复杂的用户交互，...
带有内联客户端脚本解析器的AJAX UpdatePanel
04-04
UpdatePanel是ASP.NET AJAX库的一部分，它提供了一个模拟服务器端回发的客户端控件，使得开发者可以实现异步更新。UpdatePanel的工作原理是通过发送异步请求到服务器，然后仅更新面板内的内容，而不是整个页面。 ...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 452
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1261
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1052
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 91
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
ASP.NET与AJAX架构Web应用指南
3. **ASP.NET AJAX框架**：深入探讨ASP.NET内置的AJAX功能，如UpdatePanel、ScriptManager和AJAX Control Toolkit。 4. **JSON和XML数据交换**：如何使用JSON（JavaScript Object Notation）或XML作为AJAX通信的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值