Walkthrough: Criando um site da Web AJAX-ativado

Artigo
10/15/2014

Essa explicação passo-a-passo cria um site da Web ASP.NET básico com um página da Web que apresenta alguns recursos do que está incluído na Biblioteca AJAX do ASP.NET no Visual Studio.Você irá criar um aplicativo que exibe páginas de dados do funcionário a partir do banco de dados de exemplo AdventureWorks.O aplicativo usa o UpdatePanel Controle para atualizar somente a parte da página que foi alterado, sem o Flash de página que ocorre com um postVoltar.Isso é conhecido como um Parcial-page update.O aplicativo de exemplo também usa o UpdateProgress Controle para exibir um mensagem de status enquanto o partial-PAGE Atualizar está processando.

Pré-requisitos

Para implementar os procedimentos no seu próprio ambiente de desenvolvimento você precisa:

Microsoft Visual Studio 2005 ou Microsoft Visual Web Developer Express Edition.
O banco de dados de exemplo AdventureWorks.Você pode fazer o download e instalar o AdventureWorks Banco de Dados a partir de Centro de Download Microsoft.(Procure por "Exemplos SQL Server 2005 e bancos de dados de exemplo (dezembro de 2006)").

Walkthrough: Criando um site da Web ASP.NET com AJAX-ativado

Você pode criar sites da Web ASP.NET AJAX-ativado usando o modelo instalado.

Walkthrough: Criando um site da Web ASP.NET com AJAX-ativado

Em Visual Studioin a File Menu, clique em Novo Site da Web.

O Novo Site da Web caixa de diálogo é exibida.
Em Modelos Visual Studio instaladoSelecione ASP.NET AJAX - Ativado de sites da Web.
Enter Um local e um idioma e em seguida, clique em OK.

Adicionar um controle UpdatePanel a uma página da Web

Depois de criar um site habilitado AJAX, você criar um página da Web do ASP.NET que inclui um UpdatePanel o controle.Antes de adicionar um UpdatePanel Controle para a página, você deve adicionar um ScriptManager o controle.O UpdatePanel Controle depende de ScriptManager Controle para gerenciar atualizações parcial de página.

Crie uma nova página da Web do ASP.NET.

No Solução Explorer, clique com o botão direito do mouse no nome do site e em seguida, clique em Adicionar novo item.

O Adicionar novo item caixa de diálogo é exibida.
Em Modelos Visual Studio instaladoSelecione Web Form.
Nome de Nova Página Employees.aspx e limpar o Coloque o código no arquivo separado caixa de seleção.
Selecione o idioma que deseja usar.
Clique em Adicionar.
Alternar para modo Design.
Na AJAX extensões guia da caixa de ferramentas, clique duas vezes o ScriptManager controle para adicioná-lo para a página.
Arraste um UpdatePanel Controle da caixa de ferramentas e Soltar-la abaixo de ScriptManager o controle.

Adicionando conteúdo a um Controle UpdatePanel

O UpdatePanel controle por Formulários parcial-página Atualizações e identifica o conteúdo que é atualizado independentemente do restante da página.Nesta parte da explicação passo-a-passo, você adicionará um controle vinculado a dados que exiba dados de banco de dados AdventureWorks.

Adicionando conteúdo a um Controle UpdatePanel

A partir de Dados guia da caixa de ferramentas, arraste um GridView Controle em a área editável do UpdatePanel o controle.
Na Tarefas GridExibir Menu, clique em Formatação Automáticomática.
Na Formatação Automáticomática Image, em Selecionar um esquemaSelecione Colorido e em seguida, clique em OK.
Na Tarefas GridExibir menu, selecione < novo Origem de dados > a partir de Escolher fonte de dados Lista.

O Configuração de fonte de dados assistente é exibido.
Em W aqui o aplicativo obterá dados doSelecione Banco de dados e em seguida, clique em OK.
Na Configurar fonte de dados Assistente, para o Escolha sua conexão de dados Etapa, configurar uma conexão ao banco de dados AdventureWorks e em seguida, clique em Next.
Para o Configurar a Instrução Select etapa, selecione Especifique um personalizado Instrução SQL ou procedimento armazenado e em seguida, clique em Next.
Na SELECT Guia das Definir personalizado instrução ou procedimentos armazenados Etapa, digite o seguinte Instrução SQL:
```
SELECT Nome, Sobrenome de HumanResources.vEmployee Ordem BY Sobrenome, Nome
```
Clique em Next.
Clique em Finish.
Na Tarefas GridExibir menu, selecione o Habilitar paginação caixa de seleção.
Salve suas alterações e, em seguida, pressione CTRL + F5 para exibir a página em um navegador.

Observe que não há nenhuma página flash quando você seleciona diferentes páginas de dados.Isso ocorre porque a página não está executando um postback e atualizando a página inteira sempre.

Adicionando um Controle UpdateProgress à Página

O UpdateProgress o controle exibe um mensagem de status ao novo conteúdo para um UpdatePanel o controle está sendo solicitado.

Adicionando um Controle UpdateProgress à Página

A partir de AJAX extensões guia da caixa de ferramentas, arraste um UpdateProgress controlar até a página e solte-sob a UpdatePanel o controle.
Selecione o UpdateProgress Controlar e na janela Propriedades, defina o AssociatedUpdatePanelID Propriedade para UpdatePanel1.

Isto associa o UpdateProgress Controle com o UpdatePanel controle que você adicionou anteriormente.
Na área editável das UpdateProgress Controle, tipo guia Funcionários... .
Salve suas alterações e, em seguida, pressione CTRL + F5 para exibir a página em um navegador.

Se houver um atraso enquanto executa a consulta SQL a página e retorna os dados, o UpdateProgress Controle exibe a mensagem que você inseriu para o UpdateProgress o controle.

Adicionando um Atraso ao Aplicativo de Exemplo

Se seu Atualizações do Aplicativo cada página de dados rapidamente, você pode não ver o conteúdo das UpdateProgress Controle na página.O UpdateProgress controle oferece suporte a um DisplayAfter() Propriedade que permite que você definir um atraso antes do controle é exibida.Isso impede que o controle fique piscando no navegador se a atualização ocorrer muito rápido.Por padrão, o atraso é definido como 500 milissegundos (0,5 segundo), o que significa que o UpdateProgress Controle não será exibido se a atualização leva Menos que metade um segundo.

Em um ambiente de desenvolvimento, você pode adicionar um atraso falsas ao seu aplicativo para certificar-se de que o UpdateProgress o controle está funcionando conforme o esperado.Esta é uma etapa opcional e é somente para testar seu aplicativo.

Adicionando um Atraso ao Aplicativo de Exemplo

Dentro de UpdatePanel o controle, selecione o GridView o controle.
Na janela Propriedades, clique na Eventos Botão.
Clique duas vezes o PageIndexChanged Evento para criar um manipulador de eventos.

Adicione o seguinte código para o PageIndexChanged manipulador de eventos para criar um atraso three-segundo artificialmente:

Observação:
O manipulador para o PageIndexChanged Evento intencionalmente apresenta um retardo para este exame Através.Na prática, você poderia não introduzir um atraso.Em vez disso, o atraso deve ser o resultado do tráfego do servidor ou do código que demora para processar, como uma consulta ao banco de dados de execução demorada .

Salve suas alterações e, em seguida, pressione CTRL + F5 para exibir a página em um navegador.

Porque há agora um atraso de três segundos toda vez que você mover para uma nova página de dados, você poderá ser Consulte a UpdateProgress o controle.