Administrar el historial del explorador con scripts de cliente
Actualización: noviembre 2007
Como desarrollador de páginas, puede administrar entradas del historial del explorador y proporcionar una navegación lógica utilizando los controles de servidor ScriptManager y ScriptManagerProxy. También puede administrar el historial del explorador mediante script de cliente. Puede habilitar la compatibilidad del historial en el cliente a través del control ScriptManager. Esto genera objetos de cliente que puede utilizar para administrar el historial del explorador.
Un punto del historial es un punto de la navegación lógica en la aplicación web que se puede representar a través de información de estado. La información de estado se puede utilizar para restaurar la aplicación web a un estado anterior, directamente con datos de estado o a través de un identificador de la información de estado que está almacenada en otra parte.
Los puntos del historial se almacenan en la pila del historial del explorador únicamente como direcciones URL. El estado del historial se administra como datos en una cadena de consulta o como un valor de fragmento de dirección URL que se marca con el carácter "#". Debido a las restricciones de tamaño en direcciones URL, la información de estado que cree debe ser lo más pequeña posible.
En el ejemplo siguiente se muestra una dirección URL que contiene bastantes datos de punto de historial para identificar el estado. Con esto, la aplicación puede volver a crear la página en ese estado.
http://MySamples/Ajax/Default.aspx#state=2
Cuando un usuario hace clic en el botón Atrás, el explorador navega por las direcciones URL vistas previamente, que incluirán direcciones URL que contienen el estado del punto del historial. El código del cliente de la página web detecta que la dirección URL contiene datos del estado del historial y provoca el evento de cliente Sys.Application.navigate. Puede controlar el evento para restablecer la aplicación con el estado cuya información está contenida en los valores de parámetro que se pasan al evento.
.gif "Nota") Nota: |
|---|
Para trabajar con el código de ejemplo de este tema, necesitará Visual Studio 2008 Service Pack 1 o una versión posterior. |
Habilitar la administración del historial del explorador
Para utilizar la administración del historial, debe habilitarla a través del control de servidor ScriptManager. De forma predeterminada, la compatibilidad de historial no está habilitada. Cuando el historial está habilitado, se implementa de manera diferente en cada explorador. Con Internet Explorer, se representa un elemento iframe en el cliente, que puede producir una solicitud adicional al servidor. El modelo es, por consiguiente, de inclusión.
En el ejemplo siguiente se muestra cómo habilitar mediante declaración el historial a través del control ScriptManager.
<asp:ScriptManager ID="ScriptManager1"
EnableHistory="true" />
Crear puntos del historial del explorador
Para crear un punto del historial del explorador, llame al método Sys.Application.addHistoryPoint. Este método permite definir la entrada del historial, su título y cualquier estado que se requiera. Puede utilizar los datos de estado para volver a crear el estado de la página cuando se provoca un evento posterior de navegación del historial.
Al agregar un punto del historial, o cuando se navega por la página y esta contiene el estado del historial en la dirección URL, se provoca el evento Sys.Application.navigate. Esto proporciona un evento en el cliente que le notifica a usted que el estado del historial ha cambiado. Puede controlar el evento navigate para volver a crear los objetos utilizando los datos de estado o realizar otras operaciones.
En el ejemplo siguiente se muestra cómo administrar los puntos del historial en el código de cliente.
<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>