En los ejemplos siguientes, se muestran distintos usos del control UpdatePanel.
Controles dentro de un control UpdatePanel
En el ejemplo siguiente, se muestra la colocación de los controles dentro de un control UpdatePanel para reducir el parpadeo de la pantalla al exponer en el servidor. En este ejemplo, los controles Calendar y DropDownList están dentro de un control UpdatePanel. De forma predeterminada, el valor de la propiedad UpdateMode es Always y el de la propiedad ChildrenAsTriggers es true. Por consiguiente, los controles secundarios del panel provocan una devolución de datos asincrónica.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Sub DropDownSelection_Change(ByVal Sender As Object, ByVal E As EventArgs)
Calendar1.DayStyle.BackColor = _
System.Drawing.Color.FromName(ColorList.SelectedItem.Value)
End Sub
Protected Sub Calendar1_SelectionChanged(ByVal Sender As Object, ByVal E As EventArgs)
SelectedDate.Text = Calendar1.SelectedDate.ToString()
End Sub
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1"
ShowTitle="True"
OnSelectionChanged="Calendar1_SelectionChanged"
runat="server" />
<div>
Background:
<br />
<asp:DropDownList ID="ColorList"
AutoPostBack="True"
OnSelectedIndexChanged="DropDownSelection_Change"
runat="server">
<asp:ListItem Selected="True" Value="White">
White </asp:ListItem>
<asp:ListItem Value="Silver">
Silver </asp:ListItem>
<asp:ListItem Value="DarkGray">
Dark Gray </asp:ListItem>
<asp:ListItem Value="Khaki">
Khaki </asp:ListItem>
<asp:ListItem Value="DarkKhaki"> D
ark Khaki </asp:ListItem>
</asp:DropDownList>
</div>
<br />
Selected date:
<asp:Label ID="SelectedDate"
runat="server">None.</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<br />
</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 runat="server">
void DropDownSelection_Change(Object sender, EventArgs e)
{
Calendar1.DayStyle.BackColor =
System.Drawing.Color.FromName(ColorList.SelectedItem.Value);
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
SelectedDate.Text =
Calendar1.SelectedDate.ToString();
}
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1"
ShowTitle="True"
OnSelectionChanged="Calendar1_SelectionChanged"
runat="server" />
<div>
Background:
<br />
<asp:DropDownList ID="ColorList"
AutoPostBack="True"
OnSelectedIndexChanged="DropDownSelection_Change"
runat="server">
<asp:ListItem Selected="True" Value="White">
White </asp:ListItem>
<asp:ListItem Value="Silver">
Silver </asp:ListItem>
<asp:ListItem Value="DarkGray">
Dark Gray </asp:ListItem>
<asp:ListItem Value="Khaki">
Khaki </asp:ListItem>
<asp:ListItem Value="DarkKhaki"> D
ark Khaki </asp:ListItem>
</asp:DropDownList>
</div>
<br />
Selected date:
<asp:Label ID="SelectedDate"
runat="server">None.</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<br />
</div>
</form>
</body>
</html>
Escenario de maestro/detalle con controles UpdatePanel
En el ejemplo siguiente, se usa un control UpdatePanel en un escenario de maestro/detalle que muestra los pedidos y los detalles de los pedidos de la base de datos Northwind. Un control UpdatePanel contiene el control GridView que muestra una lista de pedidos. Un segundo control UpdatePanel contiene un control DetailsView que muestra los detalles de un pedido. Al seleccionar un pedido de la primera tabla, los detalles para ese pedido se muestran en la segunda tabla. Esta tabla se actualiza de forma asincrónica basándose en la selección en la primera. Las operaciones de paginación y ordenación de la tabla de resumen de pedidos también provocan actualizaciones parciales.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
SqlDataSource2.SelectParameters("OrderID").DefaultValue = _
GridView1.SelectedDataKey.Value.ToString()
End Sub
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="OrdersPanel"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1"
AllowPaging="True"
AllowSorting="True"
Caption="Orders"
DataKeyNames="OrderID"
DataSourceID="SqlDataSource1"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
runat="server" >
<Columns>
<asp:CommandField ShowSelectButton="True"></asp:CommandField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1"
runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID], [OrderDate] FROM [Orders]">
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="OrderDetailsPanel"
UpdateMode="Always"
runat="server">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1"
Caption="Order Details"
DataKeyNames="OrderID,ProductID"
DataSourceID="SqlDataSource2"
runat="server">
<EmptyDataTemplate>
<i>Select a row from the Orders table.</i>
</EmptyDataTemplate>
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource2"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [OrderID], [ProductID], [UnitPrice], [Quantity], [Discount] FROM [Order Details] WHERE ([OrderID] = @OrderID)"
runat="server">
<SelectParameters>
<asp:Parameter Name="OrderID"
Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</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 runat="server">
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
SqlDataSource2.SelectParameters["OrderID"].DefaultValue =
GridView1.SelectedDataKey.Value.ToString();
}
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="OrdersPanel"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1"
AllowPaging="True"
AllowSorting="True"
Caption="Orders"
DataKeyNames="OrderID"
DataSourceID="SqlDataSource1"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
runat="server" >
<Columns>
<asp:CommandField ShowSelectButton="True"></asp:CommandField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1"
runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID], [OrderDate] FROM [Orders]">
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="OrderDetailsPanel"
UpdateMode="Always"
runat="server">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1"
Caption="Order Details"
DataKeyNames="OrderID,ProductID"
DataSourceID="SqlDataSource2"
runat="server">
<EmptyDataTemplate>
<i>Select a row from the Orders table.</i>
</EmptyDataTemplate>
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource2"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [OrderID], [ProductID], [UnitPrice], [Quantity], [Discount] FROM [Order Details] WHERE ([OrderID] = @OrderID)"
runat="server">
<SelectParameters>
<asp:Parameter Name="OrderID"
Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Si coloca un control GridView dentro de un control UpdatePanel, no se admite el establecimiento del valor de la propiedad EnableSortingAndPagingCallbacks del control GridView en true. Sin embargo, puesto que el control UpdatePanel admite las devoluciones de datos asincrónicas, cualquier devolución de datos que cambie el control GridView dentro de un control UpdatePanel provocan el mismo comportamiento que las devoluciones de llamadas de ordenación y paginación.
Usar un control UpdatePanel en una plantilla
En el ejemplo siguiente, se usa un control UpdatePanel en la plantilla de elementos de un control GridView. Se generan controles UpdatePanel en cada fila de datos automáticamente. El control UpdatePanel de cada fila contiene un control Label con el fin de mostrar la parte del elemento de esa fila y un control Button para reducir y aumentar esa parte.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Private Sub ChangeQuantity(ByVal Sender As Button, ByVal delta As Integer)
Dim quantityLabel As Label = CType(Sender.FindControl("QuantityLabel"), Label)
Dim currentQuantity As Integer = Int32.Parse(quantityLabel.Text)
currentQuantity = Math.Max(0, currentQuantity + delta)
quantityLabel.Text = currentQuantity.ToString(System.Globalization.CultureInfo.InvariantCulture)
End Sub
Private Sub OnDecreaseQuantity(ByVal Sender As Object, ByVal E As EventArgs)
ChangeQuantity(Sender, -1)
End Sub
Private Sub OnIncreaseQuantity(ByVal Sender As Object, ByVal E As EventArgs)
ChangeQuantity(Sender, 1)
End Sub
Protected Sub Button1_Click(ByVal Sender As Object, ByVal E As EventArgs)
Dim sb As New StringBuilder()
sb.Append("Beverage order:<br/>")
For Each row As GridViewRow In GridView1.Rows
If row.RowType = DataControlRowType.DataRow Then
Dim quantityLabel As Label = CType(row.FindControl("QuantityLabel"), Label)
Dim currentQuantity As Int32 = Int32.Parse(quantityLabel.Text)
sb.Append(row.Cells(0).Text + " : " & currentQuantity & "<br/>")
End If
Next
SummaryLabel.Text = sb.ToString()
End Sub
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Inside GridView Template Example </title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:GridView ID="GridView1"
AutoGenerateColumns="False"
DataSourceID="SqlDataSource1"
runat="server">
<Columns>
<asp:BoundField DataField="ProductName"
HeaderText="ProductName" />
<asp:BoundField DataField="UnitPrice"
HeaderText="UnitPrice" />
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:UpdatePanel ID="QuantityUpdatePanel"
runat="server" >
<ContentTemplate>
<asp:Label ID="QuantityLabel"
Text="0"
runat="server" />
<asp:Button ID="DecreaseQuantity"
Text="-"
OnClick="OnDecreaseQuantity"
runat="server" />
<asp:Button ID="IncreaseQuantity"
Text="+"
OnClick="OnIncreaseQuantity"
runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:UpdatePanel ID="SummaryUpdatePanel"
runat="server">
<ContentTemplate>
<asp:Button ID="Button1"
OnClick="Button1_Click"
Text="Get Summary"
runat="server" />
<br />
<asp:Label ID="SummaryLabel"
runat="server">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [ProductName], [UnitPrice] FROM
[Alphabetical list of products] WHERE ([CategoryName]
LIKE '%' + @CategoryName + '%')"
runat="server">
<SelectParameters>
<asp:Parameter DefaultValue="Beverages"
Name="CategoryName"
Type="String" />
</SelectParameters>
</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">
<script runat="server">
private void ChangeQuantity(object sender, int delta)
{
Label quantityLabel = (Label)((Button)sender).FindControl("QuantityLabel");
int currentQuantity = Int32.Parse(quantityLabel.Text);
currentQuantity = Math.Max(0, currentQuantity + delta);
quantityLabel.Text = currentQuantity.ToString(System.Globalization.CultureInfo.InvariantCulture);
}
private void OnDecreaseQuantity(object sender, EventArgs e)
{
ChangeQuantity(sender, -1);
}
private void OnIncreaseQuantity(object sender, EventArgs e)
{
ChangeQuantity(sender, 1);
}
protected void Button1_Click(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder();
sb.Append("Beverage order:<br/>");
foreach (GridViewRow row in GridView1.Rows)
{
if (row.RowType == DataControlRowType.DataRow)
{
Label quantityLabel = (Label)row.FindControl("QuantityLabel");
int currentQuantity = Int32.Parse(quantityLabel.Text);
sb.Append(row.Cells[0].Text + " : " + currentQuantity + "<br/>");
}
}
SummaryLabel.Text = sb.ToString();
}
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Inside GridView Template Example </title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:GridView ID="GridView1"
AutoGenerateColumns="False"
DataSourceID="SqlDataSource1"
runat="server">
<Columns>
<asp:BoundField DataField="ProductName"
HeaderText="ProductName" />
<asp:BoundField DataField="UnitPrice"
HeaderText="UnitPrice" />
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:UpdatePanel ID="QuantityUpdatePanel"
UpdateMode="Conditional"
runat="server" >
<ContentTemplate>
<asp:Label ID="QuantityLabel"
Text="0"
runat="server" />
<asp:Button ID="DecreaseQuantity"
Text="-"
OnClick="OnDecreaseQuantity"
runat="server" />
<asp:Button ID="IncreaseQuantity"
Text="+"
OnClick="OnIncreaseQuantity"
runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:UpdatePanel ID="SummaryUpdatePanel"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<asp:Button ID="Button1"
OnClick="Button1_Click"
Text="Get Summary"
runat="server" />
<br />
<asp:Label ID="SummaryLabel"
runat="server">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [ProductName], [UnitPrice] FROM
[Alphabetical list of products] WHERE ([CategoryName]
LIKE '%' + @CategoryName + '%')"
runat="server">
<SelectParameters>
<asp:Parameter DefaultValue="Beverages"
Name="CategoryName"
Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>