Gestion de l'historique de navigation à l'aide de contrôles serveur ASP.NET
Mise à jour : novembre 2007
En tant que développeur de pages, vous pouvez gérer les entrées d'historique du navigateur à l'aide des contrôles serveur ScriptManager et ScriptManagerProxy. Le contrôle serveur ScriptManager vous permet de définir des points d'historique dans l'application. Les deux contrôles vous permettent de gérer la navigation qui se produit lorsque la page Web est demandée à la suite d'un état quelconque de l'historique.
Un point d'historique est un point de navigation logique dans l'application Web qui peut être représenté par le biais d'informations d'état. Les informations d'état peuvent être utilisées pour rétablir l'état précédent de l'application Web, directement avec les données d'état ou par le biais d'un identificateur pour les informations d'état stockées ailleurs.
Les points d'historique sont stockés dans la pile d'historique du navigateur uniquement en tant qu'URL. L'état de l'historique est géré comme les données d'une chaîne de requête ou comme une valeur d'un fragment d'URL identifié par le caractère "#". Étant donné les restrictions de taille des URL, les informations d'état que vous créez doivent être aussi succinctes que possible. L'exemple suivant affiche une URL contenant suffisamment de données de point d'historique pour identifier l'état. À partir de ces informations, l'application peut recréer la page à cet état.
http://MySamples/Ajax/Default.aspx#&&state=2
Lorsqu'un utilisateur clique sur le bouton Précédent du navigateur, ce dernier parcourt les URL précédemment consultées, notamment celles qui contiennent l'état des points d'historique. Le code client dans la page Web détecte que l'URL contient des données d'état d'historique et envoie une requête à la page, en transmettant les informations d'état. Lorsque la page traite la requête, elle lit les informations d'état de l'historique et déclenche une publication (postback) asynchrone. Les contrôles serveur ScriptManager et ScriptManagerProxy déclenchent ensuite l'événement Navigate. Vous pouvez gérer cet événement et recréer la page comme requis pour votre application Web.
.gif "Remarque") Remarque : |
|---|
Pour créer l'exemple de code dans cette rubrique, vous aurez besoin de Visual Studio 2008 Service Pack 1 ou d'une version ultérieure. |
Syntaxe des contrôles ScriptManager et ScriptManagerProxy
L'exemple suivant illustre la syntaxe du contrôle serveur ScriptManager utilisée avec l'historique du navigateur.
<asp:ScriptManager
EnableHistory="true|false"
EnableStateHash="true|false"
OnNavigate="navigateEventhandlerName">
</asp:ScriptManager>
Activation de la gestion de l'historique du navigateur
Pour utiliser la gestion de l'historique, vous devez l'activer par le biais du contrôle serveur ScriptManager. La prise en charge de l'historique est par défaut désactivée. Une fois l'historique activé, il est implémenté différemment pour chaque navigateur. Pour Internet Explorer, un élément iframe est restitué au navigateur, ce qui peut entraîner une requête supplémentaire au serveur. Le modèle est par conséquent une approche déclarative. L'exemple suivant indique comment activer l'historique par déclaration par le biais du contrôle ScriptManager.
<asp:ScriptManager ID="ScriptManager1"
EnableHistory="true" />
Création de points d'historique du navigateur
Pour créer un point d'historique du navigateur, vous appelez la méthode AddHistoryPoint du contrôle ScriptManager. Cette méthode vous permet de définir l'état du serveur et les clés ainsi que des données facultatives pour représenter le titre de l'entrée d'historique dans le navigateur. Vous pouvez utiliser les données d'état pour recréer l'état de la page lorsque l'événement de navigation historique suivant est déclenché. Lorsque vous créez un point d'historique, les données sérialisées et chiffrées sont par défaut ajoutées à l'URL de la page Web. L'URL résultante est incluse dans la pile d'historique du navigateur.
| Remarque : |
|---|
N'ajoutez des points d'historique qu'en réponse à des actions de l'utilisateur, par exemple lorsqu'il clique sur une sélection. Les points d'historique ne sont généralement pas ajoutés uniquement à la suite de l'exécution d'un code d'application. |
Les exemples suivants utilisent le contrôle UpdatePanel pour autoriser les publications (postback) asynchrones dans la page. Le contrôle ScriptManager est utilisé pour ajouter des points d'historique dans le gestionnaire d'événements Click des boutons qui déclenchent les publications (postback) asynchrones. Lorsque vous cliquez sur le bouton Précédent du navigateur, vous ne quittez pas la page Web, mais vous naviguez entre les états d'historique précédents de la page.
Exécutez un exemple de cette fonctionnalité.
<%@ 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>
Gestion des requêtes au serveur
Lorsque l'état du serveur est détecté dans une requête, l'événement Navigate est déclenché. Il apparaît comme une publication (postback) asynchrone sur le serveur. Si vous devez déterminer si la publication (postback) s'est produite pour la navigation ou à toute autre fin, vous pouvez lire la propriété IsNavigating. Si cette propriété a la valeur true, la publication (postback) commence comme un appel de navigation.
L'exemple suivant illustre le contrôle serveur Wizard dans un contrôle UpdatePanel. Le contrôle Wizard exécute alors des publications (postback) asynchrones lorsque les utilisateurs naviguent dans l'Assistant. Dans l'exemple, le code ajoute des points d'historique lorsque l'utilisateur parcourt les étapes de l'Assistant.
Exécutez un exemple de cette fonctionnalité.
<%@ 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 et état de l'historique côté serveur
Lorsque vous créez un point d'historique, vous décidez quelles informations stocker pour son état. Vous devez au moins utiliser une paire clé/valeur qui identifie l'état pour votre application. Vous pouvez décider de stocker d'autres paires clé/valeur. Toutefois, ces informations étant stockées dans l'URL et l'URL ayant une taille limite (comme déterminé par le navigateur), ne stockez que les informations dont vous avez besoin pour recréer l'état.
Dans l'URL, les informations d'état du serveur peuvent se présenter sous forme hachée ou non, selon la configuration de la propriété EnableHistory du contrôle serveur ScriptManager.
L'état de l'historique est délimité dans l'URL par le #caractère (séparateur de fragment). Les informations d'état suivent le séparateur "&&", comme illustré dans l'exemple suivant.
Default.aspx#&&s=Key+2
Lorsque vous affectez à EnableHistory la valeur true, le fragment d'état de l'historique est chiffré avant d'être ajouté à l'URL de la page Web. Il est alors plus difficile pour un intrus de modifier les données d'état et la sécurité est ainsi renforcée. Toutefois, bien que les informations soient chiffrées, ne stockez pas de données sensibles dans le champ d'état.
Notez que le hachage des informations d'état crée des URL longues qui contiennent des informations inutiles pour l'utilisateur.
Ajout de titres aux points d'historique
Les entrées de la pile d'historique du navigateur sont généralement identifiées par le titre de la page correspondante. Pour en voir un exemple, utilisez la liste d'historique de votre navigateur pour afficher les titres des pages récemment consultées. (Vous pouvez généralement afficher cette liste à l'aide de la liste déroulante de la zone d'adresse URL.)
Lorsque vous créez une entrée de point d'historique dans votre application, le titre de la page est utilisé par défaut pour identifier cette entrée. Si vous ajoutez plusieurs points d'historique à partir de la même page, toutes les entrées auront par défaut le même titre.
Toutefois, vous pouvez spécifier des titres explicites pour chaque entrée d'historique. Dans le code serveur, vous pouvez inclure des informations de titre à la création d'un point d'historique en appelant la méthode AddHistoryPoint.
L'exemple suivant est une variante de l'exemple précédent incluant une entrée de titre.
Exécutez un exemple de cette fonctionnalité.
<%@ 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>