The following examples show different uses of the UpdatePanel control.
Controls Inside an UpdatePanel Control
The following example shows how to put controls inside an UpdatePanel control to reduce screen flicker when you post to the server. In this example, a Calendar and a DropDownList control are inside an UpdatePanel control. By default, the UpdateMode property is Always and the ChildrenAsTriggers property is true. Therefore, child controls of the panel cause an asynchronous postback.
<%@ 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>
Master/Detail Scenario with UpdatePanel Controls
In the following example, an UpdatePanel control is used in a master/detail scenario that shows orders and order details from the Northwind database. One UpdatePanel control contains the GridView control that displays a list of orders. A second UpdatePanel control contains a DetailsView control that displays the details of one order. When you select an order from the first table, details for that order are displayed in the second table. The second table is updated asynchronously based on the selection in the first table. The sorting and paging operations in the orders summary table also cause partial updates.
<%@ 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>
If you put a GridView control inside an UpdatePanel control, setting the GridView control's EnableSortingAndPagingCallbacks property to true is not supported. However, because the UpdatePanel control supports asynchronous postbacks, any postbacks that change the GridView control inside an UpdatePanel control cause the same behavior as sorting and paging callbacks.
Using an UpdatePanel Control in a Template
In the following example, an UpdatePanel control is used in the item template of a GridView control. UpdatePanel controls in each data row are generated automatically. Each row's UpdatePanel control contains a Label control to display the quantity of the item in that row and a Button control to decrease and increase the quantity.
<%@ 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>