Introdução ao Controle UpdatePanel

  • Artigo

Neste tutorial você adicionará suporte para a atualização de página parcial para uma página da Web usando dois controles de servidor ASP.NET AJAX: the ScriptManager controle e o UpdatePanel controle. Esses controles removem a necessidade de atualizar a página inteira com cada postagem, o que melhora a experiência do usuário.Para obter mais informações em atualizações parciais de página, consulte Visão geral de renderização de página parcial.

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.

Para usar um controle UpdatePanel

  1. Crie uma nova página e alterne para modo de Design.

  2. Na guia Extensões AJAX da caixa de ferramentas, clique duas vezes no controle ScriptManager para adicioná-lo à página.

  3. Clique duas vezes no controle UpdatePanel para adicioná-lo à página.

  4. Clique dentro do controle UpdatePanel e ,em seguida, na guia Padrão da caixa de ferramentas, clique duas vezes nos controles Label e Button para adicioná-los ao controle UpdatePanel.

    Observação:

    Certifique-se de adicionar os controles Label e Button dentro do controle UpdatePanel.

  5. conjunto o Text propriedade das Label para o painel criado.

  6. Clique duas vezes no controle Button para adicionar um manipulador para o botão do evento Click.

  7. Adicione o seguinte código ao manipulador Click, que define o valor de rótulo no painel como a hora atual.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

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

  9. Clique no botão.

    Note que o texto no painel muda para mostrar o último instante em que o painel de conteúdo foi atualizado.Esse texto é definido no botão Click do manipulador de eventos.

    O exemplo é estilizado para melhor apresentar a região da página que representa o UpdatePanel.

    <%@ 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 Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </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 Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div style="padding-top: 10px">
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        </div>

    </div>
    </form>
</body>
</html>

    O conteúdo do painel é alterado toda vez que você clicar no botão, mas a página inteira não é atualizada.Por padrão, a propriedade ChildrenAsTriggers de um controle UpdatePanel é true.Quando essa propriedade é definida como true, controles dentro do painel participam das atualizações parciais de página quando qualquer controle no painel causa uma postagem.

Noções Básicas sobre os Benefícios do Controle do UpdatePanel

Você pode compreender melhor os benefícios do controle UpdatePanel adicionando alguns controles para a página que não estão incluídos no painel de atualização.Em seguida, você pode ver como seu comportamento difere dos controles no painel de atualização.

Para demonstrar os benefícios do uso de controle UpdatePanel

  1. Crie uma nova página e alterne para modo de Design.

  2. Na guia Extensões AJAX da caixa de ferramentas, clique duas vezes no controle ScriptManager para adicioná-lo à página.

  3. Clique duas vezes no controle UpdatePanel para adicioná-lo à página.

  4. Clique dentro do controle UpdatePanel e,em seguida, na guia Padrão da caixa de ferramentas, clique duas vezes em um controle Calendar para adicioná-lo ao controle UpdatePanel.

    Observação:

    Certifique-se de adicionar o controle Calendar dentro do controle UpdatePanel.

  5. Clique fora do controle UpdatePanel e adicione um segundo controle Calendar à página.

    Esse controle não será ser parte do controle UpdatePanel.

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

  7. Navegue para o mês anterior ou próximo no calendário que está dentro do controle UpdatePanel.

    O mês exibido é alterado sem atualizar a página inteira.

  8. Navegue para o mês anterior ou próximo no calendário que está fora do controle UpdatePanel.

    A página inteira é atualizada.

    O exemplo é estilizado para melhor apresentar a região da página que representa o UpdatePanel.

    <%@ Page Language="VB" %>

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

<script >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" ></asp:Calendar>    
    </div>
    </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 >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" ></asp:Calendar>    
    </div>
    </form>
</body>
</html>

Atualizando um Controle UpdatePanel com um Botão Externo

Por padrão, um controle de postagem (como um botão) dentro de um controle UpdatePanel causa uma atualização parcial de página.Por padrão, um botão ou outro controle fora de um controle UpdatePanel faz com que a página inteira seja atualizada, como você viu.

Você também pode configurar um controle fora do painel de atualização para ser um disparador que atualiza apenas o painel de atualização.

Para atualizar um controle UpdatePanel com um botão externo

  1. Crie uma nova página e alterne para modo de Design.

  2. Na guia Extensões AJAX da caixa de ferramentas, clique duas vezes nos controles ScriptManager e UpdatePanel para adicionar um de cada controle à página.

  3. Clique dentro do controle UpdatePanel e, em seguida, na guia Padrão da caixa de ferramentas, clique duas vezes no controle Label para adicioná-lo ao controle UpdatePanel.

  4. conjunto o Text propriedade do rótulo para o painel criado.

  5. Clique fora do UpdatePanel controle e, em seguida, adicione um controle Button.

  6. Clique duas vezes no controle Button para adicionar um manipulador para o botão do evento Click.

  7. Adicione o seguinte código ao manipulador Click, que define o valor de rótulo no painel como a hora atual.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

  8. Alterne para o modo Design, selecione UpdatePanel e, em seguida, exiba a janela Propriedades.

    Observação:

    Se a janela Propriedades não é exibida, pressione F4.

  9. No campo Disparadores, clique duas vezes no botão reticências (…).

    A caixa de diálogo Editor de Coleção UpdatePanelTrigger é exibida.

  10. Clique em Adicionar para adicionar um novo disparador.

  11. No campo ID de Controle das propriedades do disparador, use a lista suspensa para selecionar Botão1.

    Nesse exemplo, a propriedade NomeDoEvento do disparador não foi especificada.Portanto, o evento padrão do botão (o evento Click) irá acionar a atualização do controle UpdatePanel.

  12. Clique em OK no editor de coleção.

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

  14. Clique no botão.

    O texto no painel muda para exibir o último instante em que o conteúdo do painel foi atualizado.

  15. Clique no botão mais algumas vezes.

    O horário muda, mas a página inteira não é atualizada.

    Clicando no botão fora de UpdatePanel atualiza o painel de conteúdo porque você configurou o botão para ser um disparador para o controle UpdatePanel.Um botão que é um disparador executa uma postagem assíncrona quando você clica nele e causa uma atualização do painel de atualização associado.Esse comportamento lembra o comportamento do primeiro exemplo neste tutorial, onde o botão estava dentro de UpdatePanel.

    O exemplo é estilizado para melhor apresentar a região da página que UpdatePanel representa.

    <%@ 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 Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" /></div>
    </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 Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" /></div>
    </form>
</body>
</html>

Revisão

Este tutorial introduziu os conceitos básicos do uso de um controle UpdatePanel para ativar atualizações parciais de página.Você deve sempre adicionar um controle ScriptManager e, em seguida, adicionar um controle UpdatePanel.Por padrão, os controles dentro do painel farão com que o painel atualize quando executarem uma postagem.Controles externos podem causar a atualização de um UpdatePanel se eles estiverem configurados como disparadores para o painel.

A próxima etapa é aprender como adicionar vários controles UpdatePanel à página.Para obter mais informações, consulte Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls.

Consulte também

Conceitos

Visão geral de renderização de página parcial

Referência

UpdatePanel

ScriptManager