摘要:ASP.NET 3.5 對 AJAX 在瀏覽器歷程巡覽的解決方案
原文：http://blog.xuite.net/j2ee/coder/14877242
傳統的 AJAX 網頁，因為瀏覽器的歷程不會去做記錄，因此當使用者按下瀏覽器的「上一頁」按鈕後，會無法正常回到前一份動態更新的頁面，且瀏覽器書籤 (我的最愛) 所記錄到的，也不是動態更新後的頁面。微軟在 2007 年 7 月、2007 年 12 月，分別推出了「ASP.NET Futures」、「ASP.NET 3.5 Extensions Preview」套件，提出了這項問題的解決方案，前者使用一種新增的 History 控制項，將瀏覽器的巡覽歷程資料，經過序列化並加密過後，附加在 URL 網址後方，以供瀏覽器本身作為辨識之用；後者直接將此 History 控制項及其功能，整併至新一代的 ScriptManager 控制項當中。本文提供一個版工自行撰寫的範例下載，讓置於 UpdatePanel 中的 GridView 控制項，在使用者按過 GridView 的頁碼換頁後，或移至別頁再移回本頁後，都能保留 GridView 原本的頁數和狀態。本範例經過 IE 6 SP1、IE 7、Firefox 2.0.0.11 繁中正式版測試後，都能夠正常執行。
本文範例下載網址 (507 KB)：code.zip
http://j2se.myweb.hinet.net/blog_article/071219/code.zip
(必須先進入上方的下載頁才能下載。Hinet 的免費網頁空間，不能直接在超連結上按滑鼠右鍵「另存目標」)
(若您在下載頁中，看不到「立即下載」的綠色圖形按鈕，請暫時將該下載頁加入您 IE「信任的網站」中，再重新整理頁面)
本下載範例，關鍵在 testHistory1.aspx、testHistory1.aspx.cs。使用的資料庫為 SQL Server 的 Northwind，執行前記得先修改 web.config 中的資料庫連線帳號、密碼。
不 論您的平台為 ASP.NET 2.0 或 3.5，都可執行這支範例。範例的 Bin 資料夾內，已內建執行所需要的 Microsoft.Web.Preview.dll 組件檔 (由 Futures 套件自動產生)。若您只是要執行此範例，不須另外安裝 ASP.NET Futures 套件。
2007 年年中推出的「ASP.NET Futures」套件，內建了一個 History 控制項，讓開發人員可從後端的 .NET 程式或前端的 JavaScript，去管理 browser 的 history state (歷程) 和 bookmarking (書籤；我的最愛)，讓 ASP.NET AJAX 網頁不但從此支援瀏覽器的 Back / Forward 按鈕 navigation (巡覽)，亦可自訂瀏覽器 history list 中要顯示的 title，或是將某一頁 AJAX 頁面的書籤郵寄給需要的人。讓 .NET 的開發人員，或可從此捨棄建立隱藏 iframe 的做法。
其 原理為用 History 控制項的 AddHistoryPoint() 方法，將 state (如本文範例中，UpdatePanel 裡 GridView 的目前所在頁數) 指派給一個 Dictionary<TKey, TValue> 型別變數 (state) 的 Key，並將這份 history-point 資料做過序列化和加密後，以亂碼的型式附加在瀏覽器 URL 的後面 (參考本文圖 4)；當使用者換頁時 (如本文範例中，按下 GridView 的頁碼，或是按下 GridView 中的超連結進到 testHistory2.aspx 時)，都會再加入新的 history-point 資料。之後，當使用者每次按下瀏覽器的「上一頁」時，都會觸發 History 控制項的 Navigate 事件，並讓開發人員使用已經附加至 URL 的資料重建 page state，視專案需求，以此資料撰寫自訂的功能 (如本文範例中，用來指定 GridView 的 PageIndex)。
ASP.NET Futures (July 2007): Managing Browser History and Back Button Support in ASP.NET AJAX:
http://quickstarts.asp.net/Futures/ajax/doc/history.aspx
上 方連結中的教學範例，第二段的「Client History Management」是指不用後端的 VB 或 C# 實作，改用前端的 JavaScript 去管理 history state；第三段的「Enabling Permalinks to Page State」是指可讓使用者將「permalink (永久連結)」加入他瀏覽器的「書籤；我的最愛」，避免以往 AJAX 網頁無法讓使用者循書籤再連上原先的頁面；第四段的「Managing the Title of a History Entry」是指可將頁面標題，加入瀏覽器「上一頁、下一頁」按鈕旁邊的「最近存取的頁面」下拉選單中，可讓使用者有比較好的操作體驗。
上述的幾個線上範例，在 ASP.NET AJAX IN ACTION 的第 13 章 (有中譯本) 也有相關範例，您可自行去 Manning 或旗標出版社的網站下載程式碼。
http://tlsj.tenlong.com.tw/WebModule/BookSearch/bookSearchViewAction.do?isbn=9789574425600&sid=41606
雖 然 Dino Esposito 於 2007/12/17 在其部落格中，提到微軟在 12 月初最新發佈的「ASP.NET 3.5 Extensions Preview」套件，已經將 History 控制項整合進新一代的 ScriptManager 控制項中：
http://dotnetslackers.com/articles/aspnet/AFirstLookAtASPNETExtensions35HistoryPoints.aspx
但其使用方式仍大同小異，新的 script manager 類別，仍然有 Navigate 事件和 AddHistoryPoint() 方法。
若您要用「ASP.NET Futures」套件的相關功能 (參考本文下方的「參考資料」) 開發專案，可先去 ASP.NET 的官方網站，下載套件的安裝執行檔，如下圖 1 所示：
圖 1 兩個套件的下載頁面 (2007/12/18 的畫面)
「ASP.NET Futures」套件可安裝在 VS 2005、VS 2008、VWD 2005、VWD 2008，版工本身花了 8 分鐘才裝起來；而「ASP.NET 3.5 Extensions Preview」套件只能安裝在 .NET Framework 3.5 環境下，且不知是否因為版工的 .NET Framework 3.5 為 Pre-Release 版本、VS 2008 Professional 為 Beta 2 版本的緣故，後者安裝時並未成功。
圖 2 安裝好套件後，VS 即可新增內建 Futures 功能的專案
圖 3 安裝好套件後，VS 工具箱會多出兩組項目
最 後再回到本文一開始提供的下載範例。裡面的 Default.aspx 為傳統 GridView 放在 UpdataPanel 中，當您按下 GridView 右下方的頁碼換頁後，瀏覽器無法回上一頁 (呈現灰色唯讀)；而且當您按下 GridView 中的文字超連結，進入 Default2.aspx 後，再按瀏覽器的「上一頁」回到 Default.aspx 時，GridView 的頁數也會自動跳回第一頁，而非我們預期的、原本離開 Default.aspx 時的那個頁數。
本 下載範例，引用 ASP.NET Futures 套件中的 History 控制項，利用存在 URL 後面的巡覽資料，同時解決上述兩個問題。範例為 testHistory1.aspx、testHistory1.aspx.cs，執行畫面如下圖 4、5、6 所示：
圖 4 testHistory1.aspx 中的 GridView 因已換頁過，因此網址後面附了一串加密過的巡覽歷程資料
圖 5 按下 GridView 中的英文超連結，進入 testHistory2.aspx，再準備按瀏覽器的「上一頁」
圖 6 巡覽回 testHistory1.aspx 後，觸發 Navigate 事件並重新指定 GridView 的 PageIndex，因此 GridView 能保留在預期的頁數
本 下載範例只是版工為了測試新功能臨時改寫而成，testHistory1.aspx.cs 中的程式碼，有些是為了讓 GridView 能正常換頁，或讓瀏覽器能取得索引值，正常巡覽回第一頁而硬湊出來。您可視專案需要，再自行發揮創意搭配其他控制項改寫，像本文前述 Dino Esposito 部落格的文章，就是搭配 DetailsView 控制項使用。
結論：
雖 然 History 控制項的功能以後可能會被併至 ScriptManager 控制項中，但其觀念和使用方法仍很類似。若您擔心現在用 History 控制項改寫 AJAX 專案的巡覽功能，將來移植到新的 .NET 平台會有相容性問題，可把 Microsoft.Web.Preview.dll 拷貝至專案的 Bin 資料夾中，即可延用目前既有的程式碼。
參考資料：
ASP.NET Futures (July 2007): Managing Browser History and Back Button Support in ASP.NET AJAX:
http://quickstarts.asp.net/Futures/ajax/doc/history.aspx
http://quickstarts.asp.net/Futures/default.aspx
A First Look at ASP.NET Extensions 3.5—History Points:
http://dotnetslackers.com/articles/aspnet/AFirstLookAtASPNETExtensions35HistoryPoints.aspx
What's in the Futures Release?
http://www.asp.net/downloads/futures/
VS 2008 Multi-Targeting Support:
http://weblogs.asp.net/scottgu/archive/2007/06/20/vs-2008-multi-targeting-support.aspx
ASP.NET 3.5 Extensions CTP Preview Released:
http://weblogs.asp.net/scottgu/archive/2007/12/09/asp-net-3-5-extensions-ctp-preview-released.aspx
Microsoft ASP.NET Futures (July 2007)中History在客戶端的使用:
http://www.cnblogs.com/chsword/archive/2007/09/19/897929.html
ASP.NET AJAX IN ACTION 中譯本第 13 章:
http://tlsj.tenlong.com.tw/WebModule/BookSearch/bookSearchViewAction.do?isbn=9789574425600&sid=41606
相關資料：
ASP.NET 3.5 extensions-DotNet開發聖殿:
http://blog.sina.com.tw/dotnet/article.php?pbgid=4907&entryid=575383
.NET Magazine 12月號 - ASP.NET Futures－Dynamic Data Controls:
http://www.netmag.com.tw/
ASP.NET 3.5 Extensions: All About Dynamic Data:
http://blogs.msdn.com/brada/archive/2007/12/13/asp-net-3-5-extensions-all-about-dynamic-data.aspx
ASP.NET MVC + jQuery + Newtonsoft.Json 快樂的AJAX:
http://blog.blueshop.com.tw/uni2tw/
