流星的隨筆記事~☆

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

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

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

1. 在ScriptManager 中啟用EnableHistory：

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

2. 建立歷史記錄點：

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

protected void Page_Load(object sender, EventArgs e)
{
	if (ScriptManager1.IsInAsyncPostBack && !ScriptManager1.IsNavigating)
	{
		this.AddHistoryPoint(selectedItem);
	}
}
private void AddHistoryPoint(string historyPointName)
{
	NameValueCollection pageState = new
	NameValueCollection();
	pageState.Add("animalIndex", this.AnimalDropDown.SelectedIndex.ToString(CultureInfo.InvariantCulture));
	this.ScriptManager1.AddHistoryPoint(pageState,historyPointName);
}

3. 處理歷史瀏覽：

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

protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
{
	NameValueCollection pageState = e.State;
	string animalIndexString =pageState.Get("animalIndex");
	if (string.IsNullOrEmpty(animalIndexString))
	{
		AnimalDropDown.SelectedIndex = 0;
	}
	else
	{
		int index = Convert.ToInt32(animalIndexString, CultureInfo.InvariantCulture);
		AnimalDropDown.SelectedIndex = index;
	}

}

效果畫面：

2009.11.25 補充Client的使用方式。

**Client需特別注意：

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

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

//使用Sys.Application.addHistoryPoint增加紀錄點
function addHistoryPoint(historyPointName)
{
	var animalIndex = $get('AnimalSelect').selectedIndex;
	var animalDescription = $get('Description').innerHTML;
	var pageState = { "animalIndex": animalIndex,"animalDescription": animalDescription};
	userNavigated = false;
	Sys.Application.addHistoryPoint(pageState,historyPointName);
	userNavigated = true;
}
//處理瀏覽事件Sys.Application.add_navigate
function pageLoad()
{
	Sys.Application.add_navigate(onNavigate);
}

function onNavigate(sender, e)
{
         //判斷是否為使用者觸發
	if (userNavigated)
	{
	     restorePage(e.get_state());
	}
}
//回覆狀態
function restorePage(pageState)
{
	var animalIndex = pageState.animalIndex;
	var animalDescription = pageState.animalDescription;

	if (animalIndex == null || animalIndex == "")
	{
		$get('AnimalSelect').selectedIndex = 0;
	}
	else
	{
		$get('AnimalSelect').selectedIndex = animalIndex;
	}
	if (animalDescription == null || animalDescription =="")
	{
		hideDescription();
	}
	else
	{
		showDescription(animalDescription);
	}
}

相關連結

MSDN 虛擬實驗室：AJAX 3.5 SP1

PS: 微軟的實驗Lab不錯玩，可是不能直接複製貼上有點討厭。