在 AJAX 1.1 和 3.5 中为 GridView 分页和排序启用浏览器后退按钮

引言

通常，我们会频繁使用浏览器后退按钮来返回到之前的页面。当我们在使用搜索控件（文本框、下拉列表、按钮等）进行搜索，或者在使用分页、排序等功能时，这个功能最为有用。

在所有这些情况下，当发生回发时，浏览器会更新已访问页面的信息，因此后退按钮会自动启用。然而，如果我们使用 AJAX 异步请求来更新页面，浏览器历史记录不会自动得到处理。我们需要进行一些调整来实现这一点，并通过将状态存储到浏览器历史记录中来启用浏览器后退按钮。

原始文章发布于: http://interviews.dotnetthread.com/2009/02/enabling-browser-back-button-for.html。

描述

在使用 ASP.NET 开发的普通网页中，每次回发时都会更新浏览器历史记录，即当用户单击分页链接、排序链接或搜索按钮等时。因此，用户可以通过单击浏览器后退按钮轻松查看之前的记录。

在 AJAX 启用的网页中，当我们在 UpdatePanel 中包含 GridView 时，由于回发是异步发生的，浏览器不会意识到这一点，因此浏览器历史记录不会得到更新。

在 ASP.NET AJAX 3.5 中

在 .NET Framework 3.5 中，我们有 ScriptManager 和 UpdatePanel 等 AJAX 扩展，通过它们我们可以开发 AJAX 启用的网页。

在 ASP.NET SP1 中，我们有一个 History 控件，它允许我们将历史记录点添加到我们 AJAX 启用的页面的回发中，从而为用户启用后退按钮导航。

在 ASP.NET 3.5 SP1 中使用 History 点为 GridView 分页和排序启用浏览器后退按钮

1. 为 ScriptManager 设置属性 EnableHistory="true"。
2. GridView 分页
1. 使用事件处理程序（例如：OnPageIndexChanging = "GridView1_PageIndexChanging"）来处理 GridView 的 OnPageIndexChanging 事件。
2. 在代码隐藏文件中添加以下处理程序代码

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    // To check if post back is Asynchronous
    if (ScriptManager1.IsInAsyncPostBack && !ScriptManager1.IsNavigating)
    {
        //To add History point with gridview selected page index value.
        ScriptManager1.AddHistoryPoint("PageIndex", 
                       GridView1.PageIndex.ToString());
    }
}

3. 使用事件处理程序（例如：OnNavigate="ScriptManager1_Navigate"）来处理 ScriptManager 的 OnNavigate 事件。
4. 在代码隐藏文件中添加以下处理程序代码

protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
{
    // Get GridView PagIndex from history 
    string pageIndex = e.State["PageIndex"];
    if (string.IsNullOrEmpty(pageIndex))
    {
        GridView1.PageIndex = 0;
    }
    else
    {
        GridView1.PageIndex = Convert.ToInt32(pageIndex);
    }
}

5. 现在，我们可以使用启用的后退按钮在页面之间导航。
6. 在上述情况下，PageIndex 以加密格式存储在 URL 中（页面状态被编码在浏览器查询字符串中，这意味着访问者可以收藏 AJAX 应用程序的特定状态）。如果您将 EnableSecureHistoryState=“false”，则它会直接显示在 URL 中，例如：https:///Sample/Default.aspx#&&PageIndex=1。
3. GridView 排序
1. 使用事件处理程序（例如：OnSorting="GridView1_Sorting"）来处理 GridView 的 OnSorting 事件。
2. 在代码隐藏文件中添加以下处理程序代码

protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{
    // Create the history state for Direction and Expression
    ScriptManager1.AddHistoryPoint("SortExpression", e.SortExpression);
    ScriptManager1.AddHistoryPoint("SortDirection", 
                                   e.SortDirection.ToString());
}

3. 使用事件处理程序（例如：OnNavigate="ScriptManager1_Navigate"）来处理 ScriptManager 的 OnNavigate 事件。
4. 在代码隐藏文件中添加以下处理程序代码

protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
{
    if (!string.IsNullOrEmpty(e.State["SortExpression"]))
    {
        string sortExpression = e.State["SortExpression"];
        SortDirection sortDirection = 
          (SortDirection)Enum.Parse(typeof(SortDirection), 
                                    e.State["SortDirection"]);
        // Sort the grid according to the sort
        // information in the history state
        GridView1.Sort(sortExpression, sortDirection);
    }
}

5. 在上述情况下，SortExpression 和 SortDirection 以加密格式存储在 URL 中（页面状态被编码在浏览器查询字符串中，这意味着访问者可以收藏 AJAX 应用程序的特定状态）。如果您将 EnableSecureHistoryState = “false”，则它会直接显示在 URL 中，例如 https:///Sample/Default.aspx#&&SortDirection= Ascending&SortExpression=SectorName。

使用 Nikhil's UpdateControls 在 ASP.NET 2.0 (AJAX 1.1) 中为 GridView 分页和排序启用浏览器后退按钮

1. 在此处下载 Nikhil's UpdateControls：http://www.nikhilk.net/Content/Samples/UpdateControls.zip。
2. 创建一个 ASP.NET 2.0 的 AJAX 启用的网站。
3. 向 UpdateControls.dll 添加引用。
4. 注册 tagprefix

<%@ Register Assembly="nStuff.UpdateControls" 
    Namespace="nStuff.UpdateControls" TagPrefix="uc" %>

然后，在 ScriptManager 下添加 UpdateHistory 控件。

<uc:UpdateHistory ID="UpdateHistory1" runat="server" 
    OnNavigate="ScriptManager1_Navigate">

</uc:UpdateHistory>

5. GridView 分页和排序
1. 如下处理 GridView 的 Sorting 和 PageIndexChanging 事件，其中我们将一个条目添加到 History 中，包含 PageIndex 或 SortExpression 和 Direction。

protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{
    // Create the history state for Direction and Expression
    UpdateHistory1.AddEntry("SortDirection=" + 
      e.SortDirection.ToString() + "&&SortExpression=" + e.SortExpression);
}
protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{
    // Create the history state for Direction and Expression
    ScriptManager1.AddHistoryPoint("SortExpression", e.SortExpression);
    ScriptManager1.AddHistoryPoint("SortDirection", e.SortDirection.ToString());
}

6. 最后，我们需要处理 UpdateHistory 控件的 OnNavigate 事件，以获取 PageIndex 和 SortExpression 并将它们设置到 GridView。当用户尝试使用浏览器后退和前进按钮导航时，会触发此 OnNavigate 事件。

protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
{
    string entryName = e.EntryName.ToString();
    if (e.EntryName.Contains("SortDirection") && 
        e.EntryName.Contains("SortExpression"))
    {
        string[] splitter = new String[1];
        splitter[0] = "&&";
        string[] text = e.EntryName.Split(splitter, StringSplitOptions.None);
        string sortExpression = text[1].Replace("SortExpression=", "");
        string strSortDirection = text[0].Replace("SortDirection=", "");
        SortDirection sortDirection = 
          (SortDirection)Enum.Parse(typeof(SortDirection), strSortDirection);

        // Sort the grid according to the sort information in the history state
        GridView1.Sort(sortExpression, sortDirection);
    }

    // Get GridView PagIndex from history 
    string pageIndex = string.Empty;
    if (e.EntryName.Contains("PageIndex"))
    {
        pageIndex = e.EntryName.Replace("PageIndex=", "");
    }
    if (string.IsNullOrEmpty(pageIndex))
    {
        GridView1.PageIndex = 0;
    }
    else
    {
        GridView1.PageIndex = Convert.ToInt32(pageIndex);
    }
}

我们也可以使用以下库来实现相同的功能

1. SWFAddress
2. History Event: jQuery 插件
3. RSH (Really Simple History)：http://plugins.jquery.com/project/historyevent。例如：http://www.justise.com/2009/01/26/enabling-the-back-button-in-ajax-applications/。
4. HistoryManager: Mootools 插件

原始文章发布于: http://interviews.dotnetthread.com/2009/02/enabling-browser-back-button-for.html。

愉快地使用 AJAX 编码吧……