Tradução: Valens
Horário: 11/06/2007
Texto original: http://ajax.asp.net/docs/overview/AJAXClientEvents.aspx
Todos são bem-vindos para fazer comentários e farei modificações ativamente!
Introdução [Introdução]
O Microsoft Ajax propõe eventos de ciclo de vida do lado do cliente semelhantes aos eventos de ciclo de vida do lado do servidor das páginas ASP.NET 2.0. Esses eventos do lado do cliente nos permitem personalizar nossa interface de usuário tanto para postbacks tradicionais quanto para postbacks assíncronos (atualizações parciais de página). Eles também podem ajudá-lo a gerenciar e usar scripts personalizados durante todo o ciclo de vida da página.
Esses eventos do lado do cliente são propostos na classe AJAX Libray da Microsoft (podemos encontrá-los na classe AJAX Libray). Essas classes são automaticamente instanciadas (instanciadas?) ao carregar um controle de servidor com AJAX. Essas classes fornecem algumas APIs para que possamos vincular eventos a manipuladores de provedores de eventos. E a biblioteca AJAX é independente do navegador, portanto o código que você escreve funcionará em todos os navegadores suportados.
Os principais eventos são o evento de carregamento da instância do aplicativo que inicia a solicitação e o postback assíncrono. Quando o script é executado durante o evento do manipulador de carregamento, todos os scripts e componentes foram carregados e estão disponíveis. Quando parte da página é atualizada usando o controle UpdatePanel, o mais crítico de todos os eventos do cliente é a classe PageRequestManager. Esses eventos do lado do cliente permitem implementar determinados cenários. Os exemplos incluem: Desfazer postbacks, definir uma prioridade mais alta para um postback e fazer com que o UpdatePanel interaja melhor durante a atualização.
Esses eventos são muito úteis para criarmos páginas ou escrevermos componentes. Se você é um desenvolvedor web, pode usar scripts personalizados para carregar e descarregar páginas.
Para saber mais sobre eventos de ciclo de vida do lado do servidor, você pode consultar Visão geral do ciclo de vida da página ASP.NET
[Classes de cliente]
na biblioteca de classes Microsoft AJAX que propõe duas classes principais no ciclo de vida do cliente de páginas da web AJAX: Classe de aplicativo e classe PageRequestManager.
A classe Application é instanciada quando o navegador solicita uma página que contém um controle ScriptManager. A classe Application é semelhante ao controle Page do lado do servidor. Ela também herda da classe Control, mas possui algumas funções adicionais (em comparação com eventos do lado do servidor). Da mesma forma, Application herda a classe Sys.COmponent. Além disso, também fornece muitos eventos operáveis durante o ciclo de vida do cliente.
Se uma página contiver um ScriptManager e um ou mais controles UpdatePanel, a página poderá obter efeitos de atualização parciais. Nesse caso, uma instância da classe PageRequestManager fica disponível para o navegador. Os eventos de cliente fornecidos por PageRequestManager tratam de postback assíncrono. Para obter mais detalhes sobre a geração de páginas parciais, consulte: Visão geral da renderização de página parcial.
Adicionando manipuladores para eventos de cliente [Adicionar manipulador para eventos de cliente]
Agora adicione ou remova eventos usando os métodos add_eventname e reomve_eventname nas classes Application e PageRequestManager. O exemplo a seguir mostra como adicionar um manipulador chamado MyLoad ao evento init do objeto Application.
Sys.Application.add_init(MeuInit);
function MyInit(remetente) {
}
Sys.Appplication.remove_init(MyInit
Comment); Este exemplo mostra apenas a sintaxe de uso dos métodos add_eventname e remove_eventname. Mais detalhes sobre como usar esse evento serão fornecidos em um tópico posterior.
Tratamento dos eventos de carregamento e descarregamento do aplicativo [Eventos de carregamento e descarregamento do aplicativo de operação]
Para operar os eventos de carregamento e descarregamento do objeto Aplicativo, não há necessidade de vincular explicitamente a um evento de operação. Em vez disso, você pode criar uma função diretamente usando as palavras-chave reservadas pageLoad e pageUnload. O exemplo a seguir mostra como adicionar uma ação ao evento de carregamento do Aplicativo.
function pageLoad(remetente, args) {
}
Eventos para Outras Classes de Clientes [Outras Classes de Clientes]
Este tópico descreve apenas eventos fornecidos pelas classes Application e PageRequestManager. A biblioteca de classes AJAX da Microsoft também inclui as seguintes classes para adicionar, limpar e remover eventos de elementos DOM. Essas classes incluem:
Existe o método Sys.UI.DomEvent.addHandler ou abreviatura $addHandler
Existe
o método Sys.UI.DomEvent.clearHandlers ou abreviatura $clearHandlers.
removeHandler.
Os eventos fornecidos pelos princípios do DOM não são discutidos neste tópico.
Eventos de cliente das classes Application e PageRequestManager [Eventos de cliente das classes Application e PageRequestManager]
A tabela a seguir lista os eventos de cliente das classes Application e PageRequestManager que você pode usar em páginas AJAX ASP.NET. A sequência de eventos será discutida em um tópico posterior.
Evento
(nome do evento)
Descrição
(descrever)
evento init
[Evento de inicialização]
Este evento é gerado após todos os scripts terem sido carregados e antes de qualquer objeto ser criado. Se você planeja escrever um componente (script), o evento init fornece um ponto no ciclo de vida para adicionar o componente (script) à página. Este componente pode ser chamado por outros scripts no ciclo de vida. Se você é um desenvolvedor web, na maioria dos casos, é recomendado usar o evento load em vez do evento init.
O evento init só é criado uma vez quando a página começa a ser gerada. As atualizações parciais subsequentes da página não acionarão o evento init.
carregar evento
[carregando evento]
Este evento é gerado após todos os scripts terem sido carregados e após todos os objetos de programa inicializados com $create terem sido criados. Este evento será gerado por todos os postbacks no servidor, incluindo postbacks assíncronos.
Se você é um desenvolvedor web, pode criar uma função chamada pageLoad, que é fornecida pelo próprio evento load. A operação pageLoad (manipulador) pode ser chamada após qualquer operação adicionada ao evento load por meio do método add_load.
O evento de carregamento requer um objeto Sys.ApplicationLoadEventArgs como parâmetro eventargs. Você pode usar esse parâmetro para decidir se a página precisa exibir uma atualização parcial e também pode decidir quais componentes devem ser criados após o último evento de carregamento ter sido acionado.
descarregar evento
[Evento de desinstalação]
Gerado antes de todos os objetos serem liberados e antes de ocorrer o evento window.unload do navegador.
Você pode manipular o evento unload por meio de uma função chamada pageUnload fornecida pelo próprio sistema. O evento pageUnload é chamado quando a página é descarregada no navegador. Durante este evento, devemos liberar todos os recursos ocupados pelo código.
Evento propertyChanged
[Evento de mudança de atributo]
Gerado quando as propriedades de um componente são alteradas. O objeto aplicativo herda esse evento da classe Component. Este evento só é gerado quando o desenvolvedor chama o método Sys.Component.raisePropertyChange ao definir um valor de propriedade.
Consulte Definindo propriedades de componentes personalizados e gerando eventos PropertyChanged para obter mais informações.
Os eventos de alteração de propriedade requerem um objeto Sys.applicationLoadEventArgs como parâmetro eventargs.
descartando Evento
[evento de lançamento]
Este evento é gerado quando a instância do aplicativo é liberada. O objeto aplicativo herda esse evento da classe Component.
Evento inicializeRequest
[Evento de solicitação de inicialização]
Este evento ocorre no início de uma solicitação assíncrona. Você pode usar esse evento para cancelar um postback tradicional, por exemplo, para permitir que um postback assíncrono tenha precedência.
O evento de solicitação de inicialização requer um parâmetro eventargs fornecido pelo objeto Sys.WebForms.InitializeRequestEventArgs. Este objeto fornece elementos úteis de objetos que causam postbacks e solicitações subjacentes. Este evento também expõe o atributo cancel. Se você definir cancelar como verdadeiro, um novo postback será cancelado.
Evento startRequest
[Iniciar evento de solicitação]
Esse evento é gerado antes do início de um postback assíncrono para o servidor. Se já existir um processo de postback, ele será interrompido (usando o método abortPostBack). Você pode usar este evento para definir cabeçalhos de solicitação ou exibir um prompt interessante (animação) na página para indicar que a solicitação está em andamento.
Este evento requer um objeto Sys.WebForms.BeginRequestEventArgs como parâmetro eventargs. Este objeto fornece elementos úteis para causar postbacks e objetos de solicitação subjacentes.
Evento de carregamento de página
[Evento de carregamento de página]
Gerado antes de qualquer conteúdo da página ser atualizado quando um postback assíncrono for recebido pelo servidor. Você pode usar esse evento para fornecer um efeito de transição personalizado para conteúdo que precisa ser atualizado.
Este evento requer um objeto Sys.WebForms.PageLoadingEventArgs como parâmetro eventargs. Este objeto fornece informações úteis sobre quais painéis serão excluídos e atualizados como resultado do postback assíncrono mais recente.
Evento pageLoaded
[Evento completo de carregamento da página]
Gerado depois que todo o conteúdo da página foi atualizado por um resultado de postback síncrono ou assíncrono. Durante o postback síncrono, os painéis só podem ser criados, mas durante o postback assíncrono, os painéis podem ser criados e atualizados. Você pode usar esse evento para gerenciar um efeito de alteração personalizado para conteúdo que precisa ser atualizado.
Este evento requer um objeto Sys.WebForms.PageLoadedEventArgs como parâmetro eventargs. Este objeto fornece informações úteis sobre quais painéis foram atualizados e criados durante o postback mais recente.
Evento endRequest
[evento de solicitação final]
Gerado após a conclusão de um postback assíncrono em resposta e a atualização da página ou após a ocorrência de um erro durante a solicitação. Se ocorrer um erro, a página não será atualizada. Use este evento para fornecer uma mensagem de erro personalizada aos visitantes ou fazer login no log de erros.
Este evento requer um objeto Sys.WebForms.EndRequestEventArgs como parâmetro eventargs. Este objeto fornece algumas informações úteis sobre o erro que foi gerado e se o erro foi tratado. Também fornece informações disponíveis sobre o objeto correspondente.
Exemplo de ordem de evento [Exemplo de ordem de evento]
O exemplo a seguir mostra como os eventos do lado do cliente serão gerados em uma página com dois controles UpdatePanel aninhados. Observe a diferença entre clicar no botão no painel pai e no botão no painel incorporado. O botão no painel pai fará com que o painel pai seja atualizado e o painel incorporado nele será excluído e recriado. Botões com painéis incorporados causam apenas atualizações no painel incorporado.
Código da página:
1<%@ Idioma da página="C#" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4 " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
5
6<script runat="servidor">
7
8</script>
9
10<html xmlns=" http://www.w3.org/1999/xhtml " >
11<head runat="servidor">
12 <title>Exemplo de Evento de Cliente</title>
13 <style type="text/css">
14 #OuterPanel { largura: 600px; altura: 200px; borda: 2px azul sólido };
15 #NestedPanel { largura: 596px; altura: 60px; borda: 2px verde sólido;
16 margem esquerda:5 px; margem direita:5px;
17
18</head>
19<corpo>
20 <form id="form1" runat="servidor">
21
22 <asp:ScriptManager ID="ScriptManager1" runat="servidor">
23 <Roteiros>
24 <asp:ScriptReference Path="ClientEventTest.js" />
25 </Scripts>
26 </asp:ScriptManager>
27 <asp:UpdatePanel ID="OuterPanel" UpdateMode="Conditional" runat="server">
28 <Modelo de conteúdo>
29 Os postbacks de dentro do painel externo e do painel interno são
30 postbacks assíncronos. PRM = Sys.WebForms.PageRequestManager.
31
32<br /><br />
33 <asp:Button ID="OPButton1" Text="Botão do painel externo" runat="servidor" />
34 Última atualização em
35 <%= DateTime.Now.ToString() %>
36<br /><br />
37
38 <asp:UpdatePanel ID="NestedPanel" UpdateMode="Conditional" runat="server">
39 <Modelo de Conteúdo>
40 <asp:Button ID="NPButton1" Text="Botão do painel 1 aninhado" runat="servidor" />
41 Última atualização em
42 <%= DateTime.Now.ToString() %>
43<br />
44 </ContentTemplate>
45 </asp:UpdatePanel>
46 </ContentTemplate>
47 </asp:UpdatePanel>
48
49 <input type="button" onclick="Limpar();" valor="Limpar" />
50
51 <asp:Button ID="FullPostBack" runat="server" Text="Postback completo" />
52 <a href=" http://www.microsoft.com">Descarregar janela de teste </a>
53<br />
54 <span id="ClientEvents"></span>
55
56 </form>
57</corpo>
58</html>
59
código de script:
1 // Conecte manipuladores de eventos do aplicativo.
2var aplicativo = Sys.Application;
3app.add_load(ApplicationLoad);
4app.add_init(ApplicationInit);
5app.add_disposing(ApplicationDisposing);
6app.add_unload(ApplicationUnload);
7
8
9//Manipuladores de eventos de aplicativos para desenvolvedores de componentes.
10function ApplicationInit(remetente) {
11 var prm = Sys.WebForms.PageRequestManager.getInstance();
12 se (!prm.get_isInAsyncPostBack())
13 {
14 prm.add_initializeRequest(InitializeRequest);
15 prm.add_beginRequest(BeginRequest);
16 prm.add_pageLoading(PageLoading);
17 prm.add_pageLoaded(PageLoaded);
18 prm.add_endRequest(EndRequest);
19}
20 $get('ClientEvents').innerHTML += "APP:: Inicialização do aplicativo. <br/>";
vinte e um}
22function ApplicationLoad(remetente, args) {
23 $get('ClientEvents').innerHTML += "APP:: Carregamento da aplicação. ";
24 $get('ClientEvents').innerHTML += "(isPartialLoad = " + args.get_isPartialLoad() + ")<br/>";
25}
26função ApplicationUnload(remetente) {
27 alert('APP::Descarregamento da aplicação.');
28}
29function ApplicationDisposing(remetente) {
30 $get('ClientEvents').innerHTML += "APP:: Descarte de aplicação. <br/>";
31
32}
33 // Manipuladores de eventos de aplicativos para desenvolvedores de páginas.
34função pageLoad() {
35 $get('ClientEvents').innerHTML += "PÁGINA:: Carregar.<br/>";
36}
37
38função pageUnload() {
39 alert('Página:: Descarregamento de página.');
40}
41
42 // Manipuladores de eventos PageRequestManager.
43função InitializeRequest(remetente, args) {
44 $get('ClientEvents').innerHTML += "<hr/>";
45 $get('ClientEvents').innerHTML += "PRM:: Inicializando solicitação assíncrona.<br/>";
46}
47função BeginRequest(remetente, args) {
48 $get('ClientEvents').innerHTML += "PRM:: Começa a processar solicitação assíncrona.<br/>";
49}
50function PageLoading(remetente, args) {
51 $get('ClientEvents').innerHTML += "PRM:: Carregando resultados de solicitação assíncrona.<br/>";
52 var atualizadoPanels = printArray("PanelsUpdating", args.get_panelsUpdating());
53 var deletadosPanels = printArray("PanelsDeleting", args.get_panelsDeleting());
54
55 var mensagem = "-->" + UpdatePanels + "<br/>-->" + DeletePanels + "<br/>";
56
57 document.getElementById("ClientEvents").innerHTML += mensagem;
58}
59function PageLoaded(remetente, argumentos) {
60 $get('ClientEvents').innerHTML += "PRM:: Carregamento concluído dos resultados da solicitação assíncrona.<br/>";
61 var atualizadoPanels = printArray("PanelsUpdated", args.get_panelsUpdated());
62 var criadosPanels = printArray("PaneslCreated", args.get_panelsCreated());
63
64 var mensagem = "-->" + UpdatePanels + "<br/>-->" + CreatePanels + "<br/>";
65
66 document.getElementById("ClientEvents").innerHTML += mensagem;
67}
68function EndRequest(remetente, args) {
69 $get('ClientEvents').innerHTML += "PRM:: Fim da solicitação assíncrona.<br/>";
70}
71
72 // Funções auxiliares.
73funçãoLimpar()
74{
75 $get('ClientEvents').innerHTML = "";
76}
77função printArray(nome, arr)
78{
79 var painéis = nome + '=' + arr.length;
80 if(arr. comprimento > 0)
81 {
82 painéis += "(";
83 for(var i = 0; i < arr.length; i++)
84 {
85 painéis += arr[i].id + ',';
86}
87 painéis = painéis.substring(0, painéis.comprimento - 1);
88 painéis += ")";
89}
90 painéis de retorno;
91}
92
Efeito em execução Ver código
Ordem dos eventos para cenários comuns [Ordem geral dos eventos]
A ordem de acionamento dos eventos ainda depende de quais controles são usados na página e do tipo de solicitação que ocorre (solicitação de inicialização, postback tradicional ou postback assíncrono). Esta seção descreve a sequência de solicitação de eventos para vários cenários comuns.
Solicitação Inicial [Solicitação de inicialização]
Durante uma solicitação de inicialização de página, um pequeno número de eventos de cliente é acionado. Suponha que o seguinte seja o cenário da solicitação de inicialização.
· A página inclui um controle ScriptManager e as propriedades SupportsPartialRendering e EnablePartialRendering do controle são verdadeiras.
· A requisição é do tipo GET;
· O servidor pode responder normalmente.
Aqui está a sequência em que os eventos ocorrem no lado do cliente:
1. Ocorre uma solicitação de inicialização ao servidor.
2. O cliente recebe a resposta.
3. A instância do Aplicativo aciona o evento init.
4. A instância do Aplicativo aciona o evento de carregamento.
O evento de inicialização ocorre apenas uma vez durante todo o ciclo de vida da página quando o aplicativo é instanciado. Não será gerado por postbacks assíncronos subsequentes. Durante a solicitação inicial (observe a solicitação), nenhum evento PageRequestManager é gerado.
Postback assíncrono [postback assíncrono]
Um postback assíncrono envia alguns dados da página para o servidor, recebe uma resposta do lado do servidor e, em seguida, atualiza parte da página. Suponha o seguinte cenário de postback assíncrono:
· A página inclui um controle ScriptManager e as propriedades SupportsPartialRendering e EnablePartialRendering do controle são verdadeiras.
· Existe um controle UpdatePanel na página e o valor da propriedade ChildrenAsTriggers do controle é alterado para true.
· Existe um botão dentro do UpdatePanel para acionar um postback assíncrono.
· Obtenha resposta do lado do servidor com sucesso.
Aqui está a sequência em que os eventos ocorrem no lado do cliente:
1. Ao clicar no botão no controle UpdatePanel, é causado um postback assíncrono.
2. A instância PageRequestManager acionou o evento inicializeRequest.
3. A instância PageRequestManager acionou o evento BeginRequest.
4. A solicitação é enviada ao servidor.
5. O cliente recebe a resposta.
6. A instância PageRequestManager acionou o evento pageLoading.
7. A instância PageRequestManager acionou o evento pageLoaded.
8. A instância do Aplicativo acionou o evento de carregamento.
9. A instância PageRequestManager acionou o evento endRequest.
Observe que o evento de carregamento do aplicativo ocorre após o evento pageLoaded do PageRequestManager e antes do evento endRequest.
Vários postbacks assíncronos [Vários postbacks assíncronos]
Quando uma solicitação anterior está em execução no servidor ou navegador e o usuário envia uma nova solicitação, ocorrem vários postbacks assíncronos. Suponha que o cenário a seguir descreva o caso de vários postbacks assíncronos.
· A página inclui um controle ScriptManager e as propriedades SupportsPartialRendering e EnablePartialRendering do controle são verdadeiras.
· A página contém um controle UpdatePanel.
· No UpdatePanel, um controle de botão que causa um postback assíncrono é clicado duas vezes. O segundo clique ocorre enquanto o servidor processa a solicitação iniciada pelo primeiro clique.
· Obteve a resposta à primeira solicitação retornada do servidor.
Aqui está a sequência em que os eventos ocorrem no lado do cliente:
1. Clicar no botão no UpdatePanel aciona um postback assíncrono.
2. A instância PageRequestManager acionou o evento inicializeRequest.
3. A instância PageRequestManager acionou o evento BeginRequest.
4. A solicitação é enviada ao servidor.
5. O cliente recebe a resposta.
6. O botão é clicado novamente, acionando um segundo postback assíncrono.
7. A instância PageRequestManager aciona o evento inicializeRequest para o segundo clique.
8. A instância PageRequestManager aciona o evento BeginRequest para o segundo clique.
9. A solicitação do segundo clique da Expedição do Norte examinou o servidor.
10. O cliente recebe a resposta do segundo clique.
11. A instância PageRequestManager acionou o evento pageLoading.
12. A instância PageRequestManager acionou o evento pageLoaded.
13. A instância do Aplicativo acionou o evento de carregamento.
14. A instância PageRequestManager acionou o evento endRequest.
O comportamento de postback assíncrono padrão é que o postback assíncrono mais recente tenha precedência. Se dois postbacks assíncronos ocorrerem em sequência e o primeiro postback assíncrono ainda estiver sendo processado pelo navegador, o primeiro postback assíncrono será cancelado. Se o primeiro postback tiver sido enviado ao servidor, o servidor não retornará a primeira solicitação até que a segunda solicitação chegue. Para obter mais detalhes sobre como definir prioridade para postback assíncrono, consulte Dando precedência a um postback assíncrono específico
fora de uma página [Navegando em outras páginas]
Quando o usuário acessa outras páginas de uma página, a página atual será exibida. o navegador Unload, para que você possa operar o evento unload para liberar recursos. Suponha que este cenário seja simulado abaixo.
· A página inclui um controle ScriptManager e as propriedades SupportsPartialRendering e EnablePartialRendering do controle são verdadeiras.
· A página de destino existe.
Aqui está a sequência em que os eventos ocorrem no lado do cliente:
1. Inicie uma solicitação para uma nova página.
2. O navegador recebe uma resposta solicitando uma nova página.
3. A instância do Aplicativo aciona o evento unload.
4. Uma nova página é exibida.
Se ocorrer um erro ao solicitar uma nova página, o evento unload ainda será gerado, mas a nova página não será exibida.
【sobre】