Aplicativo de Exemplo de AJAX

Artigo
10/15/2014

Este tutorial cria um aplicativo de exemplo básica que usa recursos do AJAX do ASP.NET.Você pode ler mais sobre os recursos do AJAX no ASP.NET, quais técnicas emite esses recursos são projetados para solucionar e que os componentes importantes do AJAX são nos seguintes documentos introdutórios:

Neste tutorial 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 apenas a parte da página que foi alterado sem o flash de página ocorre com uma nova postagem. Isso é conhecido como uma atualização parcial de página .O aplicativo de exemplo usa também o controle UpdateProgress para exibir uma mensagem de status enquanto está processando a atualização parcial de página.

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.
Um site da Web ASP.NET habilitado para AJAX.
O banco de dados de exemplo AdventureWorks.Você pode fazer o baixar e instalar o banco de dados AdventureWorks do centralizar de baixar da Microsoft.(Procure por "Exemplos SQL Server 2005 e bancos de dados de exemplo (dezembro de 2006)").

Criando um site da Web ASP.NET

Sites da Web que você cria no ASP.NET por padrão incluem suporte para a funcionalidade do AJAX.

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

Inicie o Visual Studio
No menu Arquivo, clique em Novo Site da Web.

A caixa de diálogo New Web Site é exibida.
Em Modelos Instalados do Visual Studio, selecione ASP.NET Web Site.
Insira 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 da Web ASP.NET, você cria uma página da Web do ASP.NET que inclui um UpdatePanel controle. Antes de adicionar um UpdatePanel o controle para a página, você deve adicionar um ScriptManager controle. The UpdatePanel controle depende da ScriptManager controle para gerenciar as atualizações de página parcial.

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

Em Gerenciador de Soluções, clique com o botão direito do mouse no nome do site, e clique Adicionar Novo Item.

A caixa de diálogo Add New Item é exibida.
Em Modelos instalados do Visual Studio, escolha Formulário Web.
Nomeie a nova página Employees.aspx e desmarque a caixa de seleção Colocar o código em arquivo separado.
Selecione o idioma que deseja usar.
Clique em Adicionar.
Alternar para modo Design.
Na guia Extensões AJAX da caixa de ferramentas, clique duas vezes no controle ScriptManager para adicioná-lo à página.
Arraste um controle UpdatePanel da caixa de ferramentas e solte-o abaixo do controle ScriptManager.

Adicionando conteúdo a um Controle UpdatePanel

O controle UpdatePanel executa atualizações parciais de página e identifica o conteúdo que é atualizado independentemente do restante da página.Nesta parte do tutorial, você adicionará um controle vinculado a dados que exiba dados de banco de dados AdventureWorks.

Adicionando conteúdo a um Controle UpdatePanel

Na guia Dados da caixa de ferramentas, arraste um controle GridView para a área editável do controle UpdatePanel.
No menu Tarefas GridView, clique em Formatar automaticamente.
No painel Formatar automaticamente, em Selecionar um esquema , selecione Colorido e em seguida, clique em OK .
No menu Tarefas GridView , selecione < Nova fonte de dados > da lista Escolher fonte de dados .

O assistente Configração da Fonte de Dados é exibido.
Em O aplicativo obterá dados de , selecione Banco de Dados e, em seguida, clique em OK .
No assistente Configurar Fonte de Dados , para a etapa Escolha a Conexão de Dados , configure uma conexão ao banco de dados AdventureWorks e, em seguida, clique em Avançar .
Para a etapa Configurar a Declaração Select , selecione Especificar uma instrução SQL personalizada ou procedimento armazenado e, em seguida, clique em Avançar .
Na guia SELECT da etapa Definir Declaração personalizada ou Procedimentos Armazenados , digite a seguinte instrução SQL:
```
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
```
Clique em Next.
Clique em Finish.
No menu Tarefas GridView, selecione a caixa de seleção Habilitar paginaçã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 controle UpdateProgress exibe uma mensagem de status enquanto o novo conteúdo para um controle UpdatePanel está sendo solicitado.

Adicionando um Controle UpdateProgress à Página

Da guia Extensões Ajax da caixa de ferramentas, arraste um controle UpdateProgress até a página e solte-o sob o controle UpdatePanel.
Selecione o controle UpdateProgress e na janela Propriedades, defina a propriedade AssociatedUpdatePanelID como UpdatePanel1 .

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

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

Adicionando um Atraso ao Aplicativo de Exemplo

Se seu aplicativo atualiza cada página de dados rapidamente, você não poderá ver o conteúdo do controle UpdateProgress na página.O controle UpdateProgress suporta uma propriedade DisplayAfter que permite que você defina um atraso antes do controle ser exibido.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 controle UpdateProgress não será exibido se a atualização levar menos da metade de um segundo.

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

Adicionando um Atraso ao Aplicativo de Exemplo

Dentro do controle UpdatePanel, selecione o controle GridView.
Na janela Propriedades, clique no botão Eventos.
Clique duas vezes no evento PageIndexChanged para criar um manipulador de eventos.

Adicione o seguinte código para o manipulador de eventos PageIndexChanged para criar um atraso de três segundos artificialmente:

'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)

//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);

Observação:
O manipulador para o evento PageIndexChanged introduz intencionalmente um atraso para este tutorial.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á ver o controle UpdateProgress.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

    Protected Sub GridView1_PageIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        'Include three second delay for example only.
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:GridView ID="GridView1"  AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

    protected void GridView1_PageIndexChanged(object sender, EventArgs e)
    {
        //Include three second delay for example only.
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:GridView ID="GridView1"  AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>