让 ASP.NET AJAX 支持浏览器的 History Navigation - Part 2

续前一篇文章「让 ASP.NET AJAX 支持浏览器的 History Navigation - Part 1」，之前介绍的是用 History 控件的做法，虽然可适用 ASP.NET 2.0 及之后所有 .NET 版本的网页，但必须多经一次安装 Future 套件，或多做一次引用 Microsoft.Web.Preview.dll 的动作，毕竟较不方便。本帖介绍的是 ASP.NET 3.5 SP1 / VS 2008 SP1 的做法，直接引用已经内建在新版 ScriptManager 控件内的 History Navigation 功能，达成和上一篇文章相同的效果。

如 Dino Esposito 在这篇文章所说的：
http://dotnetslackers.com/articles/aspnet/AFirstLookAtASPNETExtensions35HistoryPoints.aspx

在已安装 VS 2008 SP1 的网站里 (等同已安装 .NET 3.5 SP1)，先启用 ScriptManager 内建的 History Navigation 功能，并建立 ScriptManager1_Navigate 事件处理函数，如下：

<asp:ScriptManager ID="ScriptManager1" runat="server" EnableHistory="true" 
        onnavigate="ScriptManager1_Navigate">
</asp:ScriptManager>

之后只要使用者在 URL 网址中做 Navigate 时 (如本帖下载示例中，在 UpdatePanel 中的 GridView 按页码换页后，再按浏览器的「上一页」时)，就会触发此一事件。
 ScriptManager..::.Navigate Event:
 Occurs when the user clicks the browser's Back or Forward button.

接下来，程序员就要在 Code-Behind 中撰码，在适当时机加入 History Point。以本帖下载示例而言，就是在 GridView1_PageIndexChanged 事件处理函数中，撰码加入 History Point。此后，当使用者在做 URL Navigate 时，例如像本例中，单击 GridView 的页码换页时，新版的 ScriptManager 控件就会在 URL 网址后面，加上一串看似乱码的 user state。如本帖的前一篇文章所提过的，这串浏览器的 navigating 历程信息，会经过「序列化 (serialization)」并加密后，再附加在 URL 网址后方，以供浏览器作为辨识之用。

----------------------------------------
本帖的 ASP.NET 3.5 + SP1 示例代码下载点：
https://files.cnblogs.com/WizardWu/081005.zip
(执行本示例，需要 VS 2008 SP1 + SQL Server 的 Northwind 数据库)
----------------------------------------

这个示例和传统的 AJAX + GridView 网页，有几个不同点：

1、当 GridView 换页时，IE (或 Firefox) 左上方的「上一页、下一页」按钮会自动启用；若为传统的 AJAX 网页则不会。

2、假设您换页到 GridView 的第二页 (或其它任何一页)，此时若再进到别的页面，再按浏览器左上方的「上一页」回来时，GridView 仍会停在第二页；若为传统的 AJAX 网页则不然，而是一律跳回 GridView 的第一页。

3、当 GridView 换页后，此时若将该页加入浏览器的「书签 (bookmark)」，会一并记录是在 GridView 的哪一页；若为传统的 AJAX 网页则不会记录。

4、搭配 FormView、DetailsView 控件使用时，在改变这两个控件的状态时 (Insert、Edit、ReadOnly mode)，亦能记录页数和 state (这点版工我未测试成功)。

5、搭配 ASP.NET 的 Wizard 控件使用时，亦能记录页数和 state (这是 Dino 讲的，这点版工我未试过)。

<form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnableHistory="true" 
                onnavigate="ScriptManager1_Navigate">
        </asp:ScriptManager>
    
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
            
            <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
                AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="OrderID" 
                DataSourceID="SqlDataSource1" onpageindexchanged="GridView1_PageIndexChanged">
                <Columns>
                    <asp:BoundField DataField="OrderID" HeaderText="OrderID" InsertVisible="False" 
                        ReadOnly="True" SortExpression="OrderID" />
                    <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" 
                        SortExpression="CustomerID" />
                </Columns>
            </asp:GridView>
        
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
                SelectCommand="SELECT [OrderID], [CustomerID] FROM [Orders]">
            </asp:SqlDataSource>    
                
            </ContentTemplate>
        </asp:UpdatePanel>    
    
    </div>
</form>

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page 
{
    private static string pageKey = "p";

    protected void Page_Load(object sender, EventArgs e)
    { }

    protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
    {
        if (e.State.Count <= 0)
        {
            // Setup default state   
            GridView1.PageIndex = 0;
            return;
        }

        string key = e.State.AllKeys[0];
        string state = String.Empty;

        if (String.Equals(key, pageKey))
        {
            state = e.State[key];
            int pageIndex = Int32.Parse(state
            GridView1.PageIndex = pageIndex;            
        }
    }

    protected void GridView1_PageIndexChanged(object sender, EventArgs e)
    {
        string state = (sender as GridView).PageIndex.ToString();
        ScriptManager.GetCurrent(this).AddHistoryPoint(pageKey, state);    
    }

}

 
 ---------------------------------------------------------------------------------
 
 参考文件：
 
 [1] MSDN Library, 「ScriptManager.Navigate Event (System.Web.UI)」:
 http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.navigate.aspx
 
 [2] MSDN Library, 「ScriptManager..::.AddHistoryPoint Method 」:
 http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.addhistorypoint.aspx
 
 [3] Dino Esposito, 「A First Look at ASP.NET Extensions 3.5—History Points」:
 http://dotnetslackers.com/articles/aspnet/AFirstLookAtASPNETExtensions35HistoryPoints.aspx