取消 UpdatePanel 更新

http://msdn.microsoft.com/zh-cn/magazine/cc163413.aspx

取消 UpdatePanel 更新

pageLoaded 事件是 UpdatePanel 返回服务器更新其内容时，PageRequestManager 类激发的若干事件之一。PageRequestManager 激发的另一个重要事件是 initializeRequest，它在发生异步回调之前激发。

最近有人问我，是否有可能在运行时决定是否允许 AsyncPostBackTrigger 触发一个 UpdatePanel 更新。回答是肯定的。这个操作通过处理 initializeRequest 事件来完成。

传递到 initializeRequest 处理程序的第二个参数是 initializeRequestEventArgs 类型的一个对象。这个对象包含 get_postBackElement 方法，它可以识别触发更新的按钮或其他元素。它还有一个您可用来在回调发生之前将其取消的 set_cancel 方法。下面是使用中的 set_cancel 方法的示例：

复制代码

<script type=”text/javascript”>

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

function initializeRequest(sender, args)
{
    args.set_cancel(!confirm(‘Are you sure?’));
}
</script>

在这个示例中，intializeRequest 处理程序可以在回调执行之前弹出一个确认框，询问用户是否要继续更新。单击确认框中的“Cancel”（取消）可以将 true 传递给 set_cancel，这样可以停止执行回调。在现实生活中，您可能觉得没必要在允许继续更新之前提示用户确认，但如果要是能够根据应用程序中其他地方的条件取消更新，它就可能很有用。

顺便说一下，它还有可能在异步回调执行后但又尚未完成前取消它们。PageRequestManager 提供了 abortPostBack 方法来执行此操作；它还提供了 get_isInAsyncPostBack 方法来确定异步回调是否挂起。这些方法通常与 UpdateProgress 控件一起使用，以便显示取消 UI。

 

多个 UpdatePanel

一个页面可以承载几个 UpdatePanel。默认情况下，当一个页面上的 UpdatePanel 更新时，该页面的其他 UpdatePanel 也会更新。有时候这是您想要的，但多半您并不需要每个 UpdatePanel 更新来响应其他 UpdatePanel。

通过将页面上每个 UpdatePanel 控件的 UpdateMode 属性设置为 Conditional，您可以选择更新哪个 UpdatePanel 实例（及更新的时间）。然后，在 UpdatePanel 更新和调用服务端事件处理程序的时候，请调用您要更新的其他面板上的 UpdatePanel.Update。这样可以通过减少呈现的控件的数量来减轻服务器的负载，而且它还减少了响应中的数据量，因为不进行更新的 UpdatePanel 不会将任何数据添加到响应中。

 

不使用 UpdatePanel 更新

AJAX 不仅可以创建更好的用户体验，它还可以提供更高效的网络通信。当发生传统的 ASP.NET 回发时，Web 窗体中包括视图状态在内的所有数据，都会传输到回发中的服务器。视图状态是 ASP.NET 页面，尤其是使用 DataGrid 和 GridView 控件的 ASP.NET 页面似乎会反应迟缓的一个原因。具有太多视图状态的页面会降低性能，并且具有太多视图状态的页面在 ASP.NET 应用程序中都太常见。

用 AJAX 回调替代 ASP.NET 回发的好处之一是能正确完成，AJAX 回调仅传送需要被传送的数据。这意味着，它们不必将视图状态包括在该传输中。

当您使用 UpdatePanel 在一个页面上执行无闪烁更新时，您可能会认为您在进行高效构建。毕竟，UpdatePanel 使用的是 AJAX，不是吗？不幸的是，如果您在 UpdatePanel 更新时检验一下网络中的通信，您会发现您根本就没有保存什么东西，至少是在发送的时候没有保存。通常在回发期间传送到服务器的视图状态数据（与其他数据）也会在 UpdatePanel 回调期间传送。事实上，来自 UpdatePanel 的异步 XML-HTTP 请求中所增长的数据几乎与在标准 ASP .NET 回发中增长的数据相同。下面是有关 ASP.NET AJAX 不可告人的秘密：UpdatePanel 虽易于使用，但是通信效率不高。

