Noções básicas sobre atualizações de página parcial com o AJAX ASP.NET

por Scott Cate

Talvez o recurso mais visível do ASP.NET extensões AJAX seja a capacidade de fazer atualizações de página parciais ou incrementais sem fazer um postback completo no servidor, sem alterações de código e alterações mínimas de marcação. As vantagens são extensas – o estado da multimídia (como Adobe Flash ou Windows Media) é inalterado, os custos de largura de banda são reduzidos e o cliente não experimenta a cintilação geralmente associada a um postback.

Introdução

A tecnologia ASP.NET da Microsoft traz um modelo de programação orientado a objetos e orientado a eventos e o une com os benefícios do código compilado. No entanto, seu modelo de processamento do lado do servidor tem várias desvantagens inerentes à tecnologia:

• As atualizações de página exigem uma viagem de ida e volta para o servidor, o que requer uma atualização de página.
• As viagens de ida e volta não persistem nenhum efeito gerado pelo Javascript ou outra tecnologia do lado do cliente (como o Adobe Flash)
• Durante o postback, navegadores diferentes do Microsoft Internet Explorer não dão suporte à restauração automática da posição de rolagem. E mesmo na Internet Explorer, ainda há uma cintilação à medida que a página é atualizada.
• Os postbacks podem envolver uma grande quantidade de largura de banda, pois o campo de formulário __VIEWSTATE pode crescer, especialmente ao lidar com controles como o controle GridView ou repetidores.
• Não há um modelo unificado para acessar serviços Web por meio de JavaScript ou outra tecnologia do lado do cliente.

Insira as extensões ASP.NET AJAX da Microsoft. O AJAX, que significa Asíncrono J avaScriptA nd X ML, é uma estrutura integrada para fornecer atualizações de página incrementais por meio de JavaScript multiplataforma, composto por código do lado do servidor que inclui o Microsoft AJAX Framework e um componente de script chamado Biblioteca de Scripts do Microsoft AJAX. As extensões ASP.NET AJAX também fornecem suporte multiplataforma para acessar ASP.NET Serviços Web por meio de JavaScript.

Este white paper examina a funcionalidade parcial de atualizações de página do ASP.NET extensões AJAX, que inclui o componente ScriptManager, o controle UpdatePanel e o controle UpdateProgress, e considera cenários nos quais eles devem ou não ser utilizados.

Esse white paper baseia-se na versão Beta 2 do Visual Studio 2008 e no .NET Framework 3.5, que integra as extensões ASP.NET AJAX à Biblioteca de Classes Base (em que anteriormente era um componente de complemento disponível para ASP.NET 2.0). Este white paper também pressupõe que você esteja usando o Visual Studio 2008 e não o Visual Web Developer Express Edition; alguns modelos de projeto referenciados podem não estar disponíveis para usuários do Visual Web Developer Express.

Atualizações de página parcial

Talvez o recurso mais visível do ASP.NET extensões AJAX seja a capacidade de fazer atualizações de página parciais ou incrementais sem fazer um postback completo no servidor, sem alterações de código e alterações mínimas de marcação. As vantagens são extensas : o estado da multimídia (como Adobe Flash ou Windows Media) é inalterado, os custos de largura de banda são reduzidos e o cliente não experimenta a cintilação geralmente associada a um postback.

A capacidade de integrar a renderização parcial de página é integrada a ASP.NET com alterações mínimas em seu projeto.

Passo a passo: integrando a renderização parcial em um projeto existente

1. No Microsoft Visual Studio 2008, crie um novo projeto ASP.NET Site acessando Arquivo-> Novo-> Site e selecionando ASP.NET Site na caixa de diálogo. Você pode nomeá-lo como quiser e instalá-lo no sistema de arquivos ou no IIS (Serviços de Informações da Internet).
2. Você verá a página padrão em branco com marcação de ASP.NET básica (um formulário do lado do servidor e uma @Page diretiva). Solte um Rótulo chamado Label1 e um Botão chamado Button1 na página dentro do elemento de formulário. Você pode definir suas propriedades de texto como o que quiser.
3. No modo Design, clique Button1 duas vezes para gerar um manipulador de eventos code-behind. Nesse manipulador de eventos, defina Label1.Text como Você clicou no botão! .

Listagem 1: Marcação para default.aspx antes que a renderização parcial seja habilitada

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head runat="server">
 <title>Untitled Page</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <div>
 <asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
 <asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
 </div>
 </form>
 </body>
