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

}