几乎没有什么办法可让您提高 UpdatePanel 的效率，但是您可以放弃使用 UpdatePanel，并转而使用 ASP.NET AJAX 的其他功能来更新页面内容，它不仅同样流畅，而且更加高效。它只需要多一点点力气，但是最后的结果往往让人觉得是值得付出的，因为您可以大大降低在客户端与服务器之间传输的数据量。

您还可以减少服务器上的负载。当 UpdatePanel 回调到服务器时，被回调定为目标的页面会完成几乎整个生命周期 — 该页面会被实例化，该页面中的控件也会被实例化，并且 UpdatePanel 内的控件也会完成一个正常呈现循环。那是更新该网页一部分的大笔开销。

作为示例，请考虑 图 2 中的页面段。它提供了一个允许用户键入邮政编码的简单 UI，并且单击按钮就可以用城市和州来初始化城市和州字段（请参见 图 3）。所有的控件都承载在 UpdatePanel 中，因此 Button 控件的回发被转换为异步回调，并且事件处理程序 (GetCityAndState) 会被调用到该回调内部的服务器上。GetCityAndState（未显示代码）从邮政编码文本框中读取邮政编码，将其转换成城市和州，并相应地初始化表示城市和州的 TextBox 和 DropDownList。由于这些都发生在 UpdatePanel 内部，所以更新非常顺畅，并且无闪烁。

 Figure 2 使用 UpdatePanel 填写“城市”和“州”字段

复制代码

<asp:UpdatePanel ID=”UpdatePanel1” runat=”server”>
  <ContentTemplate>
    City:<br />
    <asp:TextBox ID=”City” runat=”server” />
    <br /><br />
    State:<br />
    <asp:DropDownList ID=”Region” runat=”server”>
        <asp:ListItem Value=”AL”>Alabama</asp:ListItem>
        <asp:ListItem Value=”AK”>Alaska</asp:ListItem>
        <asp:ListItem Value=”AZ”>Arizona</asp:ListItem>
          ...
        <asp:ListItem Value=”WV”>West Virginia</asp:ListItem>
        <asp:ListItem Value=”WI”>Wisconsin</asp:ListItem>
        <asp:ListItem Value=”WY”>Wyoming</asp:ListItem>
    </asp:DropDownList>
    <br /><br />
    Zip Code:<br />
    <asp:TextBox ID=”ZipCode” runat=”server” />&nbsp;
    <asp:Button ID=”AutofillButton” Text=”Autofill”
      OnClick=”GetCityAndState” runat=”server” />
  </ContentTemplate>
</asp:UpdatePanel>

图 3  城市、州和邮政编码 UI (单击该图像获得较大视图)

现在有一个问题。UpdatePanel 已使用这种方法改善了用户的体验，但是它并不能减少在网络中传输的数据量。UpdatePanel 几乎也不能减轻服务器上的负载，到 UpdatePanel 内部的控件呈现为止，在服务器上执行的处理几乎与在完备回发期间所发生的一样。它必须是这种方法，因为 UpdatePanel 控件的好处之一是服务器端的事件处理程序（如 GetCityAndState）在异步回调内执行的操作与在传统回发中所执行的操作一样。这意味着该页面上的控件必须被实例化，它们必须有权访问视图状态等。

图 4 说明了如何在不使用 UpdatePanel 控件的情况下实现相同功能。这次，Autofill 按钮被绑定到一个 JavaScript，这个 JavaScript 激发了异步 XML-HTTP 请求给名为 GetCityAndState 的 ASMX Web 方法。该调用是通过名为 ZipCodeService 的 JavaScript 代理置入的，它由 ScriptManager 控件中的服务引用生成。GetCityAndState 以 ZIP Code 字符串作为输入，并返回一个包含相应的城市和州两个项的字符串数组。完成函数 onGetCityAndStateCompleted 会检索该数组中的项，并将它们插入到城市和州字段。从外部看起来结果是一样，但是它在内部的运行方式却是迥异。

 Figure 4 不使用 UpdatePanel 填写“城市”和“州”字段

