Verwalten des Browserverlaufs mithilfe eines Clientskripts
Aktualisiert: November 2007
Als Seitenentwickler können Sie mit dem ScriptManager-Serversteuerelement und dem ScriptManagerProxy-Serversteuerelement Browserverlaufseinträge verwalten und logische Navigation bereitstellen. Sie können den Browserverlauf auch durch Clientskript verwalten. Sie aktivieren die Verlaufsunterstützung im Client durch das ScriptManager-Steuerelement. Dadurch werden Clientobjekte generiert, mit denen Sie den Browserverlauf verwalten können.
Ein Verlaufspunkt ist ein logischer Navigationspunkt in der Webanwendung, der über Zustandsinformationen dargestellt werden kann. Die Zustandsinformationen können verwendet werden, um einen vorherigen Zustand der Webanwendung wiederherzustellen. Dies erfolgt entweder direkt mit Zustandsdaten oder durch einen Bezeichner für Zustandsinformationen, die an einer anderen Stelle gespeichert sind.
Verlaufspunkte werden im Verlaufsstapel des Browsers nur als URLs gespeichert. Der Verlaufszustand wird als Daten in einer Abfragezeichenfolge oder als URL-Fragmentwert verwaltet, der durch das Zeichen "#" gekennzeichnet ist. Aufgrund von Größenbeschränkungen für URLs müssen die Zustandsinformationen, die Sie erstellen, so klein wie möglich sein.
Im folgenden Beispiel wird eine URL dargestellt, die genügend Verlaufspunktdaten enthält, um den Zustand zu identifizieren. Anhand dieser Daten kann die Anwendung die Seite in diesem Zustand erneut erstellen.
http://MySamples/Ajax/Default.aspx#state=2
Wenn ein Benutzer im Browser auf die Schaltfläche Zurück klickt, navigiert der Browser durch zuvor angezeigte URLs. Diese umfassen URLs mit einem Verlaufspunktzustand. Client-Code in der Website erkennt, dass die URL Verlaufszustandsdaten enthält und löst das Sys.Application.navigate-Client-Ereignis aus. Sie können das Ereignis behandeln, um die Anwendung auf den Zustand zurückzusetzen, dessen Informationen in den Parameterwerten enthalten sind, die an das Ereignis übergeben werden.
.gif "Hinweis") Hinweis: |
|---|
Um mit dem Beispielcode in diesem Thema zu arbeiten, benötigen Sie Visual Studio 2008 Service Pack 1 oder höher. |
Aktivieren der Browserverlaufsverwaltung
Um die Verlaufsverwaltung zu verwenden, müssen Sie sie durch das ScriptManager-Serversteuerelement aktivieren. Standardmäßig ist die Verlaufsunterstützung nicht aktiviert. Wenn der Verlauf aktiviert wird, wird er für jeden Browser anders implementiert. Für Internet Explorer wird ein iframe-Element für den Client gerendert, das eine zusätzliche Anfrage an den Server auslösen kann. Daher ist das Modell ein Opt-In-Ansatz.
Im folgenden Beispiel wird gezeigt, wie der Verlauf deklarativ durch das ScriptManager-Steuerelement aktiviert wird.
<asp:ScriptManager ID="ScriptManager1"
EnableHistory="true" />
Erstellen von Browserverlaufspunkten
Um einen Browserverlaufspunkt zu erstellen, rufen Sie die Sys.Application.addHistoryPoint-Methode auf. Mit dieser Methode können Sie den Verlaufseintrag, dessen Titel und jeden erforderlichen Zustand definieren. Sie können die Zustandsdaten verwenden, um den Status der Seite erneut zu erstellen, wenn ein nachfolgendes Verlaufsnavigationsereignis ausgelöst wird.
Wenn Sie einen Verlaufspunkt hinzufügen oder wenn auf die Seite navigiert ist und die Seite einen Verlaufszustand in der URL enthält, wird das Sys.Application.navigate-Ereignis ausgelöst. Dies stellt ein Ereignis im Client bereit, das Sie über die Änderung des Verlaufszustands benachrichtigt. Sie können das navigate-Ereignis behandeln, um Objekte mithilfe von Zustandsdaten neu zu erstellen oder um andere Vorgänge auszuführen.
Im folgenden Beispiel wird gezeigt, wie Sie Verlaufspunkte in Clientcode verwalten können.
<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>