</html>

Listagem 2: Codebehind (cortado) em default.aspx.cs

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "You clicked the button!";
    }
}

1. Pressione F5 para iniciar seu site. O Visual Studio solicitará que você adicione um arquivo web.config para habilitar a depuração; faça isso. Ao clicar no botão, observe que a página é atualizada para alterar o texto no rótulo e há uma breve cintilação à medida que a página é redesenhada.
2. Depois de fechar a janela do navegador, retorne ao Visual Studio e à página de marcação. Role para baixo na caixa de ferramentas do Visual Studio e localize a guia rotulada Extensões AJAX. (Se você não tiver essa guia porque está usando uma versão mais antiga das extensões AJAX ou Atlas, consulte o passo a passo para registrar os itens da caixa de ferramentas extensões AJAX posteriormente neste white paper ou instale a versão atual com o Windows Installer que pode ser baixado do site).

(Clique para exibir a imagem em tamanho real)

1. Problema conhecido:Se você instalar o Visual Studio 2008 em um computador que já tenha o Visual Studio 2005 instalado com as Extensões AJAX do ASP.NET 2.0, o Visual Studio 2008 importará os itens da caixa de ferramentas extensões AJAX. Você pode determinar se esse é o caso examinando a dica de ferramenta dos componentes; eles devem dizer a versão 3.5.0.0. Se eles disserem Versão 2.0.0.0, você importou seus itens antigos da caixa de ferramentas e precisará importá-los manualmente usando a caixa de diálogo Escolher Itens da Caixa de Ferramentas no Visual Studio. Você não poderá adicionar controles da Versão 2 por meio do designer.

2. Antes do início da <asp:Label> marcação, crie uma linha de espaço em branco e clique duas vezes no controle UpdatePanel na caixa de ferramentas. Observe que uma nova @Register diretiva está incluída na parte superior da página, indicando que os controles dentro do namespace System.Web.UI devem ser importados usando o asp: prefixo .

3. Arraste a marca de fechamento </asp:UpdatePanel> após o final do elemento Button, para que o elemento seja bem formado com os controles Rótulo e Botão encapsulados.

4. Após a marca de abertura <asp:UpdatePanel> , comece a abrir uma nova marca. Observe que o IntelliSense solicita duas opções. Nesse caso, crie uma <ContentTemplate> marca. Lembre-se de encapsular essa marca em torno de seu Rótulo e Botão para que a marcação seja bem formada.

(Clique para exibir a imagem em tamanho real)

1. Em qualquer lugar dentro do <form> elemento , inclua um controle ScriptManager clicando duas vezes no ScriptManager item na caixa de ferramentas.
2. Edite a <asp:ScriptManager> marca para que ela inclua o atributo EnablePartialRendering= true.

Listagem 3: Marcação para default.aspx com renderização parcial habilitada

<%@ Page Language="C#" AutoEventWireup="true"
 CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
 PublicKeyToken=31bf3856ad364e35"
 Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC
 "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head runat="server">
 <title>Untitled Page</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <asp:ScriptManager EnablePartialRendering="true"
 ID="ScriptManager1" runat="server"></asp:ScriptManager>
 <div>
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 <asp:Label ID="Label1" runat="server"
 Text="This is a label!"></asp:Label>
 <asp:Button ID="Button1" runat="server"
 Text="Click Me" OnClick="Button1_Click" />
 </ContentTemplate>
 </asp:UpdatePanel>
 </div>
 </form>
 </body>
</html>

1. Abra o arquivo de web.config. Observe que o Visual Studio adicionou automaticamente uma referência de compilação a System.Web.Extensions.dll.

2. Novidades no Visual Studio 2008: a web.config que vem com os modelos de projeto do site ASP.NET inclui automaticamente todas as referências necessárias às extensões do ASP.NET AJAX e inclui seções comentadas de informações de configuração que podem ser desacompossadas para habilitar funcionalidades adicionais. O Visual Studio 2005 tinha modelos semelhantes quando ASP.NET extensões AJAX 2.0 foram instaladas. No entanto, no Visual Studio 2008, as Extensões AJAX são recusadas por padrão (ou seja, são referenciadas por padrão, mas podem ser removidas como referências).

(Clique para exibir a imagem em tamanho real)

1. Pressione F5 para iniciar seu site. Observe como nenhuma alteração de código-fonte foi necessária para dar suporte à renderização parcial – somente a marcação foi alterada.

