Gestione della cronologia del browser tramite controlli server ASP.NET
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. Il controllo server ScriptManager consente di impostare punti chiave di navigazione nell'applicazione. Entrambi i controlli consentono di gestire lo spostamento che si verifica quando la pagina Web viene richiesta in conseguenza di uno stato della cronologia.
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 ed effettua una richiesta alla pagina, passando le informazioni sullo stato. Quando la pagina elabora la richiesta, legge le informazioni sullo stato della cronologia e attiva un postback asincrono. I controlli server ScriptManager e ScriptManagerProxy generano quindi l'evento Navigate. È possibile gestire questo evento e ricreare la pagina per l'applicazione Web secondo le proprie esigenze.
.gif "Nota") Nota: |
|---|
Per compilare il codice di esempio contenuto in questo argomento occorre Visual Studio 2008 Service Pack 1 o una versione successiva. |
Sintassi dei controlli ScriptManager e ScriptManagerProxy
Nell'esempio seguente viene illustrata la sintassi del controllo server ScriptManager per l'utilizzo della cronologia esplorazioni.
<asp:ScriptManager
EnableHistory="true|false"
EnableStateHash="true|false"
OnNavigate="navigateEventhandlerName">
</asp:ScriptManager>
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 browser, 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 AddHistoryPoint del controllo ScriptManager. Questo metodo consente di definire lo stato del server e le chiavi nonché alcuni dati facoltativi per rappresentare nel browser il titolo della voce della cronologia. 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 crea un punto chiave di navigazione, per impostazione predefinita i dati serializzati e crittografati vengono aggiunti all'URL della pagina Web. L'URL risultante viene incluso nello stack della cronologia del browser.
| Nota: |
|---|
I punti chiave di navigazione in genere vengono aggiunti solo in risposta ad azioni dell'utente, ad esempio se quest'ultimo fa clic su un'opzione. Nella maggior parte dei casi, infatti, i punti chiave di navigazione non vengono aggiunti soltanto in conseguenza dell'esecuzione del codice dell'applicazione. |
Nell'esempio seguente il controllo UpdatePanel viene utilizzato per attivare postback asincroni nella pagina. Il controllo ScriptManager viene utilizzato per aggiungere punti chiave di navigazione durante il gestore eventi Click dei pulsanti che attivano i postback asincroni. Quando si fa clic sul pulsante Indietro del browser, anziché uscire dalla pagina Web il sistema si sposta attraverso gli stati precedenti della cronologia della pagina.
Eseguire un esempio di questa funzionalità (informazioni in lingua inglese).
<%@ Page Language="VB" %>
<%@ Import Namespace="System.Globalization" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
Private Shared key As String = "s"
' Handle the Navigate event
Public Sub OnNavigateHistory(ByVal sender As Object, ByVal e As HistoryEventArgs)
LabelHistoryData.Text = Server.HtmlEncode(e.State(key))
End Sub
' On button click, handle the event and set a history point.
Public Sub ButtonClick(ByVal sender As Object, ByVal e As EventArgs)
LabelHistoryData.Text = CType(sender, Button).Text
ScriptManager.GetCurrent(Me).AddHistoryPoint(key, LabelHistoryData.Text)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Microsoft ASP.NET 3.5 Extensions: Managing History</title>
<link href="../../include/qsstyle.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" OnNavigate="OnNavigateHistory"
EnableHistory="true" EnableSecureHistoryState="false" />
<h2>
Microsoft ASP.NET 3.5 Extensions: Adding Server-side Browser History Points</h2>
<p/>
<div id="Div1" class="new">
<p>This sample shows:</p>
<ol>
<li>How to use the <code>ScriptManager</code> control to set a history point.</li>
<li>The <code>ScriptManager</code> control, the <code>EnableHistory</code> and
<code>EnableSecureHistoryState</code> properties and
the <code>OnNavigate</code> property to handle the <code>navigate</code>event.<br />
</li>
</ol>
</div>
<p>
In this example, three buttons outside the <code>UpdatePanel</code> control can
trigger an asynchronous postback. You can see the results of the update through
the date and time that renders in the Web page along with a value indicating the
button that triggered the partial refresh.</p>
<p>
When you press a button, the server-side <code>Click</code> event handler for the button
stores data and uses the data as a history point. If you click the browser's Back button,
you will see the state Web page return to a previous button value, representing the previous
button you pressed. However, you will see that the time within the Web page continues to be
incremented.
</p>
<p>To see the effect of this logic, do the following.</p>
<ol>
<li>Press <b>1</b>. See the panel refresh.</li>
<li>Press <b>3</b>. See the panel refresh.</li>
<li>Press <b>2</b>. See the panel refresh.</li>
<li>Press the browser's Back button. Note that the panel is refreshed with previous
data, but the date and time are updated to current values.</li>
</ol>
<asp:UpdatePanel ID="UpdatePanel1" >
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Button3" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel CssClass="box" ID="Content" Height="40px">
Date and Time:
<%= DateTime.Now.ToLongTimeString() %>
<br />
Page's refresh state:
<asp:Label ID="LabelHistoryData" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<p />
<asp:Button ID="Button1" Text="Key 1" OnClick="ButtonClick" />
<asp:Button ID="Button2" Text="Key 2" OnClick="ButtonClick" />
<asp:Button ID="Button3" Text="Key 3" OnClick="ButtonClick" />
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Globalization" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
private static String key = "s";
// Handle the Navigate event
public void OnNavigateHistory(object sender, HistoryEventArgs e) {
LabelHistoryData.Text = Server.HtmlEncode(e.State[key]);
}
// On button click, handle the event and set a history point.
public void ButtonClick(object sender, EventArgs e) {
LabelHistoryData.Text = ((Button)sender).Text;
ScriptManager.GetCurrent(this).AddHistoryPoint(key, LabelHistoryData.Text);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Microsoft ASP.NET 3.5 Extensions: Managing History</title>
<link href="../../include/qsstyle.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" OnNavigate="OnNavigateHistory"
EnableHistory="true" EnableSecureHistoryState="false" />
<h2>
Microsoft ASP.NET 3.5 Extensions: Adding Server-side Browser History Points</h2>
<p/>
<div id="Div1" class="new">
<p>This sample shows:</p>
<ol>
<li>How to use the <code>ScriptManager</code> control to set a history point.</li>
<li>The <code>ScriptManager</code> control, the <code>EnableHistory</code> and
<code>EnableSecureHistoryState</code> properties and
the <code>OnNavigate</code> property to handle the <code>navigate</code>event.<br />
</li>
</ol>
</div>
<p>
In this example, three buttons outside the <code>UpdatePanel</code> control can
trigger an asynchronous postback. You can see the results of the update through
the date and time that renders in the Web page along with a value indicating the
button that triggered the partial refresh.</p>
<p>
When you press a button, the server-side <code>Click</code> event handler for the button
stores data and uses the data as a history point. If you click the browser's Back button,
you will see the state Web page return to a previous button value, representing the previous
button you pressed. However, you will see that the time within the Web page continues to be
incremented.
</p>
<p>To see the effect of this logic, do the following.</p>
<ol>
<li>Press <b>1</b>. See the panel refresh.</li>
<li>Press <b>3</b>. See the panel refresh.</li>
<li>Press <b>2</b>. See the panel refresh.</li>
<li>Press the browser's Back button. Note that the panel is refreshed with previous
data, but the date and time are updated to current values.</li>
</ol>
<asp:UpdatePanel ID="UpdatePanel1" >
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Button3" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel CssClass="box" ID="Content" Height="40px">
Date and Time:
<%= DateTime.Now.ToLongTimeString() %>
<br />
Page's refresh state:
<asp:Label ID="LabelHistoryData" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<p />
<asp:Button ID="Button1" Text="Key 1" OnClick="ButtonClick" />
<asp:Button ID="Button2" Text="Key 2" OnClick="ButtonClick" />
<asp:Button ID="Button3" Text="Key 3" OnClick="ButtonClick" />
</div>
</form>
</body>
</html>
Gestione delle richieste al server
Quando in una richiesta viene rilevato lo stato del server, il sistema genera l'evento Navigate. Ciò è analogo a un postback asincrono al server. Quando occorre determinare se il postback si è verificato per uno spostamento o per uno scopo di altro tipo, è possibile leggere la proprietà IsNavigating. Se questa proprietà è impostata su true, il postback è dovuto a una chiamata di spostamento.
Nell'esempio seguente viene illustrato un controllo server Wizard contenuto all'interno di un controllo UpdatePanel. Questa configurazione fa in modo che il controllo Wizard esegua postback asincroni quando gli utenti si spostano nella procedura guidata. Nell'esempio, il codice aggiunge punti chiave di navigazione durante lo spostamento fra i passaggi della procedura guidata.
Eseguire un esempio di questa funzionalità (informazioni in lingua inglese).
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
Private Shared stepKey As String = "s"
Protected Sub OnNavigateHistory(ByVal sender As Object, ByVal args As HistoryEventArgs)
Dim stateString As String = args.State(stepKey)
Dim [step] As Integer = If(stateString IsNot Nothing, Integer.Parse(stateString), 0)
MachineConfiguratorWizard.ActiveStepIndex = [step]
End Sub
Protected Sub OnActiveStepChanged(ByVal sender As Object, ByVal e As EventArgs)
If Not ScriptManager1.IsNavigating AndAlso IsPostBack Then
Dim index As Integer = MachineConfiguratorWizard.ActiveStepIndex
ScriptManager1.AddHistoryPoint(stepKey, index.ToString(), "Step " + (index + 1).ToString())
End If
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
<title>Microsoft ASP.NET 3.5 Extensions: Managing History</title>
<link href="../../include/qsstyle.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<div>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" OnNavigate="OnNavigateHistory"
EnableHistory="true" EnableSecureHistoryState="false" />
<h2>
Microsoft ASP.NET 3.5 Extensions: Adding Server-side Browser History Points</h2>
<p/>
<div id="Div1" class="new">
<p>This sample shows:</p>
<ol>
<li>How to use the <code>ScriptManager</code> control to set a history point.</li>
<li>The <code>ScriptManager</code> control, the <code>EnableHistory</code> and
<code>EnableSecureHistoryState</code> properties and
the <code>OnNavigate</code> property to handle the <code>navigate</code> event.
</li>
<li>Protecting the history code with <code>IsNavigating</code>
</li>
</ol>
</div>
<p>
In this example, the <code>Wizard</code> server control provides it's own navigation, but
as each step is selected a history point is added. In order to do this, a history point is only added if the page is not being refreshed beacuse of a history point.</p>
<asp:UpdatePanel ID="WizardPanel">
<ContentTemplate>
<asp:Wizard ID="MachineConfiguratorWizard" ActiveStepIndex="0" BackColor="#dddddd"
BorderWidth="10" CellPadding="10" CellSpacing="10" Height="200px" Width="700px"
FinishPreviousButtonText="<" StartNextButtonText=">" StepNextButtonText=">" StepPreviousButtonText="<"
FinishCompleteButtonText="<|>" OnActiveStepChanged="OnActiveStepChanged">
<WizardSteps>
<asp:WizardStep ID="Step1" Title="Step 1">
<h2>
STEP 1</h2>
<br />
</asp:WizardStep>
<asp:WizardStep ID="Step2" Title="Step 2">
<h2>
STEP 2</h2>
<br />
</asp:WizardStep>
<asp:WizardStep ID="Step3" Title="Step 3">
<h2>
STEP 3</h2>
<br />
</asp:WizardStep>
</WizardSteps>
<StepStyle Font-Names="tahoma" Font-Size="Smaller" VerticalAlign="Top" />
<SideBarStyle Font-Size="Small" VerticalAlign="Top" BackColor="#FFFFC0" Font-Names="tahoma" />
<FinishPreviousButtonStyle BackColor="White" BorderColor="Black" BorderWidth="3px"
Font-Names="Tahoma" Font-Size="Medium" />
<NavigationButtonStyle BackColor="White" BorderColor="Black" BorderStyle="Solid"
BorderWidth="3px" Font-Names="Tahoma" Font-Size="Medium" />
<FinishCompleteButtonStyle Font-Names="Tahoma" Font-Size="Medium" />
</asp:Wizard>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
private static readonly string stepKey = "s";
protected void OnNavigateHistory(object sender, HistoryEventArgs args)
{
string stateString = args.State[stepKey];
int step = (stateString != null) ? int.Parse(stateString) : 0;
MachineConfiguratorWizard.ActiveStepIndex = step;
}
protected void OnActiveStepChanged(object sender, EventArgs e)
{
if (!ScriptManager1.IsNavigating && IsPostBack) {
int index = MachineConfiguratorWizard.ActiveStepIndex;
ScriptManager1.AddHistoryPoint(stepKey, index.ToString(), "Step " + (index+1).ToString());
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
<title>Microsoft ASP.NET 3.5 Extensions: Managing History</title>
<link href="../../include/qsstyle.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<div>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" OnNavigate="OnNavigateHistory"
EnableHistory="true" EnableSecureHistoryState="false" />
<h2>
Microsoft ASP.NET 3.5 Extensions: Adding Server-side Browser History Points</h2>
<p/>
<div id="Div1" class="new">
<p>This sample shows:</p>
<ol>
<li>How to use the <code>ScriptManager</code> control to set a history point.</li>
<li>The <code>ScriptManager</code> control, the <code>EnableHistory</code> and
<code>EnableSecureHistoryState</code> properties and
the <code>OnNavigate</code> property to handle the <code>navigate</code> event.
</li>
<li>Protecting the history code with <code>IsNavigating</code>
</li>
</ol>
</div>
<p>
In this example, the <code>Wizard</code> server control provides it's own navigation, but
as each step is selected a history point is added. In order to do this, a history point is only added if the page is not being refreshed beacuse of a history point.</p>
<asp:UpdatePanel ID="WizardPanel">
<ContentTemplate>
<asp:Wizard ID="MachineConfiguratorWizard" ActiveStepIndex="0" BackColor="#dddddd"
BorderWidth="10" CellPadding="10" CellSpacing="10" Height="200px" Width="700px"
FinishPreviousButtonText="<" StartNextButtonText=">" StepNextButtonText=">" StepPreviousButtonText="<"
FinishCompleteButtonText="<|>" OnActiveStepChanged="OnActiveStepChanged">
<WizardSteps>
<asp:WizardStep ID="Step1" Title="Step 1">
<h2>
STEP 1</h2>
<br />
</asp:WizardStep>
<asp:WizardStep ID="Step2" Title="Step 2">
<h2>
STEP 2</h2>
<br />
</asp:WizardStep>
<asp:WizardStep ID="Step3" Title="Step 3">
<h2>
STEP 3</h2>
<br />
</asp:WizardStep>
</WizardSteps>
<StepStyle Font-Names="tahoma" Font-Size="Smaller" VerticalAlign="Top" />
<SideBarStyle Font-Size="Small" VerticalAlign="Top" BackColor="#FFFFC0" Font-Names="tahoma" />
<FinishPreviousButtonStyle BackColor="White" BorderColor="Black" BorderWidth="3px"
Font-Names="Tahoma" Font-Size="Medium" />
<NavigationButtonStyle BackColor="White" BorderColor="Black" BorderStyle="Solid"
BorderWidth="3px" Font-Names="Tahoma" Font-Size="Medium" />
<FinishCompleteButtonStyle Font-Names="Tahoma" Font-Size="Medium" />
</asp:Wizard>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
URL e stato della cronologia del server
Quando si crea un punto chiave di navigazione occorre definire quali informazioni vengono incluse nel relativo stato. È necessario utilizzare almeno una coppia chiave/valore che consenta all'applicazione di identificare lo stato. È possibile decidere di memorizzare coppie chiave/valore aggiuntive. Tuttavia, poiché queste informazioni vengono memorizzate nell'URL e gli URL presentano un limite di lunghezza (determinato dal browser), è opportuno memorizzare solo le informazioni necessarie a ricreare lo stato.
A seconda dell'impostazione definita per la proprietà EnableHistory del controllo server ScriptManager, le informazioni sullo stato del server contenute nell'URL possono essere in un formato con o senza hash.
Le informazioni sullo stato della cronologia sono contenute nell'URL dopo il carattere # (delimitatore di frammento) e seguono il separatore "&&", come mostrato nell'esempio seguente:
Default.aspx#&&s=Key+2
Quando si imposta EnableHistory su true, il frammento relativo allo stato della cronologia viene crittografato prima di essere aggiunto all'URL della pagina Web. Ciò migliora la sicurezza riducendo il rischio che i dati sullo stato vengano modificati da un utente non autorizzato. Tuttavia, anche se queste informazioni vengono crittografate, è opportuno evitare di memorizzare dati sensibili nel campo di stato.
Notare che l'hashing delle informazioni sullo stato comporta la creazione di URL che oltre a essere lunghi contengono informazioni non significative per l'utente.
Aggiunta di titoli ai punti chiave di navigazione
In genere una voce dello stack della cronologia del browser viene identificata in base al titolo della pagina a cui fa riferimento. Per vedere un esempio di ciò, utilizzare l'elenco della cronologia del browser per visualizzare i titoli delle pagine visitate recentemente. In genere tale elenco viene visualizzato tramite un elenco a discesa contenuto nella casella degli indirizzi URL.
Per impostazione predefinita, quando si crea nell'applicazione una voce di punto chiave di navigazione, questa viene identificata tramite il titolo della pagina. Se per una stessa pagina si aggiungono più punti chiave di navigazione, per impostazione predefinita tutte le voci presenteranno lo stesso titolo.
Tuttavia, a ogni voce di cronologia è possibile assegnare un titolo significativo specifico. Nel codice server, le informazioni sul titolo possono essere aggiunte quando si crea un punto chiave di navigazione chiamando il metodo AddHistoryPoint.
A differenza dell'esempio precedente, nell'esempio seguente viene illustrata l'aggiunta di una voce dotata di titolo.
Eseguire un esempio di questa funzionalità (informazioni in lingua inglese).
<%@ Page Language="VB" %>
<%@ Import Namespace="System.Globalization" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
Private Shared key As String = "s"
' Handle the Navigate event
Public Sub OnNavigateHistory(ByVal sender As Object, ByVal e As HistoryEventArgs)
LabelHistoryData.Text = Server.HtmlEncode(e.State(key))
End Sub
' On button click, handle the event and set a history point.
Public Sub ButtonClick(ByVal sender As Object, ByVal e As EventArgs)
LabelHistoryData.Text = CType(sender, Button).Text
ScriptManager.GetCurrent(Me).AddHistoryPoint(key, LabelHistoryData.Text, "Entry: " + LabelHistoryData.Text)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Microsoft ASP.NET 3.5 Extensions: Managing History</title>
<link href="../../include/qsstyle.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" OnNavigate="OnNavigateHistory"
EnableHistory="true" EnableSecureHistoryState="false" />
<h2>
Microsoft ASP.NET 3.5 Extensions: Adding Server-side Browser History Points</h2>
<p/>
<div id="Div1" class="new">
<p>This sample shows:</p>
<ol>
<li>How to use the <code>ScriptManager</code> control to set a history point.</li>
<li>The <code>ScriptManager</code> control, the <code>EnableHistory</code> and
<code>EnableSecureHistoryState</code> properties and
the <code>OnNavigate</code> property to handle the <code>navigate</code>event.<br />
</li>
</ol>
</div>
<p>
In this example, three buttons outside the <code>UpdatePanel</code> control can
trigger an asynchronous postback. You can see the results of the update through
the date and time that renders in the Web page along with a value indicating the
button that triggered the partial refresh.</p>
<p>
When you press a button, the server-side <code>Click</code> event handler for the button
stores data and uses the data as a history point. If you click the browser's Back button,
you will see the state Web page return to a previous button value, representing the previous
button you pressed. However, you will see that the time within the Web page continues to be
incremented.
</p>
<p>To see the effect of this logic, do the following.</p>
<ol>
<li>Press <b>1</b>. See the panel refresh.</li>
<li>Press <b>3</b>. See the panel refresh.</li>
<li>Press <b>2</b>. See the panel refresh.</li>
<li>Press the browser's Back button. Note that the panel is refreshed with previous
data, but the date and time are updated to current values.</li>
</ol>
<asp:UpdatePanel ID="UpdatePanel1" >
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Button3" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel CssClass="box" ID="Content" Height="40px">
Date and Time:
<%= DateTime.Now.ToLongTimeString() %>
<br />
Page's refresh state:
<asp:Label ID="LabelHistoryData" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<p />
<asp:Button ID="Button1" Text="Key 1" OnClick="ButtonClick" />
<asp:Button ID="Button2" Text="Key 2" OnClick="ButtonClick" />
<asp:Button ID="Button3" Text="Key 3" OnClick="ButtonClick" />
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Globalization" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
private static String key = "s";
// Handle the Navigate event
public void OnNavigateHistory(object sender, HistoryEventArgs e) {
LabelHistoryData.Text = Server.HtmlEncode(e.State[key]);
}
// On button click, handle the event and set a history point.
public void ButtonClick(object sender, EventArgs e) {
LabelHistoryData.Text = ((Button)sender).Text;
ScriptManager.GetCurrent(this).AddHistoryPoint(key, LabelHistoryData.Text, "Entry: " + LabelHistoryData.Text);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Microsoft ASP.NET 3.5 Extensions: Managing History</title>
<link href="../../include/qsstyle.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" OnNavigate="OnNavigateHistory"
EnableHistory="true" EnableSecureHistoryState="false" />
<h2>
Microsoft ASP.NET 3.5 Extensions: Adding Server-side Browser History Points and Title Entries</h2>
<p/>
<div id="Div1" class="new">
<p>This sample shows:</p>
<ol>
<li>How to use the <code>ScriptManager</code> control to set a history point and add titles.</li>
<li>The <code>ScriptManager</code> control, the <code>EnableHistory</code> and
<code>EnableSecureHistoryState</code> properties and
the <code>OnNavigate</code> property to handle the <code>navigate</code>event.<br />
</li>
</ol>
</div>
<p>
In this example, three buttons outside the <code>UpdatePanel</code> control can
trigger an asynchronous postback. You can see the results of the update through
the date and time that renders in the Web page along with a value indicating the
button that triggered the partial refresh.</p>
<p>
When you press a button, the server-side <code>Click</code> event handler for the button
stores data and uses the data as a history point. If you click the browser's Back button,
you will see the state Web page return to a previous button value, representing the previous
button you pressed. However, you will see that the time within the Web page continues to be
incremented.
</p>
<p>To see the effect of this logic, do the following.</p>
<ol>
<li>Press <b>1</b>. See the panel refresh.</li>
<li>Press <b>3</b>. See the panel refresh.</li>
<li>Press <b>2</b>. See the panel refresh.</li>
<li>Press the browser's Back button. Note that the panel is refreshed with previous
data, but the date and time are updated to current values.</li>
<li>Press the browser's "Recent Pages" drop down menu and review the history entries and their titles.</li>
</ol>
<asp:UpdatePanel ID="UpdatePanel1" >
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Button3" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel CssClass="box" ID="Content" Height="40px">
Date and Time:
<%= DateTime.Now.ToLongTimeString() %>
<br />
Page's refresh state:
<asp:Label ID="LabelHistoryData" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<p />
<asp:Button ID="Button1" Text="Key 1" OnClick="ButtonClick" />
<asp:Button ID="Button2" Text="Key 2" OnClick="ButtonClick" />
<asp:Button ID="Button3" Text="Key 3" OnClick="ButtonClick" />
</div>
</form>
</body>
</html>