Gerenciamento de histórico do navegador usando script de cliente
sistema autônomo desenvolvedor de página, você pode gerenciar entradas de histórico do navegador e fornecer navegação lógica, usando o ScriptManager e ScriptManagerProxy controles de servidor. Você também pode gerenciar o histórico do navegador por meio de um script de cliente.Você pode habilitar o suporte ao histórico no cliente por meio de ScriptManager controle. Isso gera objetos de cliente que você pode usar para gerenciar o histórico do navegador.
A ponto histórico é um ponto de lógica de navegação no aplicativo Web Web pode ser representado por meio das informações de estado.As informações de estado podem ser usadas restauração aplicativo Web Web em um estado anterior, seja diretamente com os dados de estado ou através de um identificador de informações de estado que é armazenado em outro lugar.
Pontos de histórico são armazenados na pilha de histórico do navegador apenas sistema autônomo URLs.Estado do histórico é gerenciado sistema autônomo dados em uma seqüência de caracteres de consulta ou sistema autônomo um valor de fragmento de URL é marcado com o caractere "#".Devido sistema autônomo restrições de dimensionar em URLs, sistema autônomo informações de estado que você criar devem ser o menor possível.
O exemplo a seguir mostra dados para identificar o estado de ponto de uma URL que contém o histórico suficiente.A partir disso, o aplicativo pode re-criar a página no estado em questão.
http://MySamples/Ajax/Default.aspx#state=2
Quando um usuário clica Fazer backup botão, ele navega através de URLs exibido anteriormente, que incluem URLs que contêm o estado do ponto de histórico.Código do cliente na página da Web detecta que o URL contém dados de estado de histórico e dispara o cliente Sys.aplicativo.navegar evento.Você pode manipular o evento para reiniciar o aplicativo para o estado cujas informações estão contidas os valores de parâmetro são passados para o evento.
.gif "Observação") Observação: |
|---|
Para trabalhar com o código de exemplo neste tópico, você precisará do Visual Studio 2008 serviço empacotar 1 ou uma versão posterior. |
Habilitando o gerenciamento de histórico do navegador
Para usar o gerenciamento de histórico, habilite-através de ScriptManager controle de servidor. Por padrão, o suporte para histórico não está habilitado.Quando o histórico está habilitado, ele é implementado diferente para cada localizador.Para o Internet Explorer, um iframe elemento é processado no cliente, que pode causar uma solicitação adicional para o servidor. O modelo, portanto, é uma abordagem opt-in.
O exemplo a seguir mostra como habilitar o histórico declarativamente por meio de ScriptManager controle.
<asp:ScriptManager ID="ScriptManager1"
EnableHistory="true" />
Criando pontos de histórico do navegador
Para criar um ponto histórico do navegador, você chamar o Sys.aplicativo.addHistoryPoint método.Esse método permite que você definir a entrada de histórico, seu título e qualquer estado que é necessário.Você pode usar os dados de estado para re-criar o estado da página quando um evento de navegação do histórico subseqüentes.
Quando você adiciona um ponto histórico ou quando a página é navegada e contém o estado do histórico no URL, a Sys.aplicativo.navegar evento é gerado.Isso fornece um evento no cliente do que o notifica de que o estado do histórico foi alterado.Você pode manipular o navigate evento para re-criar objetos usando dados de estado ou executar outras operações.
O exemplo a seguir mostra como você pode gerenciar pontos de histórico no código do 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>