Gestion de l'historique de navigation à l'aide d'un script client
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. Vous pouvez également gérer l'historique du navigateur à l'aide du script client. Vous pouvez activer la prise en charge de l'historique sur le client par le biais du contrôle ScriptManager. Les objets clients que vous pouvez utiliser pour gérer l'historique du navigateur sont alors générés.
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, y compris 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 déclenche l'événement Sys.Application.navigate client. Vous pouvez gérer l'événement pour rétablir l'état de l'application où les informations sont contenues dans les valeurs de paramètre transmises à l'événement.
.gif "Remarque") Remarque : |
|---|
Pour utiliser l'exemple de code présenté dans cette rubrique, vous aurez besoin de Visual Studio 2008 Service Pack 1 ou d'une version ultérieure. |
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 client, 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 Sys.Application.addHistoryPoint. Cette méthode vous permet de définir l'entrée d'historique, son titre et tout état requis. 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 ajoutez un point d'historique ou lorsqu'un utilisateur navigue dans une page dont l'URL contient l'état d'historique, l'événement Sys.Application.navigate est déclenché. Il en résulte un événement dans le client qui vous signale que l'état de l'historique a changé. Vous pouvez gérer l'événement navigate pour recréer des objets à l'aide de données d'état ou effectuer d'autres opérations.
L'exemple suivant montre comment gérer des points d'historique dans le code 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>