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
}