Ao iniciar seu site, você deverá ver que a renderização parcial agora está habilitada, pois quando você clica no botão não haverá cintilação, nem haverá qualquer alteração na posição de rolagem da página (este exemplo não demonstra isso). Se você examinar a origem renderizada da página depois de clicar no botão, isso confirmará que, na verdade, um post-back não ocorreu - o texto do rótulo original ainda faz parte da marcação de origem e o rótulo foi alterado por meio de JavaScript.

O Visual Studio 2008 não parece vir com um modelo predefinido para um site ASP.NET AJAX-Enabled. No entanto, esse modelo estava disponível no Visual Studio 2005 se as Extensões AJAX do Visual Studio 2005 e ASP.NET 2.0 foram instaladas. Consequentemente, configurar um site da Web e começar com o modelo de site AJAX-Enabled provavelmente será ainda mais fácil, pois o modelo deve incluir um arquivo web.config totalmente configurado (dando suporte a todas as extensões AJAX ASP.NET, incluindo acesso aos Serviços Web e serialização JSON – JavaScript Object Notation) e inclui um UpdatePanel e ContentTemplate na página main Web Forms por padrão. Habilitar a renderização parcial com essa página padrão é tão simples quanto revisitar a Etapa 10 deste passo a passo e soltar controles na página.

O controle ScriptManager

Referência de controle ScriptManager

Propriedades do Markup-Enabled:

Nome da Propriedade	Tipo	Descrição
AllowCustomErrors-Redirect	Bool	Especifica se a seção de erro personalizada do arquivo web.config deve ser usada para lidar com erros.
AsyncPostBackError-Message	String	Obtém ou define a mensagem de erro enviada ao cliente se um erro for gerado.
AsyncPostBack-Timeout	Int32	Obtém ou define a quantidade padrão de tempo que um cliente deve aguardar a conclusão da solicitação assíncrona.
EnableScript-Globalization	Bool	Obtém ou define se a globalização de script está habilitada.
EnableScript-Localization	Bool	Obtém ou define se a localização do script está habilitada.
ScriptLoadTimeout	Int32	Determina o número de segundos permitido para carregar scripts no cliente
Scriptmode	Enumeração (Auto, Debug, Release, Inherit)	Obtém ou define se as versões de versão dos scripts devem ser renderizadas
ScriptPath	String	Obtém ou define o caminho raiz para o local dos arquivos de script a serem enviados ao cliente.

Propriedades do Code-Only:

Nome da Propriedade	Tipo	Descrição
Authenticationservice	AuthenticationService-Manager	Obtém detalhes sobre o proxy do Serviço de Autenticação ASP.NET que será enviado ao cliente.
IsDebuggingEnabled	Bool	Obtém se a depuração de script e código está habilitada.
Isinasyncpostback	Bool	Obtém se a página está atualmente em uma solicitação de post back assíncrona.
Profileservice	ProfileService-Manager	Obtém detalhes sobre o proxy do Serviço de Criação de Perfil ASP.NET que será enviado ao cliente.
Scripts	Referência de script de coleção<>	Obtém uma coleção de referências de script que serão enviadas ao cliente.
Serviços	Referência de serviço de coleção<>	Obtém uma coleção de referências de proxy do Serviço Web que serão enviadas ao cliente.
Supportspartialrendering	Bool	Obtém se o cliente atual dá suporte à renderização parcial. Se essa propriedade retornar false, todas as solicitações de página serão postbacks padrão.

Métodos de código público:

Nome do método	Tipo	Descrição
SetFocus(string)	Void	Define o foco do cliente para um controle específico quando a solicitação for concluída.

Descendentes de marcação:

Tag	Descrição
<Authenticationservice>	Fornece detalhes sobre o proxy para o serviço de autenticação ASP.NET.
<Profileservice>	Fornece detalhes sobre o proxy para o serviço de criação de perfil ASP.NET.
<Scripts>	Fornece referências de script adicionais.
<asp:ScriptReference>	Indica uma referência de script específica.
<Serviço>	Fornece referências adicionais do Serviço Web que terão classes de proxy geradas.
<asp:ServiceReference>	Indica uma referência específica do Serviço Web.

