Visão geral sobre controle UpdatePanel
Os controles UpdatePanel do ASP.NET permitem que você crie aplicativos da Web ricos, cliente-centralizados.Usando controles UpdatePanel, é possível atualizar partes selecionadas da página em vez de atualizar a página inteira com uma postagem.Isso é conhecido como executar uma atualização página-parcial.Uma página da Web do ASP.NET que contém um controle ScriptManager e um ou mais controles UpdatePanel podem participar automaticamente das parciais de página, sem script de cliente personalizado.
Este tópico contém informações sobre o seguinte:
Cenários
Segundo plano
Exemplos de código
Referência de Classe
Cenários
O controle UpdatePanel é um controle de servidor que ajuda a desenvolver páginas da Web com o comportamento do cliente complexo que faz uma página da Web parecer mais interativa para o usuário final.Escrever código que coordena entre servidor e cliente para atualizar somente especificadas partes de uma página da Web geralmente requer conhecimento profundo de ECMAScript (JavaScript).No entanto, usando o controle UpdatePanel, você pode ativar um página da Web para participar de atualizações página-parcial sem escrever qualquer script de cliente.Se você desejar, você pode adicionar script de cliente personalizado para aprimorar a experiência do usuário do cliente.Quando você usa um controle UpdatePanel, o comportamento de página é independente do navegador e possivelmente pode reduzir a quantidade de dados que são transferidos entre cliente e servidor.
Segundo plano
Controles UpdatePanel funcionam especificando regiões de uma página que podem ser atualizados sem atualizar a página inteira.Esse processo é coordenado pelo controle ScriptManager do servidor e o cliente de classe PageRequestManager.Quando as atualizações página-parciais estiverem ativadas, controles podem de forma assíncrona enviar para o servidor.Uma postagem assíncrona se comporta como um postagem regular no que a página resultante do servidor executa a página completa e controla o ciclo de vida.No entanto, com uma postagem assíncrona, atualizações de página estão limitadas a regiões da página que são colocados em controles UpdatePanel e que estão marcados para serem atualizados.O servidor envia marcação MTML para apenas os elementos afetados no navegador.No navegador, a classe de cliente PageRequestManager executa manipulação DOM (modelo de objeto de documento) para substituir o MTML existente pela marcação atualizada.
.gif "Observação") Observação: |
|---|
Quando você estiver usando postbacks assíncrono ou usando o XMLHTTPRequest objeto, um postback erro pode ocorrer se o URL contém um caractere de byte duplo. You can resolve this problem by including a <base href="url"/> element in the head element of the page, where the href attribute is set to the URL-encoded string that references the page.Você pode adicionar este elemento adicionado dinamicamente no código servidor. |
A ilustração a seguir mostra uma página que é carregada pela primeira vez e uma postagem assíncrona subsequente que atualiza o conteúdo de um controle UpdatePanel.
Visão geral de renderização parcial da página
.png)
Habilitando atualizações páginas-parcial
O controle UpdatePanel requer um controle ScriptManager na página da Web.Por padrão, atualizações página-parcial são ativadas o valor padrão da propriedade EnablePartialRendering do controle ScriptManager é true.
O exemplo a seguir mostra a marcação que define um controle ScriptManager e um controle UpdatePanel em uma página.O controle UpdatePanel contém um controle Button que atualiza o conteúdo no painel quando você clica nele.By default, the ChildrenAsTriggers property is true.Portanto, o controle Button atua como um controle de postagem assíncrono.
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!-- Other content in the panel. -->
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!-- Other content in the panel. -->
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
Especificando conteúdo de controle do UpdatePanel
Você adiciona conteúdo a um controle UpdatePanel declarativamente ou no designer usando a propriedade ContentTemplate.Na marcação, essa propriedade é exposta como um elemento ContentTemplate.Para adicionar conteúdo programaticamente, você use a propriedade ContentTemplateContainer.
Quando uma página que contém um ou mais controles UpdatePanel é primeiro processada, todo o conteúdo dos controles UpdatePanel é processado e enviado ao navegador.Em postagens assíncronas subsequentes, o conteúdo de controles UpdatePanel individuais pode ser atualizado.Atualizações dependem das configurações do painel, em qual elemento causou a postagem e no código que é específico para cada painel.
Especificar disparadores UpdatePanel
Por padrão, qualquer controle de postagem dentro de um controle UpdatePanel causa uma postagem assíncrona e atualiza o conteúdo do painel.No entanto, você também pode configurar outros controles na página para atualizar um controle UpdatePanel.Para isso defina um disparador para o controle UpdatePanel.Um disparador é uma ligação que especifica qual controle de postagem e evento faz com que um painel atualize.Quando o evento especificado do controle de disparador é gerado (por exemplo, um botão de evento Click), o painel de atualização é atualizado.
O exemplo a seguir mostra como especificar um disparador para um controle UpdatePanel.
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
<asp:ScriptManager ID="ScriptManager1"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
<asp:ScriptManager ID="ScriptManager1"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
O disparador é definido usando o elemento asp:AsyncPostBackTrigger dentro do elemento Triggers do controle UpdatePanel.(Se você estiver editando a página no Visual Studio, você pode criar disparadores, usando a caixa de diálogo Editor de Coleção UpdatePanelTrigger .)
Um evento de controle do disparador é opcional.Se você não especificar um evento, o evento do disparador é o evento padrão do controle.Por exemplo, para o controle Button, o evento padrão é o evento Click.
Como controles UpdatePanel são atualizados
A lista a seguir descreve as configurações de propriedades do controle UpdatePanel que determinam quando o conteúdo de um painel é atualizado durante a renderização página-parcial.
Se a propriedade UpdateMode é definida como Always, conteúdo UpdatePanel do controle será atualizado em cada postagem que se origina em qualquer lugar da página.Isso inclui postagens assíncronas de controles que estão dentro de outros controles UpdatePanel, e postagens de controles que não estão dentro de controles UpdatePanel.
Se a propriedade UpdateMode é definida como Conditional, o conteúdo UpdatePanel do controle será atualizado quando uma das seguintes for verdadeira:
Quando a postagem é causada por um disparador para aquele controle UpdatePanel.
Quando você chama o método Update do controle UpdatePanel explicitamente.
Quando o controle UpdatePanel está aninhado em outro controle UpdatePanel e o painel pai está atualizado.
Quando a propriedade ChildrenAsTriggers é definida como true e qualquer controle filho do controle UpdatePanel causa um postback.Controles filho de controles UpdatePanel aninhados não causam uma atualização para o controle UpdatePanel externo, a menos que eles sejam explicitamente definidos como disparadores para o painel pai.
Se a propriedade ChildrenAsTriggers é definido como false e a propriedade UpdateMode é definido comoAlways, uma exceção é lançada.A propriedade ChildrenAsTriggers é destinada a ser usada somente quando a propriedade UpdateMode é definida como Conditional.
Usando controles UpdatePanel em páginas mestras
Para usar um controle UpdatePanel em um página mestra, você deve decidir como incluir o controle ScriptManager.Se você incluir o controle ScriptManager na página mestra, ele pode atuar como o controle ScriptManager de todas as páginas de conteúdo.(Se você quiser registrar declarativamente scripts ou serviços em um página de conteúdo, você pode adicionar um controle ScriptManagerProxy àquela página de conteúdo.)
Se a página mestra não contiver o controle ScriptManager, você pode colocar o controle ScriptManager individualmente em cada página de conteúdo que contenha um controle UpdatePanel.A escolha de design depende de como você pretende gerenciar script de cliente no seu aplicativo.Para obter mais informações sobre como gerenciar script de cliente, consulte ScriptManager Control Overview.Para obter mais informações sobre páginas mestras, consulte Visão Geral de Páginas Mestras ASP.NET e .
Em alguns casos, o controle ScriptManager está na página mestra e não são necessários recursos de renderização página-parcial para uma página de conteúdo.Nesses casos, você deve definir a propriedade EnablePartialRendering do controle ScriptManager para false para a página de conteúdo por meio de programação.
O exemplo a seguir mostra a marcação para um controle ScriptManager na página mestra e um controle UpdatePanel em um página de conteúdo.Nesse exemplo, uma propriedade chamada LastUpdate é definida na página mestra e é mencionada de dentro do controle UpdatePanel.
<%@ Master Language="VB" %>
<!DOCTYPE html PUBLIC "-'W3C'DTD XHTML 1.0 Transitional'EN"
"http:'www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
Public Property LastUpdate() As DateTime
Get
If ViewState("LastUpdate") Is Nothing Then
Return DateTime.Now
Else : Return ViewState("LastUpdate")
End If
End Get
Set(ByVal value As DateTime)
ViewState("LastUpdate") = value
End Set
End Property
Protected Sub MasterButton2_Click(ByVal Sender As Object, ByVal E As EventArgs)
LastUpdate = DateTime.Now
Dim up1 As UpdatePanel
up1 = ContentPlaceHolder1.FindControl("UpdatePanel1")
up1.Update()
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
ScriptManager1.RegisterAsyncPostBackControl(Button2)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>ScriptManager in Master Page Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:Panel ID="MasterPanel1" GroupingText="Master Page">
<asp:Button ID="Button1" Text="Full Page Refresh" />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="MasterButton2_Click" />
</asp:Panel>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" >
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
public DateTime LastUpdate
{
get
{
return (DateTime)(ViewState["LastUpdate"] ?? DateTime.Now);
}
set
{
ViewState["LastUpdate"] = value;
}
}
protected void MasterButton2_Click(object sender, EventArgs e)
{
LastUpdate = DateTime.Now;
((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
}
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(Button2);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>ScriptManager in Master Page Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:Panel ID="MasterPanel1" GroupingText="Master Page">
<asp:Button ID="Button1" Text="Full Page Refresh" />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="MasterButton2_Click" />
</asp:Panel>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" >
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
<%@ Page Language="VB" MasterPageFile="MasterVB.master"
Title="ScriptManager in Content Page" %>
<%@ MasterType VirtualPath="MasterVB.master" %>
<script >
Protected Sub Button3_Click(ByVal Sender As Object, ByVal E As EventArgs)
Master.LastUpdate = DateTime.Now
End Sub
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
runat="Server">
</asp:ScriptManagerProxy>
<asp:Panel ID="Panel2"
GroupingText="ContentPage"
>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<p>
Last updated: <strong>
<%= Master.LastUpdate.ToString() %>
</strong>
</p>
<asp:Button ID="Button3"
Text="Refresh Panel"
OnClick="Button3_Click"
/>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</asp:Content>
<%@ Page Language="C#" MasterPageFile="MasterCS.master"
Title="ScriptManager in Content Page" %>
<%@ MasterType VirtualPath="MasterCS.master" %>
<script >
protected void Button3_Click(object sender, EventArgs e)
{
Master.LastUpdate = DateTime.Now;
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
runat="Server">
<asp:Panel ID="Panel2"
GroupingText="ContentPage"
>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<p>
Last updated: <strong>
<%= Master.LastUpdate.ToString() %>
</strong>
</p>
<asp:Button ID="Button3"
Text="Refresh Panel"
OnClick="Button3_Click"
/>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</asp:Content>
Usando controles aninhados UpdatePanel
Controles UpdatePanel podem ser aninhados.Se o painel pai for atualizado, todos os painéis aninhados são atualizados também.
O exemplo a seguir mostra a marcação que define um controle UpdatePanel dentro de outro controle UpdatePanel.Um botão no painel de pai dá início a uma atualização do conteúdo nos painéis pai e filho.Botão no painel de filho dá início a uma atualização do painel filho somente.
<%@ 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 id="Head1" >
<title>UpdatePanelUpdateMode Example</title>
<style type="text/css">
div.NestedPanel
{
position: relative;
margin: 2% 5% 2% 5%;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="OuterPanel"
UpdateMode="Conditional"
>
<ContentTemplate>
<div>
<fieldset>
<legend>Outer Panel </legend>
<br />
<asp:Button ID="OPButton1"
Text="Outer Panel Button"
/>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="NestedPanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<div class="NestedPanel">
<fieldset>
<legend>Nested Panel 1</legend>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="NPButton1"
Text="Nested Panel 1 Button"
/>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</div>
</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 >
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>UpdatePanelUpdateMode Example</title>
<style type="text/css">
div.NestedPanel
{
position: relative;
margin: 2% 5% 2% 5%;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="OuterPanel"
UpdateMode="Conditional"
>
<ContentTemplate>
<div>
<fieldset>
<legend>Outer Panel </legend>
<br />
<asp:Button ID="OPButton1"
Text="Outer Panel Button"
/>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="NestedPanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<div class="NestedPanel">
<fieldset>
<legend>Nested Panel 1</legend>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="NPButton1"
Text="Nested Panel 1 Button"
/>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
O exemplo a seguir mostra um controle UpdatePanel aninhado com um controle GridView.O controle GridView está dentro de um controle UpdatePanel, e cada linha GridView contém um controle GridView aninhado dentro de outro controle UpdatePanel.
<%@ Page Language="VB" %>
<!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 >
<title>Browse Departments</title>
<script >
Protected Sub DepartmentsGridView_RowDataBound(sender As object, e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim s As SqlDataSource = CType(e.Row.FindControl("EmployeesDataSource"), SqlDataSource)
Dim r As System.Data.DataRowView = CType(e.Row.DataItem, System.Data.DataRowView)
s.SelectParameters("DepartmentID").DefaultValue = r("DepartmentID").ToString()
End If
End Sub
</script>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="DepartmentsGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CellPadding="4" DataSourceID="DepartmentDataSource"
ForeColor="#333333" GridLines="None" PageSize="3" OnRowDataBound="DepartmentsGridView_RowDataBound">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField DataField="GroupName" HeaderText="Division" SortExpression="GroupName" >
<ItemStyle Width="200px" />
</asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Department Name" SortExpression="Name" >
<ItemStyle Width="160px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Employees">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="None"
BorderWidth="1px" CellPadding="3" DataSourceID="EmployeesDataSource" GridLines="Vertical"
PageSize="4">
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" >
<ItemStyle Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" >
<ItemStyle Width="160px" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="Gainsboro" />
</asp:GridView>
<asp:Label ID="InnerTimeLabel"><%=DateTime.Now %></asp:Label>
<asp:SqlDataSource ID="EmployeesDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT HumanResources.EmployeeDepartmentHistory.DepartmentID,
HumanResources.vEmployee.EmployeeID,
HumanResources.vEmployee.FirstName,
HumanResources.vEmployee.LastName
FROM HumanResources.EmployeeDepartmentHistory
INNER JOIN HumanResources.vEmployee
ON HumanResources.EmployeeDepartmentHistory.EmployeeID = HumanResources.vEmployee.EmployeeID
WHERE HumanResources.EmployeeDepartmentHistory.DepartmentID = @DepartmentID
ORDER BY HumanResources.vEmployee.LastName ASC, HumanResources.vEmployee.FirstName ASC">
<SelectParameters>
<asp:Parameter Name="DepartmentID" DefaultValue="0" Type="int32" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<ItemStyle Height="170px" Width="260px" />
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" VerticalAlign="Top" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" VerticalAlign="Top" />
</asp:GridView>
<asp:Label ID="OuterTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="DepartmentDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT DepartmentID, Name, GroupName FROM HumanResources.Department ORDER BY Name">
</asp:SqlDataSource>
</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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Browse Departments</title>
<script >
protected void DepartmentsGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
SqlDataSource s = (SqlDataSource)e.Row.FindControl("EmployeesDataSource");
System.Data.DataRowView r = (System.Data.DataRowView)e.Row.DataItem;
s.SelectParameters["DepartmentID"].DefaultValue = r["DepartmentID"].ToString();
}
}
</script>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="DepartmentsGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CellPadding="4" DataSourceID="DepartmentDataSource"
ForeColor="#333333" GridLines="None" PageSize="3" OnRowDataBound="DepartmentsGridView_RowDataBound">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField DataField="GroupName" HeaderText="Division" SortExpression="GroupName" >
<ItemStyle Width="200px" />
</asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Department Name" SortExpression="Name" >
<ItemStyle Width="160px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Employees">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="None"
BorderWidth="1px" CellPadding="3" DataSourceID="EmployeesDataSource" GridLines="Vertical"
PageSize="4">
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" >
<ItemStyle Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" >
<ItemStyle Width="160px" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="Gainsboro" />
</asp:GridView>
<asp:Label ID="InnerTimeLabel"><%=DateTime.Now %></asp:Label>
<asp:SqlDataSource ID="EmployeesDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT HumanResources.EmployeeDepartmentHistory.DepartmentID,
HumanResources.vEmployee.EmployeeID,
HumanResources.vEmployee.FirstName,
HumanResources.vEmployee.LastName
FROM HumanResources.EmployeeDepartmentHistory
INNER JOIN HumanResources.vEmployee
ON HumanResources.EmployeeDepartmentHistory.EmployeeID = HumanResources.vEmployee.EmployeeID
WHERE HumanResources.EmployeeDepartmentHistory.DepartmentID = @DepartmentID
ORDER BY HumanResources.vEmployee.LastName ASC, HumanResources.vEmployee.FirstName ASC">
<SelectParameters>
<asp:Parameter Name="DepartmentID" DefaultValue="0" Type="int32" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<ItemStyle Height="170px" Width="260px" />
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" VerticalAlign="Top" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" VerticalAlign="Top" />
</asp:GridView>
<asp:Label ID="OuterTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="DepartmentDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT DepartmentID, Name, GroupName FROM HumanResources.Department ORDER BY Name">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Quando um controle GridView interno exibe uma nova página de registros, o painel externo e os painéis nas outras linhas do controle GridView externo não são atualizados.Quando o controle GridView externo exibe uma nova página de registros, o painel externo e os painéis aninhados são todos atualizados.
Atualizando um UpdatePanel de forma programática
O exemplo a seguir mostra como atualizar um controle UpdatePanel programaticamente.Nesse exemplo, uma página registra um controle como um disparador chamando o método RegisterAsyncPostBackControl.O código atualiza o controle UpdatePanel programaticamente chamando o método Update.
<%@ 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 Property AnsweredQuestions As SortedList
Get
If ViewState("AnsweredQuestions") IsNot Nothing Then
Return CType(ViewState("AnsweredQuestions"), SortedList)
Else
Return New SortedList()
End If
End Get
Set
ViewState("AnsweredQuestions") = value
End Set
End Property
Protected Sub Page_Load()
ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList)
End Sub
Protected Sub ChoicesRadioButtonList_SelectedIndexChanged(sender As Object, e As EventArgs)
Dim answers As SortedList = Me.AnsweredQuestions
Dim r As RadioButtonList = CType(sender, RadioButtonList)
answers(r.ToolTip) = r.SelectedValue
Me.AnsweredQuestions = answers
ResultsList.DataSource = Me.AnsweredQuestions
ResultsList.DataBind()
If Me.AnsweredQuestions.Count = SurveyDataList.Items.Count Then _
SubmitButton.Visible = True
UpdatePanel1.Update()
End Sub
Protected Sub SubmitButton_Click(sender As Object, e As EventArgs)
' Submit responses.
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Registering Controls as Async Postback Controls</title>
<style type="text/css">
.AnswerFloatPanelStyle {
background-color: bisque;
position: absolute;
right: 10px;
height: 130px;
width: 150px;
border-right: silver thin solid; border-top: silver thin solid;
border-left: silver thin solid; border-bottom: silver thin solid;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<div id="AnswerFloatPanel" class="AnswerFloatPanelStyle" >
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
Completed Questions:
<asp:DataList ID="ResultsList" >
<ItemTemplate>
<asp:Label ID="ResultQuestion" Text='<%# Eval("Key") %>' />
::
<asp:Label ID="ResultAnswer" Text='<%# Eval("Value") %>' />
</ItemTemplate>
</asp:DataList>
<p style="text-align: right">
<asp:Button ID="SubmitButton" Text="Submit" Visible="false"
OnClick="SubmitButton_Click" />
</p>
<asp:Label ID="Message" runat="Server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:XmlDataSource ID="SurveyDataSource"
XPath="/Questions/Question"
DataFile="~/App_Data/SurveyQuestions.xml"/>
<asp:DataList
ID="SurveyDataList"
DataSourceID="SurveyDataSource"
>
<ItemTemplate>
<table cellpadding="2" cellspacing="2">
<tr>
<td valign="top">
<asp:Label id="QuestionLabel" Text='<%# XPath("@Title")%>' />
</td>
</tr>
<tr><td>
<asp:RadioButtonList ID="ChoicesRadioButtonList"
DataSource='<%#XPathSelect("Choices/Choice") %>'
DataTextField="InnerText" DataValueField="InnerText"
AutoPostBack="True"
ToolTip='<%# "Question" + XPath("@ID") %>'
OnSelectedIndexChanged="ChoicesRadioButtonList_SelectedIndexChanged"/>
</td></tr>
</table>
<hr />
</ItemTemplate>
</asp:DataList>
</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 SortedList AnsweredQuestions
{
get { return (SortedList)(ViewState["AnsweredQuestions"] ?? new SortedList()); }
set { ViewState["AnsweredQuestions"] = value; }
}
protected void Page_Load()
{
ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList);
}
protected void ChoicesRadioButtonList_SelectedIndexChanged(object sender, EventArgs e)
{
SortedList answers = this.AnsweredQuestions;
RadioButtonList r = (RadioButtonList)sender;
answers[r.ToolTip] = r.SelectedValue;
this.AnsweredQuestions = answers;
ResultsList.DataSource = this.AnsweredQuestions;
ResultsList.DataBind();
if (this.AnsweredQuestions.Count == SurveyDataList.Items.Count)
SubmitButton.Visible = true;
UpdatePanel1.Update();
}
protected void SubmitButton_Click(object sender, EventArgs e)
{
// Submit responses.
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Registering Controls as Async Postback Controls</title>
<style type="text/css">
.AnswerFloatPanelStyle {
background-color: bisque;
position: absolute;
right: 10px;
height: 130px;
width: 150px;
border-right: silver thin solid; border-top: silver thin solid;
border-left: silver thin solid; border-bottom: silver thin solid;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<div id="AnswerFloatPanel" class="AnswerFloatPanelStyle" >
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
Completed Questions:
<asp:DataList ID="ResultsList" >
<ItemTemplate>
<asp:Label ID="ResultQuestion" Text='<%# Eval("Key") %>' />
::
<asp:Label ID="ResultAnswer" Text='<%# Eval("Value") %>' />
</ItemTemplate>
</asp:DataList>
<p style="text-align: right">
<asp:Button ID="SubmitButton" Text="Submit" Visible="false"
OnClick="SubmitButton_Click" />
</p>
<asp:Label ID="Message" runat="Server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:XmlDataSource ID="SurveyDataSource"
XPath="/Questions/Question"
DataFile="~/App_Data/SurveyQuestions.xml"/>
<asp:DataList
ID="SurveyDataList"
DataSourceID="SurveyDataSource"
>
<ItemTemplate>
<table cellpadding="2" cellspacing="2">
<tr>
<td valign="top">
<asp:Label id="QuestionLabel" Text='<%# XPath("@Title")%>' />
</td>
</tr>
<tr><td>
<asp:RadioButtonList ID="ChoicesRadioButtonList"
DataSource='<%#XPathSelect("Choices/Choice") %>'
DataTextField="InnerText" DataValueField="InnerText"
AutoPostBack="True"
ToolTip='<%# "Question" + XPath("@ID") %>'
OnSelectedIndexChanged="ChoicesRadioButtonList_SelectedIndexChanged"/>
</td></tr>
</table>
<hr />
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
Criando controles UpdatePanel de forma programática
Para adicionar um controle UpdatePanel em uma página por meio de programação, você cria uma nova instância do controle UpdatePanel.Em seguida, você adicionar controles a ela usando a propriedade ContentTemplateContainer e o método ControlCollection.Add.Não adicione controles diretamente na propriedade ContentTemplate.
Quando um controle UpdatePanel é adicionado por meio de programação, apenas postagens que sejam de controles no mesmo contêiner de nomeação, como o controle UpdatePanel, podem ser usadas como disparadores para o painel.
O exemplo a seguir mostra como adicionar um controle UpdatePanel programaticamente a uma página.O exemplo adiciona um Label e um controle Button para o painel usando a propriedade ContentTemplateContainer.Como a propriedade ChildrenAsTriggers é true por padrão, o controle Button atua como um disparador para o painel.
<%@ 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 Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
Dim up1 As UpdatePanel
up1 = New UpdatePanel()
up1.ID = "UpdatePanel1"
up1.UpdateMode = UpdatePanelUpdateMode.Conditional
Dim button1 As Button
button1 = New Button()
button1.ID = "Button1"
button1.Text = "Submit"
AddHandler button1.Click, AddressOf Button_Click
Dim label1 As Label
label1 = New Label()
label1.ID = "Label1"
label1.Text = "A full page postback occurred."
up1.ContentTemplateContainer.Controls.Add(button1)
up1.ContentTemplateContainer.Controls.Add(label1)
Page.Form.Controls.Add(up1)
End Sub
Protected Sub Button_Click(ByVal Sender As Object, ByVal E As EventArgs)
Dim lbl As Label
lbl = Page.FindControl("Label1")
lbl.Text = "Panel refreshed at " & _
DateTime.Now.ToString()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="TheScriptManager"
/>
</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 Page_Load(object sender, EventArgs e)
{
UpdatePanel up1 = new UpdatePanel();
up1.ID = "UpdatePanel1";
up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
Button button1 = new Button();
button1.ID = "Button1";
button1.Text = "Submit";
button1.Click += new EventHandler(Button_Click);
Label label1 = new Label();
label1.ID = "Label1";
label1.Text = "A full page postback occurred.";
up1.ContentTemplateContainer.Controls.Add(button1);
up1.ContentTemplateContainer.Controls.Add(label1);
Page.Form.Controls.Add(up1);
}
protected void Button_Click(object sender, EventArgs e)
{
((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +
DateTime.Now.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="TheScriptManager"
/>
</div>
</form>
</body>
</html>
Controles que são não compatíveis com controles UpdatePanel
Os seguintes controles do ASP.NET não são compatíveis com atualizações página-parcial e, portanto, não são projetados para funcionar em um controle UpdatePanel:
Controle TreeView sob diversas condições.Uma é quando estão ativados retornos de chamada que não são parte de uma postagem assíncrono.Outro é quando você define estilos diretamente como propriedades de controle, em vez de definir implicitamente o estilo de controle usando uma referência a estilos de folhas de estilo em cascata.Outra é quando a propriedade EnableClientScript é false (o padrão é true).Outra é se você alterar o valor da propriedade EnableClientScript entre postagens assíncronas.Para obter mais informações, consulte Visão geral do Controle do Servidor Web TreeView.
Controle Menu quando você define estilos diretamente como propriedades de controle, em vez de definir implicitamente o estilo de controle usando uma referência a estilos de folhas de estilo em cascata.Para obter mais informações, consulte Visão Geral do Controle de Menu.
Controles FileUpload e HtmlInputFile quando eles são usados para carregar arquivos como parte de uma postagem assíncrona.
Controles GridView e DetailsView quando suas propriedades EnableSortingAndPagingCallbacks é definida como true.O padrão é false.
Controles Login, PasswordRecovery, ChangePassword e CreateUserWizard cujos conteúdos não foram convertidos em modelos editáveis.
O controle Substitution.
Para usar um controle FileUpload ou HtmlInputFile dentro de um controle UpdatePanel, defina o controle de postagem que envia o arquivo para ser um controle PostBackTrigger para o painel.Os controles FileUpload e HtmlInputFile podem ser usados apenas em cenários de postagem.
Todos os outros controles funcionam dentro de controles UpdatePanel.No entanto, em algumas circunstâncias, um controle pode não funcionar como esperado em um controle UpdatePanel.Essas circunstâncias incluem o seguinte:
Registrar script chamando métodos de inscrição do controle ClientScriptManager.
Processar script ou marcação diretamente durante o processamento de controle, como chamar o método Write.
Se o controle chama métodos de inscrição de script do controle ClientScriptManager, talvez seja possível usar métodos de registro de script correspondentes do controle ScriptManager em vez disso.Nesse caso, o controle pode funcionar em um controle UpdatePanel.
Usando controles Web Parts dentro de controles UpdatePanel
Web Parts do ASP.NET é um conjunto integrado de controles para criar sites da Web que permitem aos usuários finais modificar o conteúdo, aparência e comportamento de páginas Web diretamente de um navegador.Você pode usar controles de Web Parts dentro de controles UpdatePanel com as seguintes restrições:
Cada controle WebPartZone deverá estar dentro o mesmo controle UpdatePanel.Por exemplo, você não pode ter dois controles UpdatePanel na página, cada qual com seu próprio controle WebPartZone.
O controle WebPartManager gerencia todas as informações do estado de cliente para controles Web Part.Ele deve estar no controle UpdatePanel mais externo em uma página.
Você não pode importar ou exportar controles de Web Parts usando uma postagem assíncrona.(Executar essa tarefa requer um controle FileUpload, que não pode ser usado com postagens assíncronas). Por padrão, importar controles de Web Parts executa uma postagem completa.
Você não é possível adicionar ou modificar os estilos de controles de Web Parts durante postagens assíncronas.
Para obter mais informações sobre controles de Web Parts, consulte Visão geral sobre Web Parts do ASP.NET.
Propriedades e métodos não suportados durante postagens assíncronas
Não há suporte para os cenários a seguir para definir o botão de postback padrão em uma página durante postbacks assíncrono:
Alteração do DefaultButton programaticamente durante uma postagem assíncrona.
Alteração do DefaultButton programaticamente durante uma postagem assíncrona quando o Panel controle não está dentro de um controle UpdatePanel controle.
Há suporte para apenas em cenários de postagem e não em cenários de postagens assíncronas dos seguintes métodos da classe HttpResponse:
Exemplos de código
As seções a seguir incluem exemplos que mostram como criar e usar controles UpdatePanel.
Tópicos de demonstração e explicação passo a passo
Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls
Usando o controle ASP.NET UpdatePanel com controles associado a dados
Usando o controle ASP.NET UpdatePanel com controles de usuário
Personalizando a Manipulação de Erro para o Controle UpdatePanel do ASP.NET
Demonstra Passo a passo: Animar controles UpdatePanel do ASP.NET
Referência de Classe
As principais classes do servidor para controles UpdatePanel são mostradas na tabela a seguir.
Classe |
Descrição |
|---|---|
Um controle de servidor que especifica as partes de uma página da Web que podem participar em atualizações página-parciais. |
|
Um controle de servidor que gerencia processamento página-parcial.O controle ScriptManager registra componentes de script para enviar para o navegador.Ela sobrescreve processamento de página de modo que somente regiões especificadas da página sejam processadas. |
|
Um controle de servidor que permite componentes aninhados (como páginas de conteúdo ou controles de usuário) para adicionar um script e referências de serviço da Web.Esse controle é útil se o elemento pai já contém um controle ScriptManager. |
|
Uma classe na caixa Microsoft AJAX Library que coordena processamento página-parcial no navegador.A classe PageRequestManager troca informações com o servidor de forma assíncrona e expõe eventos e métodos para desenvolvimento personalizado de script de cliente. |
Additional Topics
Visão Geral do Ciclo de Vida da Página ASP.NET
Consulte também
Tarefas
Introdução ao Controle UpdatePanel
Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls
Conceitos
UpdateProgress Control Overview