Visão geral de renderização de página parcial
A renderização parcial da página remove a necessidade de a página toda ser atualizada como o resultado de um postback.Ao invés, apenas regiões individuais da página, as quais mudaram, são atualizadas.Como resultado disso, usuários não veem a página inteira recarregar com todo postback, o que faz a interação do usuário com a Web page mais integrada.ASP.NET lhe permite adicionar renderização parcial de página para Web pages ASP.NET novas ou existentes sem escrever scripts de cliente.
Este tópico contém as seções a seguir:
Cenários
Recursos
Segundo plano
Exemplos de código
Referência de Classe
Cenários
Você pode estender aplicativos ASP.NET e desenvolver novos aplicativos que incorporam funcionalidades AJAX (Asynchronous JavaScript and XML).Use recursos AJAX quando você quiser fazer o seguinte:
Melhorar a experiência do usuário com Web pages que sejam mais ricas, que respondam mais a ações do usuário e que se comportem como aplicativos cliente tradicionais.
Reduzir atualizações da página toda e evitar tremulação de página.
Habilitar compatibilidade de navegador cruzado com escrita de script de cliente.
Efetuar comunicação cliente/servidor estilo AJAX sem escrever script de cliente.
Usar controles e componentes do Kit de ferramentas de controle ASP.NET AJAX.
Desenvolver controles ASP.NET AJAX customizados.
Recursos de renderização parcial da página
A renderização parcial da página confia nos controles de servidor em ASP.NET e nas funções de cliente em Microsoft AJAX Library.Você não precisa usar Microsoft AJAX Library para habilitar a renderização parcial de página, porque esta funcionalidade é fornecida automaticamente quando você usa os controles de servidor ASP.NET AJAX.No entanto, você pode usar as APIs expostas na biblioteca cliente para funcionalidade AJAX adicional.
Os recursos primários dos ASP.NET que suportam renderização parcial da página são:
Um modelo declarativo que trabalha como controles de servidor ASP.NET.Em vários cenários, você pode especificar a renderização parcial da página usando apenas marcação declarativa.
Controles de servidor que efetuam tarefas implícitas requisitadas para atualizações de página parcial.Elas incluem o controle ScriptManager e o controle UpdatePanel.
Integração entre controles de servidor ASP.NET AJAX e as Microsoft AJAX Library para tarefas comuns.Estas tarefas incluem habilitar aos usuários cancelar um postback, mostrar mensagens customizadas de progresso durante um postback assíncrono, e determinar quão concorrentes postbacks assíncronos são processados.
Opções de tratamento de erros para renderização parcial da página, as quais permitem que você customize como os erros são exibidos no navegador.
Compatibilidade entre navegador, que está incorporada à funcionalidade AJAX do ASP.NET.Simplesmente usar os controles do servidor automaticamente invoca a funcionalidade do navegador correto.
Segundo plano
Web pages típicas criadas com controles de servidor Web do ASP.NET realizam postbacks iniciados por uma ação do usuário na página, como o clique de um botão.Em resposta, o servidor devolve uma página nova.Frequentemente esta redevolve controles e texto que não mudaram entre postbacks.
Com renderização parcial da página, você pode atualizar regiões individuais da página assincronamente e tornar a página mais interativa ao usuário.Você pode implementar renderização parcial da página usando controles de servidor Web ASP.NET AJAX, e opcionalmente escrever script de cliente que usa as APIs em Microsoft AJAX Library.
Controles de servidor para atualizações de página parcial.
Para adicionar funcionalidade AJAX a Web pages ASP.NET, você identifica seções individuais da página que queira atualizar.Então você põe o conteúdo dessas seções nos controles UpdatePanel.Os conteúdos de um controle UpdatePanel podem ser HTML ou outros controles ASP.NET.Você pode adicionar um controle UpdatePanel para a página como se fosse qualquer outro controle.Por exemplo, no Visual Studio você pode arrastá-lo da caixa de ferramentas para a Web page, ou você pode adicioná-lo usando marcação declarativa na página.O seguinte exemplo mostra a marcação para um controle UpdatePanel.
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<!-- Place updatable markup and controls here. -->
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<!-- Place updatable markup and controls here. -->
</ContentTemplate>
</asp:UpdatePanel>
Por padrão, postbacks que originam de controles dentro do painel de atualização (controles filho) automaticamente iniciam postbacks assíncronos e causam uma atualização de página parcial.Você também pode especificar que controles fora do painel de atualização causem um postback assíncrono e que eles atualizem o conteúdo dos controles UpdatePanel.Um controle que causa um postback assíncrono é referido como um disparador.Para obter mais informações sobre disparadores, consulte Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls.
Um postback assíncrono comporta-se muito como um postback síncrono.Todos os eventos de ciclo de vida da página de servidor ocorrem, e estado de exibição e dados de formulário são preservados.No entanto, na fase de renderização, apenas os conteúdos do controle UpdatePanel são enviados ao navegador.O resto da página permanece inalterado.
Para suportar renderização parcial da página, você deve pôr um controle ScriptManager na página.O controle ScriptManager mantém um caminho de todos os painéis de atualização na página e dos seus disparadores.Ele coordena o procedimento da renderização parcial da página no servidor, e determina quais seções da página a devolver como um resultado de um postback assíncrono.
O seguinte exemplo mostra um controle UpdatePanel cujo conteúdo é atualizado sempre que um postback é originado de dentro do 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 >
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Partial-Page Rendering Server-Side Syntax</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
Content to update incrementally without a full
page refresh.
<br />
Last update: <%=DateTime.Now.ToString() %>
<br />
<asp:Calendar ID="Calendar" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
</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>Partial-Page Rendering Server-Side Syntax</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
Content to update incrementally without a full
page refresh.
<br />
Last update: <%=DateTime.Now.ToString() %>
<br />
<asp:Calendar ID="Calendar" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
</div>
</form>
</body>
</html>
Para mais exemplo de como usar controles UpdatePanel para habilitar a renderização parcial da página, consulte os tópicos listados na seção Exemplo de código.
Usando Script de cliente para Atualizações de página parcial
A classe ECMAScript (JavaScript) PageRequestManager na Microsoft AJAX Library suporta atualizações de página parcial.Ela executa no navegador para gerenciar as respostas a postbacks assíncronos e para atualizar conteúdo em regiões individuais.Você não precisa fazer nada para habilitar esta funcionalidade.Ela ocorre automaticamente quando você adiciona um ou mais controles UpdatePanel e um controle ScriptManager à página.
Você também pode usar JavaScript e a classe PageRequestManager para personalizar atualizações de página parcial em uma página.Por exemplo, você pode escrever script para dar precedência a um postback assíncrono específico se mais de um estiver em operação.Você também pode habilitar os usuários a cancelar postbacks que estejam em progresso.
O seguinte exemplo mostra script de cliente que fornece um manipulador de eventos que é chamado quando a página termina de carregar.
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
Para mais informações sobre como usar Microsoft AJAX Library para renderização parcial da página, consulte Trabalhando com eventos PageRequestManager e Visão geral da classe ASP.NET PageRequestManager.
Habilitando suporte para renderização parcial da página
Você habilita ou desabilita a renderização parcial da página para uma página definindo a propriedade EnablePartialRendering do controle ScriptManager.Você também pode especificar se a renderização parcial da página é suportada para uma página definindo a propriedade SupportsPartialRendering do controle ScriptManager.Se você não definir a propriedade SupportsPartialRendering e se a propriedade EnablePartialRendering está true (que é o padrão), a capacidade do navegador é utilizada para determinar se a renderização parcial da página é suportada.
Se a renderização parcial da página não está habilitada para uma página, se foi desabilitada, ou se não é suportada no navegador, a página utiliza procedimento de recuo.Ações que ordinariamente efetuariam um postback assíncrono, ao invés, efetuam um postback síncrono e atualizar a página toda.Quaisquer controles UpdatePanel na página são ignorados, e seus conteúdos são devolvidos como se eles não estivessem dentro de um controle UpdatePanel.
.gif "Observação") Observação: |
|---|
Web pages ASP.NET que estão configuradas para renderização de herança não suportam funcionalidades AJAX.Para obter mais informações, consulte O ASP.NET e o XHTML. |
Exemplos de código
O seguinte exemplo mostra a renderização parcial da página em ação.Há dois controles UpdatePanel.Um controle toma a entrada do usuário e outro mostra um resumo da entrada.
<%@ Page Language="VB" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!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 id="Head1" >
<title>Enter New Employees</title>
<script >
Private EmployeeList As List(Of Employee)
Protected Sub Page_Load()
If Not IsPostBack Then
EmployeeList = New List(Of Employee)
EmployeeList.Add(New Employee(1, "Jump", "Dan"))
EmployeeList.Add(New Employee(2, "Kirwan", "Yvette"))
ViewState("EmployeeList") = EmployeeList
Else
EmployeeList = CType(ViewState("EmployeeList"), List(Of Employee))
End If
EmployeesGridView.DataSource = EmployeeList
EmployeesGridView.DataBind()
End Sub
Protected Sub InsertButton_Click(ByVal sender As Object, ByVal e As EventArgs)
If String.IsNullOrEmpty(FirstNameTextBox.Text) Or _
String.IsNullOrEmpty(LastNameTextBox.Text) Then Return
Dim employeeID As Integer = EmployeeList(EmployeeList.Count - 1).EmployeeID + 1
Dim lastName As String = Server.HtmlEncode(FirstNameTextBox.Text)
Dim firstName As String = Server.HtmlEncode(LastNameTextBox.Text)
FirstNameTextBox.Text = String.Empty
LastNameTextBox.Text = String.Empty
EmployeeList.Add(New Employee(employeeID, lastName, firstName))
ViewState("EmployeeList") = EmployeeList
EmployeesGridView.DataBind()
EmployeesGridView.PageIndex = EmployeesGridView.PageCount
End Sub
Protected Sub CancelButton_Click(ByVal sender As Object, ByVal e As EventArgs)
FirstNameTextBox.Text = String.Empty
LastNameTextBox.Text = String.Empty
End Sub
<Serializable()> _
Public Class Employee
Private _employeeID As Integer
Private _lastName As String
Private _firstName As String
Public ReadOnly Property EmployeeID() As Integer
Get
Return _employeeID
End Get
End Property
Public ReadOnly Property LastName() As String
Get
Return _lastName
End Get
End Property
Public ReadOnly Property FirstName() As String
Get
Return _firstName
End Get
End Property
Public Sub New(ByVal employeeID As Integer, ByVal lastName As String, ByVal firstName As String)
_employeeID = employeeID
_lastName = lastName
_firstName = firstName
End Sub
End Class
</script>
</head>
<body>
<form id="form1" >
<div>
</div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<table>
<tr>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="InsertEmployeeUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="2" border="0" style="background-color:#7C6F57">
<tr>
<td><asp:Label ID="FirstNameLabel" AssociatedControlID="FirstNameTextBox"
Text="First Name" ForeColor="White" /></td>
<td><asp:TextBox ID="FirstNameTextBox" /></td>
</tr>
<tr>
<td><asp:Label ID="LastNameLabel" AssociatedControlID="LastNameTextBox"
Text="Last Name" ForeColor="White" /></td>
<td><asp:TextBox ID="LastNameTextBox" /></td>
</tr>
<tr>
<td></td>
<td>
<asp:LinkButton ID="InsertButton" Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />
<asp:LinkButton ID="Cancelbutton" Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />
</td>
</tr>
</table>
<asp:Label ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="EmployeesUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" BackColor="LightGoldenrodYellow" BorderColor="Tan"
BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">
<FooterStyle BackColor="Tan" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" />
</Columns>
<PagerSettings PageButtonCount="5" />
</asp:GridView>
<asp:Label ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!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>Enter New Employees</title>
<script >
private List<Employee> EmployeeList;
protected void Page_Load()
{
if (!IsPostBack)
{
EmployeeList = new List<Employee>();
EmployeeList.Add(new Employee(1, "Jump", "Dan"));
EmployeeList.Add(new Employee(2, "Kirwan", "Yvette"));
ViewState["EmployeeList"] = EmployeeList;
}
else
EmployeeList = (List<Employee>)ViewState["EmployeeList"];
EmployeesGridView.DataSource = EmployeeList;
EmployeesGridView.DataBind();
}
protected void InsertButton_Click(object sender, EventArgs e)
{
if (String.IsNullOrEmpty(FirstNameTextBox.Text) ||
String.IsNullOrEmpty(LastNameTextBox.Text)) { return; }
int employeeID = EmployeeList[EmployeeList.Count-1].EmployeeID + 1;
string lastName = Server.HtmlEncode(FirstNameTextBox.Text);
string firstName = Server.HtmlEncode(LastNameTextBox.Text);
FirstNameTextBox.Text = String.Empty;
LastNameTextBox.Text = String.Empty;
EmployeeList.Add(new Employee(employeeID, lastName, firstName));
ViewState["EmployeeList"] = EmployeeList;
EmployeesGridView.DataBind();
EmployeesGridView.PageIndex = EmployeesGridView.PageCount;
}
protected void CancelButton_Click(object sender, EventArgs e)
{
FirstNameTextBox.Text = String.Empty;
LastNameTextBox.Text = String.Empty;
}
[Serializable]
public class Employee
{
private int _employeeID;
private string _lastName;
private string _firstName;
public int EmployeeID
{
get { return _employeeID; }
}
public string LastName
{
get { return _lastName; }
}
public string FirstName
{
get { return _firstName; }
}
public Employee(int employeeID, string lastName, string firstName)
{
_employeeID = employeeID;
_lastName = lastName;
_firstName = firstName;
}
}
</script>
</head>
<body>
<form id="form1" >
<div>
</div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<table>
<tr>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="InsertEmployeeUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="2" border="0" style="background-color:#7C6F57">
<tr>
<td><asp:Label ID="FirstNameLabel" AssociatedControlID="FirstNameTextBox"
Text="First Name" ForeColor="White" /></td>
<td><asp:TextBox ID="FirstNameTextBox" /></td>
</tr>
<tr>
<td><asp:Label ID="LastNameLabel" AssociatedControlID="LastNameTextBox"
Text="Last Name" ForeColor="White" /></td>
<td><asp:TextBox ID="LastNameTextBox" /></td>
</tr>
<tr>
<td></td>
<td>
<asp:LinkButton ID="InsertButton" Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />
<asp:LinkButton ID="Cancelbutton" Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />
</td>
</tr>
</table>
<asp:Label ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="EmployeesUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" BackColor="LightGoldenrodYellow" BorderColor="Tan"
BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">
<FooterStyle BackColor="Tan" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" />
</Columns>
<PagerSettings PageButtonCount="5" />
</asp:GridView>
<asp:Label ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</form>
</body>
</html>
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
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
A seguinte tabela lista as classes de servidor chaves para a renderização parcial da página.
Classe |
Descrição |
|---|---|
Regiões específicas da página a serem atualizadas durante a renderização parcial da página. |
|
Gerencia componentes AJAX em ASP.NET, renderização parcial da página, requisições de cliente e respostas de servidor nas Web pages ASP.NET. |
|
Habilita componentes aninhadas a adicionar script e referências de serviço às páginas que já contêm um controle ScriptManager em um elemento pai. |
A seguinte tabela lista as classes de cliente chaves para a renderização parcial da página.
Classe |
Descrição |
|---|---|
Gerencia a renderização parcial de página de cliente e expõe membros para scripting de cliente personalizado. |