O controle ScriptManager é o núcleo essencial para as extensões ASP.NET AJAX. Ele fornece acesso à biblioteca de scripts (incluindo o extenso sistema de tipos de script do lado do cliente), dá suporte à renderização parcial e fornece suporte extensivo para serviços de ASP.NET adicionais (como autenticação e criação de perfil, mas também outros Serviços Web). O controle ScriptManager também fornece suporte à globalização e localização para os scripts do cliente.

Fornecendo scripts alternativos e complementares

Embora as Extensões AJAX do Microsoft ASP.NET 2.0 incluam todo o código de script nas edições de depuração e versão como recursos inseridos nos assemblies referenciados, os desenvolvedores são livres para redirecionar o ScriptManager para arquivos de script personalizados, bem como registrar scripts adicionais necessários.

Para substituir a associação padrão para os scripts normalmente incluídos (como aqueles que dão suporte ao namespace Sys.WebForms e ao sistema de digitação personalizado), você pode se registrar para o ResolveScriptReference evento da classe ScriptManager. Quando esse método é chamado, o manipulador de eventos tem a oportunidade de alterar o caminho para o arquivo de script em questão; O gerenciador de scripts enviará uma cópia diferente ou personalizada dos scripts para o cliente.

Além disso, as referências de script (representadas pela ScriptReference classe) podem ser incluídas programaticamente ou por meio de marcação. Para fazer isso, modifique programaticamente a ScriptManager.Scripts coleção ou inclua <asp:ScriptReference> marcas sob a <Scripts> marca , que é um filho de primeiro nível do controle ScriptManager.

Tratamento de erro personalizado para UpdatePanels

Embora as atualizações sejam tratadas por gatilhos especificados pelos controles UpdatePanel, o suporte para tratamento de erros e mensagens de erro personalizadas é tratado pela instância de controle ScriptManager de uma página. Isso é feito expondo um evento, AsyncPostBackError, à página que pode fornecer lógica personalizada de tratamento de exceções.

Ao consumir o evento AsyncPostBackError, você pode especificar a AsyncPostBackErrorMessage propriedade , o que faz com que uma caixa de alerta seja gerada após a conclusão do retorno de chamada.

A personalização do lado do cliente também é possível em vez de usar a caixa de alerta padrão; por exemplo, talvez você queira exibir um elemento personalizado <div> em vez da caixa de diálogo modal do navegador padrão. Nesse caso, você pode lidar com o erro no script do cliente:

Listagem 5: script do lado do cliente para exibir erros personalizados

<script type= text/javascript >
 <!--
 Sys.WebForms.PageRequestManager.getInstance().add_EndRequest(Request_End);
 function Request_End(sender, args)
 {
 if (args.get_error() != undefined)
 {
 var errorMessage =  ;
 if (args.get_response().get_statusCode() ==  200 )
 {
 errorMessage = args.get_error().message;
 }
 else
 {
 // the server wasn't the problem...
 errorMessage =  An unknown error occurred... ;
 }
 // do something with the errorMessage here.
 // now make sure the system knows we handled the error.
 args.set_errorHandled(true);
 }
 }
 // -->
</script>

Muito simplesmente, o script acima registra um retorno de chamada com o runtime do AJAX do lado do cliente para quando a solicitação assíncrona foi concluída. Em seguida, ele verifica se um erro foi relatado e, nesse caso, processa os detalhes dele, finalmente indicando para o runtime que o erro foi tratado no script personalizado.

Suporte à globalização e localização

O controle ScriptManager fornece amplo suporte para localização de cadeias de caracteres de script e componentes de interface do usuário; no entanto, esse tópico está fora do escopo deste white paper. Para obter mais informações, consulte o white paper, Suporte à globalização em extensões ASP.NET AJAX.

O controle UpdatePanel

Referência de controle UpdatePanel

Propriedades do Markup-Enabled:

Nome da Propriedade	Tipo	Descrição
Childrenastriggers	bool	Especifica se os controles filho invocam automaticamente a atualização no postback.
RenderMode	enum (Block, Inline)	Especifica a maneira como o conteúdo será apresentado visualmente.
Updatemode	enum (Always, Conditional)	Especifica se o UpdatePanel é sempre atualizado durante uma renderização parcial ou se ele só é atualizado quando um gatilho é atingido.

Propriedades do Code-Only:

Nome da Propriedade	Tipo	Descrição
IsInPartialRendering	bool	Obtém se o UpdatePanel dá suporte à renderização parcial para a solicitação atual.
Contenttemplate	Itemplate	Obtém o modelo de marcação para a solicitação de atualização.
Contenttemplatecontainer	Control	Obtém o modelo programático para a solicitação de atualização.
Gatilhos	UpdatePanel - TriggerCollection	Obtém a lista de gatilhos associados ao UpdatePanel atual.

