ASP.NET Ajax – History Support

在ASP.NET Ajax2.0的時候，使用ScriptManager & UpdatePanel的時候，會有一個很大的困擾：使用者沒辦法進行歷史瀏覽，瀏覽器中的上一步和下一步是無法操作的。

但是在ASP.NET Ajax 3.5 SP 1中，ScriptManager提供了一些方法來建立歷史記錄點，不管是在Client or Server端，都可以輕鬆的處理這件事。

 

以下的小範例是Server端的操作示範：

 

1. 在ScriptManager 中啟用EnableHistory：

1 <asp:ScriptManager ID="ScriptManager1" runat="server" EnableHistory="True">

 

2. 建立歷史記錄點：

當進行非同步動作時，而且非瀏覽歷史記錄時，使用ScriptManager.AddHistoryPoint建立歷史記錄點。

01 protected void Page_Load(object sender, EventArgs e)
02 {
03     if (ScriptManager1.IsInAsyncPostBack && !ScriptManager1.IsNavigating)
04     {
05         this.AddHistoryPoint(selectedItem);
06     }
07 }
08 private void AddHistoryPoint(string historyPointName)
09 {
10     NameValueCollection pageState = new
11     NameValueCollection();
12     pageState.Add("animalIndex", this.AnimalDropDown.SelectedIndex.ToString(CultureInfo.InvariantCulture));
13     this.ScriptManager1.AddHistoryPoint(pageState,historyPointName);
14 }

3. 處理歷史瀏覽：

利用ScriptManager onNavigate事件觸發時處理還原資料的動作。

01 protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
02 {
03     NameValueCollection pageState = e.State;
04     string animalIndexString =pageState.Get("animalIndex");
05     if (string.IsNullOrEmpty(animalIndexString))
06     {
07         AnimalDropDown.SelectedIndex = 0;
08     }
09     else
10     {
11         int index = Convert.ToInt32(animalIndexString, CultureInfo.InvariantCulture);
12         AnimalDropDown.SelectedIndex = index;
13     }
14
15 }

效果畫面：

 

2009.11.25 補充Client的使用方式。

**Client需特別注意：

Sys.Application.addHistoryPoint會觸發navigate事件，所以利用了userNavigated來判斷是否為使用者觸發navigate。

userNavigated預設為true，在addHistoryPoint前先設為false，處理完畢之後再設為true。

01 //使用Sys.Application.addHistoryPoint增加紀錄點
02 function addHistoryPoint(historyPointName)
03 {
04     var animalIndex = $get('AnimalSelect').selectedIndex;
05     var animalDescription = $get('Description').innerHTML;
06     var pageState = { "animalIndex": animalIndex,"animalDescription": animalDescription};
07     userNavigated = false;
08     Sys.Application.addHistoryPoint(pageState,historyPointName);
09     userNavigated = true;
10 }
11 //處理瀏覽事件Sys.Application.add_navigate
12 function pageLoad()
13 {
14     Sys.Application.add_navigate(onNavigate);
15 }
16
17 function onNavigate(sender, e)
18 {
19          //判斷是否為使用者觸發
20     if (userNavigated)
21     {
22          restorePage(e.get_state());
23     }
24 }
25 //回覆狀態
26 function restorePage(pageState)
27 {
28     var animalIndex = pageState.animalIndex;
29     var animalDescription = pageState.animalDescription;
30
31     if (animalIndex == null || animalIndex == "")
32     {
33         $get('AnimalSelect').selectedIndex = 0;
34     }
35     else
36     {
37         $get('AnimalSelect').selectedIndex = animalIndex;
38     }
39     if (animalDescription == null || animalDescription =="")
40     {
41         hideDescription();
42     }
43     else
44     {
45         showDescription(animalDescription);
46     }
47 }