复制代码

<asp:ScriptManager ID=”ScriptManager1” runat=”server”>
    <Services>
        <asp:ServiceReference Path=”ZipCodeService.asmx” />
    </Services>
    <Scripts>
      <asp:ScriptReference Name=”PreviewScript.js”
Assembly=”Microsoft.Web.Preview” />
    </Scripts>
</asp:ScriptManager>

City:<br />
<asp:TextBox ID=”City” runat=”server” />
<br /><br />
State:<br />
<asp:DropDownList ID=”Region” runat=”server”>
    <asp:ListItem Value=”AL”>Alabama</asp:ListItem>
    <asp:ListItem Value=”AK”>Alaska</asp:ListItem>
    <asp:ListItem Value=”AZ”>Arizona</asp:ListItem>
      ...
    <asp:ListItem Value=”WV”>West Virginia</asp:ListItem>
    <asp:ListItem Value=”WI”>Wisconsin</asp:ListItem>
    <asp:ListItem Value=”WY”>Wyoming</asp:ListItem>
</asp:DropDownList>
<br /><br />
Zip Code:<br />
<asp:TextBox ID=”ZipCode” runat=”server” />&nbsp;
<asp:Button ID=”AutofillButton” Text=”Autofill”
  OnClientClick=”autoFill(); return false;” runat=”server” />

<script type=”text/javascript”>
function autoFill()
{
    var tb = new Sys.Preview.UI.TextBox ($get(‘ZipCode’));
    var zip = tb.get_text();

    if (zip.length == 5)
        ZipCodeService.GetCityAndState (zip,
            onGetCityAndStateCompleted);
}

function onGetCityAndStateCompleted(result)
{
    if (result != null)
    {
        var tb = new Sys.Preview.UI.TextBox ($get(‘City’));
        tb.set_text(result[0]);

        var select =
            new Sys.Preview.UI.Selector ($get(‘Region’));
        select.set_selectedValue(result[1]);
    }
}
</script>

以下说明了如何通过 JavaScript 代理实现调用 ASMX Web 方法：

复制代码

[ScriptService]
public class ZipCodeService : System.Web.Services.WebService
{
    [WebMethod]
    public string[] GetCityAndState(string zip)
    {
      ...
    }
}

除了它所属的类的属性是 ScriptService，而非 WebService 这一点以外，这是一个从各方面来看都可称为标准的 Web 方法。虽然 ScriptService 与 WebService 具有相同的意义，但是它还包含了附加的意义，那就是 Web 服务的 WebMethods 可以从客户端脚本调用。

除了允许常规 WebMethods 充当 XML-HTTP 请求的目标之外，ASP.NET AJAX 还支持一种特殊类别的 Web 方法，称为页面方法。页面方法是在 Web 页面中实现的 WebMethods，也就是在 ASPX 文件或 codebehind 文件中，而不是在 ASMX 文件中。Page 方法允许开发人员在不构建专业 Web 服务的情况下提供用于 XML-HTTP 回调的端点。

页面方法必须是公开的静态方法，并且和 WebMethods 一样，必须具有 WebMethod 属性。（WebMethods 和页面方法还可以具有 ScriptMethod 属性，该属性可提供退出网络的附加控件。）在客户端，页面方法可以通过特殊的 PageMethods 代理从 JavaScript 调用。

与 Web 服务不同，页面方法无需服务引用。但是，您必须通过将 ScriptManager 控件的 EnablePageMethods 属性设置为 true 来启用页面方法，如下所示：

复制代码

<asp:ScriptManager ID=”ScriptManager1” runat=”server”
  EnablePageMethods=”true” />

实质上，页面方法提供了与 WebMethods 一样的高效性。当调用页面方法时，视图状态和其他输入未被传送到服务器。并且既然页面方法都是静态的，那么就可以在没有实例化页面对象的情况下调用它们。对页面方法的调用不会调用由常规 ASP.NET 请求触发的页面生命周期。