Export (0) Print
Expand All

UpdatePanel Class

Enables sections of a page to be partially rendered without a postback.

Namespace:  System.Web.UI
Assembly:  System.Web.Extensions (in System.Web.Extensions.dll)

[AspNetHostingPermissionAttribute(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal)]
[AspNetHostingPermissionAttribute(SecurityAction.LinkDemand, Level = AspNetHostingPermissionLevel.Minimal)]
public class UpdatePanel : Control, 
	IUpdatePanel
<asp:UpdatePanel />

UpdatePanel controls are a central part of AJAX functionality in ASP.NET. They are used with the ScriptManager control to enable partial-page rendering. Partial-page rendering reduces the need for synchronous postbacks and complete page updates when only part of the page has to be updated. Partial-page rendering improves the user experience because it reduces the screen flicker that occurs during a full-page postback and improves Web page interactivity.

Refreshing UpdatePanel Content

When partial-page rendering is enabled, a control can perform a postback that updates the whole page or an asynchronous postback that updates the content of one or more UpdatePanel controls. Whether a control causes an asynchronous postback and updates an UpdatePanel control depends on the following:

  • If the UpdateMode property of the UpdatePanel control is set to Always, the UpdatePanel control's content is updated on every postback that originates from the page. This includes asynchronous postbacks from controls that are inside other UpdatePanel controls and postbacks from controls that are not inside UpdatePanel controls.

  • If the UpdateMode property is set to Conditional, the UpdatePanel control's content is updated in the following circumstances:

    • When you call the Update method of the UpdatePanel control explicitly.

    • When the UpdatePanel control is nested inside another UpdatePanel control, and the parent panel is updated.

    • When a postback is caused by a control that is defined as a trigger by using the Triggers property of the UpdatePanel control. In this scenario, the control explicitly triggers an update of the panel content. The control can be either inside or outside the UpdatePanel control that the trigger is associated with.

    • When the ChildrenAsTriggers property is set to true and a child control of the UpdatePanel control causes a postback. Child controls of nested UpdatePanel controls do not cause an update to the outer UpdatePanel control unless they are explicitly defined as triggers.

The combination of setting the ChildrenAsTriggers property to false and the UpdateMode property to Always is not allowed and will throw an exception.

When the UpdatePanel control performs an asynchronous post, it adds a custom HTTP header. Some proxies remove this custom HTTP header. If this occurs, the server handles the request as a regular postback, which causes a client error. To resolve this issue, insert a custom form field when you perform asynchronous posts. Then check the header or the custom form field in server code.

UpdatePanel Usage

You can use multiple UpdatePanel controls to update different page regions independently. When the page that contains one or more UpdatePanel controls is first rendered, all the content of all UpdatePanel controls are rendered and sent to the browser. On subsequent asynchronous postbacks, the content of each UpdatePanel control might not be updated depending on the panel settings and on client or server logic for individual panels.

You can also use UpdatePanel controls in the following scenarios:

  • In user controls.

  • On master and content pages.

  • Nested inside other UpdatePanel controls.

  • Inside templated controls such as the GridView or Repeater controls.

UpdatePanel controls can be added declaratively or programmatically.

You can add an UpdatePanel control programmatically, but you cannot add triggers programmatically. To create trigger-like behavior, you can register a control on the page as an asynchronous postback control. You do this by calling the RegisterAsyncPostBackControl method of the ScriptManager control. You can then create an event handler that runs in response to the asynchronous postback, and in the handler, call the Update method of the UpdatePanel control.

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="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 xmlns="http://www.w3.org/1999/xhtml">
<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="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 xmlns="http://www.w3.org/1999/xhtml">
<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="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 xmlns="http://www.w3.org/1999/xhtml">
<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>

System.Object
  System.Web.UI.Control
    System.Web.UI.UpdatePanel

Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.

Windows 7, Windows Vista, Windows XP SP2, Windows Server 2008 R2, Windows Server 2008, Windows Server 2003

The .NET Framework and .NET Compact Framework do not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.

.NET Framework

Supported in: 3.5

Community Additions

ADD
Show:
© 2014 Microsoft