Ajax 更新后（通过 Update Panel）JavaScript 访问页面控件

• 下载源码 - 5.32 KB

引言

很多时候，我们需要在 Update Panel 完成更新（ASP.NET 2.0 AJAX）的那一刻做一些工作。例如，在更新期间出现任何错误时显示错误，在适当的更新后显示成功消息，设置滚动条，更改某些 UI 组件，更新 UI 的其他部分等等。列表可以根据开发人员的需求而延长。我试图展示如何在更新完成后获得对页面的控制权。我们可以在处理程序中通过 JavaScript 按照我们需要的方式进行调整。

背景  

早些时候，我也遇到了很多问题，无法解决如何在 Update Panel 更新之后处理任何事情。我发现很多同事也面临同样的问题。他们希望在更新后拥有某些 UI 功能，比如滚动或者捕获错误。我发现 Code Project 上没有关于此的文章。对于我的朋友来说，找到处理方法确实很困难。所以我计划在有时间后写一个演示。

使用代码 

我们要使用的方法是“向请求管理器添加一个 end-request 处理程序”。

我们在页面加载期间通过 JavaScript 将处理程序添加到请求管理器。

代码示例

function LoadAfterAjaxHandler() 
{
    //Handler attached to the request
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}

现在，在有了这段代码后，每当 Update Panel 完成更新时，请求都会经过 EndRequestHandler。

现在需要放置 EndRequestHandler。 在处理程序中，可以编写所需的任何内容。可以捕获错误，设置滚动，更新任何 UI 组件。

代码示例

function EndRequestHandler(sender, eArgs) 
{            
   /*
   1. Alert/Message if any after update
   2. Error handling if any
   3. Scroll position set again
   4. Focus/UI update if any
   */
   //Example
   if (eArgs.get_error() == null)
   {
      // Do all the stuffs needed after update through JavaScript here. 
      //1. Alert / Show window / Show Dialog
      //alert("Update was successful");
      //2. Page Controls accessed via JavaScript
      document.getElementById("lblTest").innerText = "Update Successful";
      //3. Page scrolls can be set if needed
      //Set Scroll Position
   }
   else
   {
      // There was an error in the update panels update 
      // caught here and message displayed via JavaScript               
      document.getElementById("lblTest").innerText = 
              "There was an error in update:"+eArgs.get_error().message;
   }
} 

正如您所看到的，在处理程序中，可以通过 JavaScript 对页面进行所有可能的操作。 我附带了一个示例代码库。

关注点

使用 AJAX 很有趣，当我们能够为使用 AJAX 时的所有可能情况找到解决方案时，它会变得更有趣。例如，使用 AJAX 时页面历史记录曾经是一个问题，但最近我了解到，在 .NET 3.5 中，微软也提供了 AJAX 调用历史记录！这很有趣，不是吗？

历史

• 2008 年 9 月 23 日：初始帖子