更新：2007 年 11 月
身為網頁開發人員，您可以藉由使用 ScriptManager 和 ScriptManagerProxy 伺服器控制項，以管理瀏覽器記錄項目並提供邏輯巡覽，或是透過用戶端指令碼管理瀏覽器記錄。您可以透過 ScriptManager 控制項啟用用戶端的記錄支援，這麼做會產生可用來管理瀏覽器記錄的用戶端物件。
「記錄點」(History Point) 是 Web 應用程式中的邏輯巡覽點，可以透過狀態資訊來表示。狀態資訊可以用來將 Web 應用程式還原到先前的狀態，您可以直接使用狀態資料或是透過儲存在其他地方的狀態資訊識別項達到這個目的。
記錄點在瀏覽器記錄堆疊中僅可以 URL 的方式進行儲存。記錄狀態則是透過查詢字串中的資料，或者是以 "#" 字元標記的 URL 片段值的方式來管理。因為 URL 具有大小的限制，所以您建立的狀態資訊絕對不能太大。
下列範例中顯示的 URL 包含了足夠的記錄點資料，可用來識別狀態。有了這些資訊，應用程式便可以此狀態重建頁面。
http://MySamples/Ajax/Default.aspx#state=2
在使用者按一下瀏覽器的 [上一頁] 按鈕時，瀏覽器會在先前檢視過的 URL 間巡覽，這當中將包含具有記錄點狀態的 URL。Web 網頁中的用戶端程式碼會偵測到包含記錄狀態資料的 URL，並且引發用戶端 Sys.Application.navigate 事件。您可以處理這個事件以重設應用程式的狀態，此狀態的資訊包含在傳遞給此事件的參數值內。
.gif "注意事項") 注意事項： |
|---|
您必須有 Visual Studio 2008 Service Pack 1 (含) 以後版本，才能使用本主題中的範例程式碼。 |
啟用瀏覽器記錄管理
為了要使用記錄管理，您必須透過 ScriptManager 伺服器控制項啟用記錄管理。記錄支援預設為不啟用。在啟用的情況下，記錄的實作方式會依每個瀏覽器而不同。Internet Explorer 會轉譯 iframe 項目給用戶端，這麼做可能會對伺服器額外發出其他的要求，因此該模型是一種宣告加入 (opt-in) 方法。
下列範例顯示如何透過 ScriptManager 控制項，以宣告方式啟用記錄。
<asp:ScriptManager ID="ScriptManager1"
EnableHistory="true" />
建立瀏覽器記錄點
若要建立瀏覽器記錄點，您可以呼叫 Sys.Application.addHistoryPoint 方法。這個方法能讓您定義記錄項目、其標題和任何所需的狀態。在引發後續的記錄巡覽事件時，您可以使用狀態資料以重新建立網頁的狀態。
當您加入記錄點或是巡覽網頁，而且 URL 中包含記錄狀態時，就會引發 Sys.Application.navigate 事件。這麼一來就會在用戶端中提供一個事件，以通知您記錄狀態已經發生變更。您可以處理 navigate 事件以使用狀態資料重新建立物件，或執行其他作業。
下列範例示範如何管理用戶端程式碼中的記錄點。
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Microsoft ASP.NET 3.5 Extensions</title>
<link href="../../include/qsstyle.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript">
function page_init() {
Sys.Application.add_navigate(onStateChanged);
var cb1 = $get('clientButton1');
var cb2 = $get('clientButton2');
var cb3 = $get('clientButton3');
$addHandler(cb1, "click", clientClick);
cb1.dispose = function() { $clearHandlers(cb1); }
$addHandler(cb2, "click", clientClick);
cb2.dispose = function() { $clearHandlers(cb2); }
$addHandler(cb3, "click", clientClick);
cb3.dispose = function() { $clearHandlers(cb3); }
}
function onStateChanged(sender, e) {
// When the page is navigated, this event is raised.
var val = parseInt(e.get_state().s || '0');
Sys.Debug.trace("Navigated to state " + val);
$get("div2").innerHTML = val;
}
function clientClick(e) {
// Set a history point in client script.
var val = parseInt(e.target.value);
Sys.Application.addHistoryPoint({s: val}, "Click Button:" + val);
Sys.Debug.trace("History point added: " + val);
}
</script>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="false" EnableHistory="true" />
<script type="text/javascript">
Sys.Application.add_init(page_init);
</script>
<h2>
Microsoft ASP.NET 3.5 Extensions: Managing Browser History with Client Script</h2>
<p />
<div id="Div1" class="new">
<p>
This sample shows:</p>
<ol>
<li>The <code>Sys.Application</code> object and the <code>navigate</code> event and <code>addHistoryPoint</code> method.</li>
<li>The <code>addHistoryPoint</code> method demonstrates addition of titles.</li>
</ol>
</div>
<p>
</p>
<h2>Example 1: Managing browser history in client script</h2>
<p>This example includes three buttons. The handler for each button's <code>click</code> event sets
navigation history points using the <code>Sys.Application</code> object. The script used here, makes use of the
<code>Sys.Debug</code> class to dump trace information to the TEXTAREA at the bottom of the page.
</p>
<p>When you click the buttons, and history points are added, you will be able to see the list of history entries and their titles in the
"Recent Pages" drop-down in Internet Explorer, for example.
</P>
<p>To see history in action, perform the following steps:</p>
<ol>
<li>Press <b>1</b>. See the trace output.</li>
<li>Press <b>3</b>. See the trace output.</li>
<li>Press <b>2</b>. See the trace output.</li>
<li>Press the browser's Back button. Notice that the page is refreshed with previous data and
that trace information shows this.</li>
</ol>
<div id="div2" class="box">0</div><p></p>
<input type="button" id="clientButton1" value="1" />
<input type="button" id="clientButton2" value="2" />
<input type="button" id="clientButton3" value="3" />
<br /><br />
<textarea id="TraceConsole" cols="40" rows="5"></textarea>
</div>
</form>
</body>
</html>