Métodos de código público:

Nome do método	Tipo	Descrição
Update()	Void	Atualizações o UpdatePanel especificado programaticamente. Permite que uma solicitação de servidor dispare uma renderização parcial de um UpdatePanel não acionado de outra forma.

Descendentes de marcação:

Tag	Descrição
<Contenttemplate>	Especifica a marcação a ser usada para renderizar o resultado parcial da renderização. Filho de asp <:UpdatePanel>.
<Gatilhos>	Especifica uma coleção de n controles associados à atualização deste UpdatePanel. Filho de asp <:UpdatePanel>.
<asp:AsyncPostBackTrigger>	Especifica um gatilho que invoca uma renderização de página parcial para o UpdatePanel fornecido. Isso pode ou não ser um controle como um descendente do UpdatePanel em questão. Granular para o nome do evento. Filho de <gatilhos>.
<asp:PostBackTrigger>	Especifica um controle que faz com que toda a página seja atualizada. Isso pode ou não ser um controle como um descendente do UpdatePanel em questão. Granular para o objeto . Filho de <gatilhos>.

O UpdatePanel controle é o controle que delimita o conteúdo do lado do servidor que participará da funcionalidade de renderização parcial das Extensões AJAX. Não há limite para o número de controles UpdatePanel que podem estar em uma página e eles podem ser aninhados. Cada UpdatePanel é isolado, para que cada um possa funcionar de forma independente (você pode ter dois UpdatePanels em execução ao mesmo tempo, renderizando diferentes partes da página, independentemente do postback da página).

O controle UpdatePanel lida principalmente com gatilhos de controle – por padrão, qualquer controle contido em um UpdatePanel ContentTemplate que cria um postback é registrado como um gatilho para o UpdatePanel. Isso significa que o UpdatePanel pode trabalhar com os controles padrão associados a dados (como o GridView), com controles de usuário, e eles podem ser programados no script.

Por padrão, quando uma renderização de página parcial é disparada, todos os controles UpdatePanel na página serão atualizados, independentemente de o UpdatePanel controlar ou não os gatilhos definidos para essa ação. Por exemplo, se um UpdatePanel definir um controle Button e esse controle Button for clicado, todos os controles UpdatePanel nessa página serão atualizados por padrão. Isso ocorre porque, por padrão, a UpdateMode propriedade do UpdatePanel é definida Alwayscomo . Como alternativa, você pode definir a propriedade UpdateMode como Conditional, o que significa que o UpdatePanel só será atualizado se um gatilho específico for atingido.

Notas de controle personalizadas

Um UpdatePanel pode ser adicionado a qualquer controle de usuário ou controle personalizado; no entanto, a página na qual esses controles estão incluídos também deve incluir um controle ScriptManager com a propriedade EnablePartialRendering definida como true.

Uma maneira pela qual você pode considerar isso ao usar controles personalizados da Web é substituir o método protegido CreateChildControls() da CompositeControl classe . Ao fazer isso, você pode injetar um UpdatePanel entre os filhos do controle e o mundo exterior se determinar que a página dá suporte à renderização parcial; caso contrário, você pode simplesmente colocar os controles filho em camadas em uma instância de contêiner Control .

Considerações sobre UpdatePanel

O UpdatePanel opera como uma espécie de caixa preta, encapsulando ASP.NET postbacks dentro do contexto de um XMLHttpRequest javaScript. No entanto, há considerações de desempenho significativas a serem consideradas, tanto em termos de comportamento quanto de velocidade. Para entender como o UpdatePanel funciona, para que você possa decidir melhor quando seu uso é apropriado, examine a troca do AJAX. O exemplo a seguir usa um site existente e, Mozilla Firefox com a extensão Firebug (Firebug captura dados XMLHttpRequest).

Considere um formulário que, entre outras coisas, tenha uma caixa de texto de cep que deve popular um campo de cidade e estado em um formulário ou controle. Esse formulário, em última análise, coleta informações de associação, incluindo o nome, o endereço e as informações de contato de um usuário. Há muitas considerações de design a serem consideradas, com base nos requisitos de um projeto específico.

(Clique para exibir a imagem em tamanho real)

(Clique para exibir a imagem em tamanho real)

