同时启用多个异步回发

• 下载源代码 - 17.5 KB

引言

当页面同时进行多个异步回发时，最近的回发优先。

请参考演示。

在一个 UpdatePanel 中有 3 个按钮，单击这些按钮将使用服务器日期时间戳更新各自的标签。 如果您单击按钮 1，然后立即单击按钮 2，在按钮 1 的 OnClick 事件完成之前，您将丢失按钮 1 的 OnClick 事件，并且按钮 2 的 OnClick 事件将优先。 您可以使用此演示应用程序中包含的 JavaScript 对这些请求进行排队。 请注意，这不是一个完美的解决方案；它可能不适用于所有情况。 这只是一个概念验证；您可以根据需要扩展代码库。

背景

部分页面更新由 PageRequestManager 类处理。 每个页面都有一个可用的实例。 PageRequestManager 公开了各种事件，这些事件可用于实现多个请求的排队。

有关更多详细信息，请参阅此 MSDN 文章。

Using the Code

在 JavaScript 中，我们可以使用以下代码片段获取 PageRequestManager 的实例

var prm = Sys.WebForms.PageRequestManager.getInstance(); //GET CURRENT INSTANCE 
						//OF PAGE REQUEST MANAGER 

然后，我们定义需要在初始化新请求和完成处理时执行的自定义处理程序。

prm.add_initializeRequest(InitRequest);	//HANLDER THAT NEEDS TO BE EXECUTED 
					//WHEN PARTIAL PAGE UPDATE IS INVOKED
prm.add_endRequest(OnCompleteRequest); //HANLDER THAT NEEDS TO BE EXECUTED WHEN 
			//PARTIAL PAGE UPDATE RESPONSE IS RETURNED FROM SERVER

我们定义一个 Array 对象，该对象将保存待处理请求的客户端 ID。

//ARRAY COLLECTION OF ALL PENDING REQUEST CLIENT IDS
 var pendingRequest = new Array()

当生成请求时，将调用 IntializeRequest 处理程序方法。 在我们的自定义处理程序中，我们有以下代码片段，它获取当前请求的客户端 ID，并检查是否存在先前的待处理请求。 如果存在先前的待处理请求，它将取消当前请求并将客户端 ID 添加到数组中。

  var clientId = args.get_postBackElement().id;
    //CHECK IF A POSTBACK IS PENDING
    if (prm.get_isInAsyncPostBack()) {
            args.set_cancel(true); //CANCEL THIS REQUEST
            pendingRequest.push(clientId); //ENQUE THIS REQUEST CLIENT ID
    }

现有请求完成后，将执行 endrequest 处理程序，并且我们有以下代码段来检查待处理的请求。

  //CHECK FOR PENDING REQUEST
         if (pendingRequest.length != 0) {
                //GET THE LAST PENDING CLIENT ID 
                var pendingClientId = pendingRequest.shift();
                TriggerPendingCleintId(pendingClientId);
         }
            
        //IMPLEMENTATION OF THIS FUNCTION MAY NOT WORK FOR ALL SCENARIOS.
        //THIS IS JUST A PROOF OF CONCEPT.
        function TriggerPendingCleintId(clientId) {
            var client = document.getElementById(clientId);
            if (client.type=='submit') {
                client.click();
            }
            else if (client.outerHTML != undefined)
            {
               var data = client.outerHTML;
               var js = data.substring(data.indexOf('javascript:__doPostBack'), 
					data.indexOf(')') + 1) + ";";
               eval(js);
            }
            else {
                WriteLog('ERROR: Could not trigger postback for client id:' + clientId);
            }
        }

要在演示应用程序中对此进行测试，请选中“启用事件排队请求”复选框，然后单击所有 3 个按钮。 您将看到以下输出

如您所见，按钮 2 和按钮 3 的请求已排队，并按执行顺序执行。

关注点

PageRequestManager 公开了许多事件，我们可以使用这些事件来增强我们的客户端功能。

历史

• 2010 年 11 月 22 日：初始版本