Gestione della cronologia del browser tramite script client
Aggiornamento: novembre 2007
Gli sviluppatori di pagine possono gestire le voci della cronologia esplorazioni e fornire funzionalità di spostamento logico tramite i controlli server ScriptManager e ScriptManagerProxy. La cronologia esplorazioni può essere gestita anche tramite script client. Per attivare il supporto della cronologia nel client è possibile utilizzare il controllo ScriptManager. Questa attivazione crea oggetti client utilizzabili per gestire la cronologia esplorazioni.
Un punto chiave di navigazione è un punto dello spostamento logico nell'applicazione Web rappresentabile tramite informazioni sullo stato. Queste informazioni possono essere utilizzate per ripristinare uno stato precedente dell'applicazione Web, direttamente con i dati relativi allo stato o tramite un riferimento a informazioni sullo stato memorizzate altrove.
I punti chiave di navigazione vengono memorizzati nello stack della cronologia esplorazioni esclusivamente nel formato URL. Lo stato della cronologia viene gestito come dati in una stringa di query o come un valore di frammento di URL contrassegnato dal carattere "#". A causa delle restrizioni imposte sulle dimensioni degli URL, le informazioni sullo stato create devono presentare la minore lunghezza possibile.
Nell'esempio seguente viene illustrato un URL contenente un punto chiave di navigazione che presenta una quantità di dati sufficiente a consentire l'identificazione dello stato. Mediante questo punto chiave di navigazione, quindi, l'applicazione può ricreare la pagina in tale stato.
http://MySamples/Ajax/Default.aspx#state=2
Quando un utente fa clic sul pulsante Indietro del browser, quest'ultimo si sposta fra gli URL visualizzati in precedenza, fra cui gli URL contenenti dati relativi allo stato basati su un punto chiave di navigazione. Il codice client contenuto nella pagina Web rileva che l'URL contiene dati relativi allo stato della cronologia e genera l'evento client Sys.Application.navigate. Questo evento può essere gestito per reimpostare l'applicazione allo stato definito in base alle informazioni contenute nei valori di parametro passati all'evento.
.gif "Nota") Nota: |
|---|
Per utilizzare il codice di esempio contenuto in questo argomento occorre Visual Studio 2008 Service Pack 1 o una versione successiva. |
Attivazione della gestione della cronologia esplorazioni
Per utilizzare la gestione della cronologia è necessario attivarla tramite il controllo server ScriptManager. Per impostazione predefinita, il supporto della cronologia non è attivato. Quando viene attivata, la cronologia viene implementata in modo diverso per ogni browser. In Internet Explorer viene eseguito il rendering di un elemento iframe nel client, che può generare una richiesta aggiuntiva al server. Questo modello rappresenta pertanto un approccio basato su scelta esplicita.
Nell'esempio seguente viene mostrato come attivare la cronologia in modo dichiarativo tramite il controllo ScriptManager.
<asp:ScriptManager ID="ScriptManager1"
EnableHistory="true" />
Creazione di punti chiave di navigazione del browser
Per creare un punto chiave di navigazione del browser occorre chiamare il metodo Sys.Application.addHistoryPoint. Questo metodo consente di definire la voce di cronologia, il relativo titolo e qualsiasi informazione necessaria relativa allo stato. I dati relativi allo stato possono essere utilizzati per ricreare lo stato della pagina quando in seguito viene generato un evento di spostamento nella cronologia.
Quando si aggiunge un punto chiave di navigazione o quando l'URL della pagina visitata contiene dati relativi allo stato della cronologia, il sistema genera l'evento Sys.Application.navigate. Ciò fornisce nel client un evento che notifica la modifica dello stato della cronologia. L'evento navigate può essere gestito per ricreare oggetti tramite i dati relativi allo stato o per eseguire altre operazioni.
Nell'esempio seguente viene illustrato come gestire i punti chiave di navigazione in un codice client.
<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>