Na iteração original desse aplicativo, foi criado um controle que incorporou a totalidade dos dados de registro do usuário, incluindo o cep, a cidade e o estado. Todo o controle foi encapsulado em um UpdatePanel e solto em um Web Form. Quando o código postal é inserido pelo usuário, o UpdatePanel detecta o evento (o evento TextChanged correspondente no back-end, especificando gatilhos ou usando a propriedade ChildrenAsTriggers definida como true). O AJAX posta todos os campos no UpdatePanel, conforme capturado pelo FireBug (consulte o diagrama à direita).

Como a captura de tela indica, os valores de cada controle dentro do UpdatePanel são entregues (nesse caso, estão todos vazios), bem como o campo ViewState. Ao todo, mais de 9kb de dados são enviados, quando, na verdade, apenas cinco bytes de dados eram necessários para fazer essa solicitação específica. A resposta é ainda mais inchada: no total, 57 kb são enviados ao cliente, simplesmente para atualizar um campo de texto e um campo suspenso.

Também pode ser interessante ver como ASP.NET AJAX atualiza a apresentação. A parte de resposta da solicitação de atualização do UpdatePanel é mostrada na exibição do console do Firebug à esquerda; é uma cadeia de caracteres delimitada por pipe especialmente formulada que é dividida pelo script do cliente e remontada na página. Especificamente, ASP.NET AJAX define a propriedade innerHTML do elemento HTML no cliente que representa o UpdatePanel. Como o navegador gera novamente o DOM, há um pequeno atraso, dependendo da quantidade de informações que precisam ser processadas.

A regeneração do DOM dispara uma série de problemas adicionais:

(Clique para exibir a imagem em tamanho real)

• Se o elemento HTML focado estiver dentro do UpdatePanel, ele perderá o foco. Portanto, para os usuários que pressionaram a tecla Tab para sair da caixa de texto do cep, seu próximo destino teria sido a caixa de texto Cidade. No entanto, depois que UpdatePanel atualizasse a exibição, o formulário não teria mais foco e pressionar Tab teria começado a realçar os elementos de foco (como links).
• Se qualquer tipo de script personalizado do lado do cliente estiver em uso que acesse elementos DOM, as referências persistidas por funções poderão ser extintas após um postback parcial.

UpdatePanels não se destinam a ser soluções catch-all. Em vez disso, eles fornecem uma solução rápida para determinadas situações, incluindo protótipos, pequenas atualizações de controle e fornecem uma interface familiar para ASP.NET desenvolvedores que podem estar familiarizados com o modelo de objeto .NET, mas menos com o DOM. Há várias alternativas que podem resultar em um melhor desempenho, dependendo do cenário do aplicativo:

• Considerar o uso de PageMethods e JSON (JavaScript Object Notation) permite que o desenvolvedor invoque métodos estáticos em uma página como se uma chamada de serviço Web estivesse sendo invocada. Como os métodos são estáticos, nenhum estado é necessário; o chamador de script fornece os parâmetros e o resultado é retornado de forma assíncrona.
• Considere usar um Serviço Web e JSON se um único controle precisar ser usado em vários locais em um aplicativo. Isso novamente requer muito pouco trabalho especial e funciona de forma assíncrona.

A incorporação da funcionalidade por meio de Serviços Web ou Métodos de Página também tem desvantagens. Em primeiro lugar, ASP.NET desenvolvedores normalmente tendem a criar pequenos componentes de funcionalidade em controles de usuário (arquivos .ascx). Os métodos de página não podem ser hospedados nesses arquivos; eles devem ser hospedados dentro da classe de página .aspx real. Os serviços Web, da mesma forma, devem ser hospedados dentro da classe .asmx. Dependendo do aplicativo, essa arquitetura pode violar o Princípio de Responsabilidade Única, pois a funcionalidade de um único componente agora está distribuída entre dois ou mais componentes físicos que podem ter pouco ou nenhum vínculo coeso.

Por fim, se um aplicativo exigir que UpdatePanels seja usado, as diretrizes a seguir deverão ajudar na solução de problemas e manutenção.

• Aninhar UpdatePanels o mínimo possível, não apenas dentro de unidades, mas também entre unidades de código. Por exemplo, ter um UpdatePanel em uma Página que encapsula um Controle, enquanto esse Controle também contém um UpdatePanel, que contém outro Controle que contém um UpdatePanel, é aninhamento entre unidades. Isso ajuda a manter claro quais elementos devem ser atualizados e impede atualizações inesperadas para UpdatePanels filho.
• Mantenha a propriedade ChildrenAsTriggers definida como false e defina explicitamente eventos de gatilho. Utilizar a <Triggers> coleção é uma maneira muito mais clara de lidar com eventos e pode evitar comportamentos inesperados, ajudando com tarefas de manutenção e forçando um desenvolvedor a aceitar um evento.
• Use a menor unidade possível para obter a funcionalidade. Conforme observado na discussão do serviço de cep, encapsular apenas o mínimo mínimo reduz o tempo para o servidor, o processamento total e o volume da troca cliente-servidor, melhorando o desempenho.

O controle UpdateProgress

Referência de controle UpdateProgress

Propriedades do Markup-Enabled:

Nome da Propriedade	Tipo	Descrição
AssociatedUpdate-PanelID	String	Especifica a ID do UpdatePanel na qual este UpdateProgress deve relatar.
Displayafter	int	Especifica o tempo limite em milissegundos antes que esse controle seja exibido após o início da solicitação assíncrona.
DynamicLayout	bool	Especifica se o progresso é renderizado dinamicamente.

Descendentes de marcação:

Tag	Descrição
<Progresstemplate>	Contém o modelo de controle definido para o conteúdo que será exibido com esse controle.

O controle UpdateProgress fornece uma medida de comentários para manter o interesse dos usuários enquanto faz o trabalho necessário para transportar para o servidor. Isso pode ajudar os usuários a saber que você está fazendo algo mesmo que isso possa não ser aparente, especialmente porque a maioria dos usuários está acostumada com a atualização da página e vendo o realce da barra de status.

Como observação, os controles UpdateProgress podem aparecer em qualquer lugar em uma hierarquia de páginas. No entanto, nos casos em que um postback parcial é iniciado de um UpdatePanel filho (em que um UpdatePanel está aninhado em outro UpdatePanel), postbacks que disparam o UpdatePanel filho farão com que os modelos UpdateProgress sejam exibidos para o UpdatePanel filho, bem como o UpdatePanel pai. Mas, se o gatilho for um filho direto do UpdatePanel pai, somente os modelos UpdateProgress associados ao pai serão exibidos.

Resumo

As extensões do Microsoft ASP.NET AJAX são produtos sofisticados projetados para ajudar a tornar o conteúdo da Web mais acessível e fornecer uma experiência de usuário mais rica para seus aplicativos Web. Como parte do ASP.NET extensões AJAX, os controles parciais de renderização de página, incluindo os controles ScriptManager, UpdatePanel e UpdateProgress, são alguns dos componentes mais visíveis do kit de ferramentas.

O componente ScriptManager integra o provisionamento do JavaScript cliente para as Extensões, bem como permite que os vários componentes do servidor e do lado do cliente trabalhem em conjunto com o mínimo de investimento em desenvolvimento.

O controle UpdatePanel é a caixa mágica aparente – a marcação dentro do UpdatePanel pode ter Codebehind do lado do servidor e não disparar uma atualização de página. Os controles UpdatePanel podem ser aninhados e podem depender de controles em outros UpdatePanels. Por padrão, UpdatePanels manipulam quaisquer postbacks invocados por seus controles descendentes, embora essa funcionalidade possa ser ajustada de forma fina, seja declarativamente ou programaticamente.

Ao usar o controle UpdatePanel, os desenvolvedores devem estar cientes do impacto no desempenho que pode surgir. As alternativas potenciais incluem serviços Web e métodos de página, embora o design do aplicativo deva ser considerado.

O controle UpdateProgress permite que o usuário saiba que ela ou ele não está sendo ignorado e que a solicitação nos bastidores está acontecendo enquanto a página não está fazendo nada para responder à entrada do usuário. Ele também inclui a capacidade de anular resultados parciais de renderização.

Juntas, essas ferramentas ajudam a criar uma experiência de usuário avançada e perfeita, tornando o trabalho do servidor menos aparente para o usuário e interrompendo menos o fluxo de trabalho.

Biografia

Scott Cate trabalha com tecnologias da Microsoft Web desde 1997 e é presidente de myKB.com (www.myKB.com), onde é especialista em escrever aplicativos baseados em ASP.NET com foco em soluções de Software da Base de Dados de Conhecimento. Scott pode ser contatado por e-mail em scott.cate@myKB.com ou seu blog em ScottCate.com

Próximo