Compartir a través de


Usar el control UpdatePanel de ASP.NET con controles enlazados a datos

Actualización: noviembre 2007

Puede crear una experiencia del usuario más enriquecida en sus aplicaciones ASP.NET habilitadas para AJAX si usa la representación parcial de páginas. La representación parcial de páginas elimina la necesidad de actualizar la página entera como resultado de una devolución de datos. En su lugar, puede especificar sólo la región de la página que se va a actualizar. Como resultado, los usuarios ya no ven la recarga de la página entera en cada devolución de datos.

En este tema se supone que está familiarizado con el control UpdatePanel. Si no es así, revise los temas siguientes:

Puede habilitar la representación parcial de páginas si usa los controles de servidor web UpdatePanelScriptManager. El control UpdatePanel identifica una región de una página que se puede actualizar. El control ScriptManager realiza el seguimiento de los controles UpdatePanel incluidos en una página y de los controles que activan los controles UpdatePanel para actualizar. Los controles incluidos dentro de un control UpdatePanel que producen una devolución de datos se identifican automáticamente como desencadenadores del panel de actualización. También puede especificar controles fuera de un control UpdatePanel. Los desencadenadores externos pueden ser controles secundarios de otro control UpdatePanel. Para obtener más información, vea Información general sobre la representación parcial de páginas y Información general sobre el control UpdatePanel.

Este tema contiene las secciones siguientes:

  • Usar varios controles UpdatePanel en una página

  • Deshabilitar desencadenadores automáticos

  • Administrar desencadenadores y actualizar un control UpdatePanel mediante programación

  • Habilitar la representación parcial de páginas en un control personalizado

Usar varios controles UpdatePanel en una página

No hay ningún límite al número de los controles UpdatePanel que se pueden incluir en una página. Como resultado, puede especificar regiones de una página que se actualizan independientemente de la página entera e independientemente entre sí.

De manera predeterminada, la propiedad UpdateMode de un control UpdatePanel se establece en Always. Esto significa que, al desencadenar una actualización parcial de la página, el control UpdatePanel actualiza la página, aunque el desencadenador no fuese para ese control UpdatePanel. Para asegurarse de que el control UpdatePanel sólo se actualiza cuando se ha desencadenado, puede establecer la propiedad UpdateMode del control UpdatePanel en Conditional.

En el ejemplo siguiente se incluyen dos controles UpdatePanel. Un control incluye controles web que aceptan datos introducidos por el usuario y el otro control muestra lo que el usuario escribe. Cada control UpdatePanel tiene su propiedad UpdateMode establecida en Conditional. Como resultado, si un usuario hace clic en el botón Cancelar para borrar los campos del formulario de entrada, sólo se actualiza el formulario de entrada del control UpdatePanel. Si un usuario hace clic en el botón Insertar para enviar el formulario, se actualizan ambos controles UpdatePanel.

<%@ 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>
        &nbsp;</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>
        &nbsp;</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>

También puede anidar un control UpdatePanel dentro de otro control UpdatePanel. Si establece la propiedad UpdateMode de los controles externos y anidados en Conditional, el panel exterior no se actualiza cuando sólo se desencadena el panel interno. Sin embargo, si un desencadenador actualiza el panel externo, se actualizan los paneles externo e interno.

El ejemplo siguiente incluye un control GridView dentro de un control UpdatePanel. Cada fila del control GridView contiene un control GridView anidado que está dentro de un control UpdatePanel secundario. Cuando un control GridView interno solicita una nueva página de registros, las regiones de página del panel exterior y de los paneles de las otras filas del control GridView externo no se actualizan. Cuando el control GridView externo muestra una nueva página de registros, se actualizan las regiones de página del panel externo y de los paneles anidados.

<%@ 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>
        &nbsp;
        <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>
        &nbsp;
        <asp:SqlDataSource ID="DepartmentDataSource"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
            SelectCommand="SELECT DepartmentID, Name, GroupName FROM HumanResources.Department ORDER BY Name">
        </asp:SqlDataSource>

    </div>
    </form>
</body>
</html>

Deshabilitar desencadenadores automáticos

Los controles incluidos en un control UpdatePanel que producen una devolución de datos, se configuran automáticamente como desencadenadores de dicho control UpdatePanel. Sin embargo, es posible que desee deshabilitar los desencadenadores automáticos y desencadenar únicamente una actualización del control UpdatePanel desde un control externo. Para ello, establezca la propiedad ChildrenAsTriggers del control UpdatePanel en false. A continuación, establezca la propiedad UpdateMode del control UpdatePanel en Conditional. Estos valores de propiedad sólo producirán una actualización del panel si se desencadena un control externo o bien mediante una llamada al método Update.

El ejemplo siguiente muestra las categorías, subcategorías y nombres de productos de la base de datos de ejemplo AdventureWorks. La lista de categorías raramente cambia y no hay ninguna necesidad de actualizar la lista de categorías cada vez que se muestra una lista de subcategorías o productos. Por tanto, en el control UpdatePanel que contiene la lista de categorías, puede establecer la propiedad ChildrenAsTriggers en false y la propiedad UpdateMode en Conditional. De esta forma se asegura de que el control UpdatePanel sólo se actualiza cuando se solicita explícitamente.

<%@ Page Language="VB" AutoEventWireup="true" %>

<!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>UpdatePanel Example</title>
    <script >
        Protected Sub ProductsUpdatePanel_Load(sender As Object, e As EventArgs)
            CategoryTimeLabel.Text = DateTime.Now.ToString()
        End Sub

        Protected Sub CategoriesRepeater_ItemCommand(sender As Object, e As RepeaterCommandEventArgs)
            SubcategoriesDataSource.SelectParameters("CategoryID").DefaultValue = e.CommandArgument.ToString()
            SubcategoriesRepeater.DataBind()
            ProductsDataSource.SelectParameters("SubcategoryID").DefaultValue = "0"
            ProductsGridView.DataBind()
        End Sub

        Protected Sub SubcategoriesRepeater_ItemCommand(sender As Object, e As RepeaterCommandEventArgs)
            ProductsDataSource.SelectParameters("SubcategoryID").DefaultValue = e.CommandArgument.ToString()
            ProductsGridView.DataBind()
        End Sub

        Protected Sub RefreshCategoriesButton_Click(sender As Object, e As EventArgs)
            SubcategoriesDataSource.SelectParameters("CategoryID").DefaultValue = "0"
            SubcategoriesRepeater.DataBind()
            ProductsDataSource.SelectParameters("SubcategoryID").DefaultValue = "0"
            ProductsGridView.DataBind()
        End Sub
</script>
</head>
<body>
  <form id="form1" >
  <div>
    <asp:ScriptManager ID="ScriptManager1" >
    </asp:ScriptManager>
    <table>
      <tr>
        <td valign="top" style="width:120px">
          <asp:UpdatePanel ID="ProductsUpdatePanel"  
                           ChildrenAsTriggers="False" 
                           OnLoad="ProductsUpdatePanel_Load" UpdateMode="Conditional">
            <ContentTemplate>
              <asp:Repeater ID="CategoryRepeater"  DataSourceID="CategoriesDataSource"
                            OnItemCommand="CategoriesRepeater_ItemCommand">
                <ItemTemplate>
                  <asp:LinkButton  ID="SelectCategoryButton" 
                                  Text='<%# Eval("Name") %>'
                                  CommandName="SelectCategory"
                                  CommandArgument='<%#Eval("ProductCategoryID") %>' /><br />
                </ItemTemplate>
              </asp:Repeater>
              <asp:SqlDataSource ID="CategoriesDataSource"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                  SelectCommand="SELECT Name, ProductCategoryID FROM Production.ProductCategory ORDER BY ProductCategoryID">
              </asp:SqlDataSource>
              <br />
              <asp:Label ID="CategoryTimeLabel"  Text="Label" Font-Size="Smaller"></asp:Label>
            </ContentTemplate>
            <Triggers>
              <asp:AsyncPostBackTrigger ControlID="RefreshCategoriesButton" EventName="Click" />
            </Triggers>
          </asp:UpdatePanel>
          <asp:LinkButton runat="Server" ID="RefreshCategoriesButton" Text="Refresh Category List"
                          OnClick="RefreshCategoriesButton_Click" Font-Size="smaller" />
        </td>
        <td valign="top">
          <asp:UpdatePanel ID="SubcategoriesUpdatePanel" >
            <ContentTemplate>
              <asp:Repeater ID="SubcategoriesRepeater"  DataSourceID="SubcategoriesDataSource"
                            OnItemCommand="SubcategoriesRepeater_ItemCommand" >
                <ItemTemplate>
                  <asp:LinkButton  ID="SelectSubcategoryButton" 
                                  Text='<%# Eval("Name") %>'
                                  CommandName="SelectSubcategory"
                                  CommandArgument='<%#Eval("ProductSubcategoryID") %>' /><br />
                </ItemTemplate>
              </asp:Repeater>
              <asp:SqlDataSource ID="SubcategoriesDataSource"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                  SelectCommand="SELECT Name, ProductSubcategoryID FROM Production.ProductSubcategory 
                                 WHERE Production.ProductSubcategory.ProductCategoryID = @CategoryID 
                                 ORDER BY Name">
                 <SelectParameters>
                   <asp:Parameter Name="CategoryID" DefaultValue="0" />
                 </SelectParameters>
              </asp:SqlDataSource>
            </ContentTemplate>
          </asp:UpdatePanel>
        </td>
        <td valign="top">
          <asp:UpdatePanel ID="ProductUpdatePanel" >
            <ContentTemplate>
              <asp:GridView ID="ProductsGridView"  AllowPaging="True" AutoGenerateColumns="False" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataKeyNames="ProductID" DataSourceID="ProductsDataSource" GridLines="Horizontal">
                <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
                <Columns>
                  <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" >
                    <ItemStyle Width="240px" />
                  </asp:BoundField>
                </Columns>
                <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
                <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
                <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
                <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
                <AlternatingRowStyle BackColor="#F7F7F7" />
              </asp:GridView>
              <asp:SqlDataSource ID="ProductsDataSource"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                  SelectCommand="SELECT ProductID, Name, ProductSubcategoryID FROM Production.Product WHERE (ProductSubcategoryID = @SubcategoryID) ORDER BY Name">
                <SelectParameters>
                  <asp:Parameter DefaultValue="0" Name="SubcategoryID" />
                </SelectParameters>
              </asp:SqlDataSource>
            </ContentTemplate>
          </asp:UpdatePanel>
        </td>
      </tr>
    </table>
  </div>
  </form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" %>

<!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>UpdatePanel Example</title>
    <script >
        protected void ProductsUpdatePanel_Load(object sender, EventArgs e)
        {
            CategoryTimeLabel.Text = DateTime.Now.ToString();
        }

        protected void CategoriesRepeater_ItemCommand(object sender, RepeaterCommandEventArgs e)
        {
            SubcategoriesDataSource.SelectParameters["CategoryID"].DefaultValue = e.CommandArgument.ToString();
            SubcategoriesRepeater.DataBind();
            ProductsDataSource.SelectParameters["SubcategoryID"].DefaultValue = "0";
            ProductsGridView.DataBind();
        }

        protected void SubcategoriesRepeater_ItemCommand(object sender, RepeaterCommandEventArgs e)
        {
            ProductsDataSource.SelectParameters["SubcategoryID"].DefaultValue = e.CommandArgument.ToString();
            ProductsGridView.DataBind();
        }

        protected void RefreshCategoriesButton_Click(object sender, EventArgs e)
        {
            SubcategoriesDataSource.SelectParameters["CategoryID"].DefaultValue = "0";
            SubcategoriesRepeater.DataBind();
            ProductsDataSource.SelectParameters["SubcategoryID"].DefaultValue = "0";
            ProductsGridView.DataBind();
        }
</script>
</head>
<body>
  <form id="form1" >
  <div>
    <asp:ScriptManager ID="ScriptManager1" >
    </asp:ScriptManager>
    <table>
      <tr>
        <td valign="top" style="width:120px">
          <asp:UpdatePanel ID="ProductsUpdatePanel"  
                           ChildrenAsTriggers="False" 
                           OnLoad="ProductsUpdatePanel_Load" UpdateMode="Conditional">
            <ContentTemplate>
              <asp:Repeater ID="CategoryRepeater"  DataSourceID="CategoriesDataSource"
                            OnItemCommand="CategoriesRepeater_ItemCommand">
                <ItemTemplate>
                  <asp:LinkButton  ID="SelectCategoryButton" 
                                  Text='<%# Eval("Name") %>'
                                  CommandName="SelectCategory"
                                  CommandArgument='<%#Eval("ProductCategoryID") %>' /><br />
                </ItemTemplate>
              </asp:Repeater>
              <asp:SqlDataSource ID="CategoriesDataSource"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                  SelectCommand="SELECT Name, ProductCategoryID FROM Production.ProductCategory ORDER BY ProductCategoryID">
              </asp:SqlDataSource>
              <br />
              <asp:Label ID="CategoryTimeLabel"  Text="Label" Font-Size="Smaller"></asp:Label>
            </ContentTemplate>
            <Triggers>
              <asp:AsyncPostBackTrigger ControlID="RefreshCategoriesButton" EventName="Click" />
            </Triggers>
          </asp:UpdatePanel>
          <asp:LinkButton runat="Server" ID="RefreshCategoriesButton" Text="Refresh Category List"
                          OnClick="RefreshCategoriesButton_Click" Font-Size="smaller" />
        </td>
        <td valign="top">
          <asp:UpdatePanel ID="SubcategoriesUpdatePanel" >
            <ContentTemplate>
              <asp:Repeater ID="SubcategoriesRepeater"  DataSourceID="SubcategoriesDataSource"
                            OnItemCommand="SubcategoriesRepeater_ItemCommand" >
                <ItemTemplate>
                  <asp:LinkButton  ID="SelectSubcategoryButton" 
                                  Text='<%# Eval("Name") %>'
                                  CommandName="SelectSubcategory"
                                  CommandArgument='<%#Eval("ProductSubcategoryID") %>' /><br />
                </ItemTemplate>
              </asp:Repeater>
              <asp:SqlDataSource ID="SubcategoriesDataSource"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                  SelectCommand="SELECT Name, ProductSubcategoryID FROM Production.ProductSubcategory 
                                 WHERE Production.ProductSubcategory.ProductCategoryID = @CategoryID 
                                 ORDER BY Name">
                 <SelectParameters>
                   <asp:Parameter Name="CategoryID" DefaultValue="0" />
                 </SelectParameters>
              </asp:SqlDataSource>
            </ContentTemplate>
          </asp:UpdatePanel>
        </td>
        <td valign="top">
          <asp:UpdatePanel ID="ProductUpdatePanel" >
            <ContentTemplate>
              <asp:GridView ID="ProductsGridView"  AllowPaging="True" AutoGenerateColumns="False" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataKeyNames="ProductID" DataSourceID="ProductsDataSource" GridLines="Horizontal">
                <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
                <Columns>
                  <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" >
                    <ItemStyle Width="240px" />
                  </asp:BoundField>
                </Columns>
                <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
                <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
                <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
                <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
                <AlternatingRowStyle BackColor="#F7F7F7" />
              </asp:GridView>
              <asp:SqlDataSource ID="ProductsDataSource"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                  SelectCommand="SELECT ProductID, Name, ProductSubcategoryID FROM Production.Product WHERE (ProductSubcategoryID = @SubcategoryID) ORDER BY Name">
                <SelectParameters>
                  <asp:Parameter DefaultValue="0" Name="SubcategoryID" />
                </SelectParameters>
              </asp:SqlDataSource>
            </ContentTemplate>
          </asp:UpdatePanel>
        </td>
      </tr>
    </table>
  </div>
  </form>
</body>
</html>

Administrar desencadenadores y actualizar un control UpdatePanel mediante programación

Los controles que desencadenan una actualización del control UpdatePanel se deben registrar con el control ScriptManager en la página. Esto se produce automáticamente en los controles secundarios de un control UpdatePanel. Puede especificar desencadenadores mediante declaración con la colección Triggers de un control UpdatePanel. Además, puede identificar mediante programación los desencadenadores y utilizar código de servidor para provocar la actualización de un control UpdatePanel.

En casos donde un control desencadenador no está disponible en tiempo de diseño, puede registrar el control como un desencadenador mediante el método RegisterAsyncPostBackControl del control ScriptManager. Los controles que se identifican mediante programación como desencadenadores se deben registrar cada vez que se produce una devolución de datos. Se recomienda incluir llamadas al método RegisterAsyncPostBackControl en el evento Page_Load de la página, como se muestra en el ejemplo siguiente:

Protected Sub Page_Load()
    ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList)
End Sub
protected void Page_Load()
{
    ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList);
}

Para actualizar mediante programación el control UpdatePanel, puede llamar al método Update de un control UpdatePanel. Esto es útil si debe realizar algún procesamiento en el servidor antes de actualizar el control UpdatePanel. En el ejemplo siguiente se muestra cómo actualizar un control UpdatePanel mediante programación.

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 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();
}

El ejemplo siguiente muestra una página que registra un control como desencadenador con el método RegisterAsyncPostBackControl. A continuación, actualiza un control UpdatePanel mediante programación con el 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>

Habilitar la representación parcial de páginas en un control personalizado

Puede agregar UpdatePanel a un control de usuario o a un control personalizado. Sin embargo, es posible que la página que contiene el control no incluya el control ScriptManager necesario con su propiedad EnablePartialRendering establecida en true. Por consiguiente, en el control personalizado puede determinar si la representación parcial de páginas está habilitada mediante una llamada al método GetCurrent estático del control ScriptManager. Si no existe ningún control ScriptManager en la página, el método GetCurrent devuelve null. En caso contrario, puede comprobar el valor de la propiedad EnablePartialRendering del control ScriptManager e incluir un control UpdatePanel si la propiedad EnablePartialRendering devuelve true.

El ejemplo siguiente muestra el método CreateChildControls de un control personalizado que hereda de la clase CompositeControl. Si la representación parcial de páginas está habilitado para la página, el control personalizado incluye su contenido en un control UpdatePanel.

Protected Overrides Sub CreateChildControls()
    MyBase.CreateChildControls()

    Dim parent As Control
    Dim container As Control

    ' Get a reference to the ScriptManager object for the page
    ' if one exists.
    Dim sm As ScriptManager = ScriptManager.GetCurrent(Page)

    If sm Is Nothing OrElse Not sm.EnablePartialRendering Then
        ' If partial rendering is not enabled, set the parent
        ' and container as a basic control. 
        container = New Control()
        parent = container
    Else
        ' If partial rendering is enabled, set the parent as
        ' a new UpdatePanel object and the container to the 
        ' content template of the UpdatePanel object.
        Dim up As UpdatePanel = New UpdatePanel()
        container = up.ContentTemplateContainer
        parent = up
    End If

    AddDataboundControls(container)

    Controls.Add(parent)
End Sub
protected override void CreateChildControls() {
    base.CreateChildControls();

    Control parent;
    Control container;

    // Get a reference to the ScriptManager object for the page
    // if one exists.
    ScriptManager sm = ScriptManager.GetCurrent(Page);

    if (sm == null || !sm.EnablePartialRendering)
    {
        // If partial rendering is not enabled, set the parent
        // and container as a basic control. 
        container = new Control();
        parent = container;
    }
    else
    {
        // If partial rendering is enabled, set the parent as
        // a new UpdatePanel object and the container to the 
        // content template of the UpdatePanel object.
        UpdatePanel up = new UpdatePanel();
        container = up.ContentTemplateContainer;
        parent = up;
    }

    AddDataboundControls(container);

    Controls.Add(parent);
}

El ejemplo siguiente muestra un control personalizado que incluye un control UpdatePanel si está habilitada la representación parcial de páginas.

<%@ Page Language="VB" AutoEventWireup="true" %>
<%@ Register Namespace="UpdatePanelTutorialCustom.VB" TagPrefix="sample" %>

<!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>Browse Products</title>
    <script >
        Protected Sub ProductsView1_RowCommand(ByVal sender As Object, ByVal e As EventArgs)
            ShoppingCartList.DataSource = ProductsView1.Cart
            ShoppingCartList.DataBind()
        End Sub
    </script>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager  ID="ScriptManager1" EnablePartialRendering="false" />
        <h2>Browse Products</h2>
        <sample:ProductsView  ID="ProductsView1" PageSize="5" OnRowCommand="ProductsView1_RowCommand" />

        <asp:UpdatePanel  ID="CartUpdatePanel">
          <ContentTemplate>
            <h3>Selected Items</h3>
            <asp:BulletedList BulletStyle="numbered"  ID="ShoppingCartList" />
          </ContentTemplate>
        </asp:UpdatePanel>
     </div>
    </form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Namespace="UpdatePanelTutorialCustom.CS" TagPrefix="sample" %>

<!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 Products</title>
    <script >
        protected void ProductsView1_RowCommand(object sender, EventArgs e)
        {
            ShoppingCartList.DataSource = ProductsView1.Cart;
            ShoppingCartList.DataBind();
        }
    </script>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager  ID="ScriptManager1" EnablePartialRendering="false" />
        <h2>Browse Products</h2>
        <sample:ProductsView  ID="ProductsView1" PageSize="5" OnRowCommand="ProductsView1_RowCommand" />

        <asp:UpdatePanel  ID="CartUpdatePanel">
          <ContentTemplate>
            <h3>Selected Items</h3>
            <asp:BulletedList BulletStyle="numbered"  ID="ShoppingCartList" />
          </ContentTemplate>
        </asp:UpdatePanel>
     </div>
    </form>
</body>
</html>
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports System.Web.UI
Imports System.Drawing

Namespace UpdatePanelTutorialCustom.VB

    Public Class ProductsView
        Inherits CompositeControl

        Private _pageSize As Integer
        Private _cart As ArrayList
        Private Shared ReadOnly EventRowCommand As Object = New Object()

        Public Property PageSize() As Integer
            Get
                Return _pageSize
            End Get
            Set(ByVal value As Integer)
                _pageSize = value
            End Set
        End Property


        Public ReadOnly Property Cart() As ArrayList
            Get
                Return _cart
            End Get
        End Property

        Protected Overrides Sub CreateChildControls()
            MyBase.CreateChildControls()

            Dim parent As Control
            Dim container As Control

            ' Get a reference to the ScriptManager object for the page
            ' if one exists.
            Dim sm As ScriptManager = ScriptManager.GetCurrent(Page)

            If sm Is Nothing OrElse Not sm.EnablePartialRendering Then
                ' If partial rendering is not enabled, set the parent
                ' and container as a basic control. 
                container = New Control()
                parent = container
            Else
                ' If partial rendering is enabled, set the parent as
                ' a new UpdatePanel object and the container to the 
                ' content template of the UpdatePanel object.
                Dim up As UpdatePanel = New UpdatePanel()
                container = up.ContentTemplateContainer
                parent = up
            End If

            AddDataboundControls(container)

            Controls.Add(parent)
        End Sub

        Private Sub GridView_RowCommand(ByVal sender As Object, ByVal e As GridViewCommandEventArgs)

            Dim productID As String

            If e.CommandName = "AddToCart" Then
                productID = CType(sender, GridView).DataKeys(Convert.ToInt32(e.CommandArgument)).Value.ToString()
                If _cart Is Nothing Then GetCart()
                If _cart.IndexOf(productID) = -1 Then _
                    _cart.Add(productID)
                ViewState("Cart") = _cart
            End If

            If e.CommandName = "RemoveFromCart" Then
                productID = CType(sender, GridView).DataKeys(Convert.ToInt32(e.CommandArgument)).Value.ToString()
                If _cart Is Nothing Then GetCart()
                _cart.Remove(productID)
                ViewState("Cart") = _cart
            End If

            Me.OnRowCommand(New EventArgs())
        End Sub

        Private Sub GetCart()
            If ViewState("Cart") Is Nothing Then
                _cart = New ArrayList()
            Else
                _cart = CType(ViewState("Cart"), ArrayList)
            End If
        End Sub

        Custom Event RowCommand As EventHandler
            RaiseEvent(ByVal sender As Object, ByVal e As EventArgs)
            End RaiseEvent
            AddHandler(ByVal value As EventHandler)
                Events.AddHandler(EventRowCommand, value)
            End AddHandler
            RemoveHandler(ByVal value As EventHandler)
                Events.RemoveHandler(EventRowCommand, value)
            End RemoveHandler
        End Event

        Protected Overridable Sub OnRowCommand(ByVal e As EventArgs)
            Dim handler As EventHandler = CType(Events(EventRowCommand), EventHandler)
            If handler IsNot Nothing Then
                handler(Me, e)
            End If
        End Sub

        Private Sub AddDataboundControls(ByVal parent As Control)
            Dim ds As SqlDataSource = New SqlDataSource()
            ds.ID = "ProductsSqlDataSource"
            ds.ConnectionString = _
              ConfigurationManager.ConnectionStrings("AdventureWorksConnectionString").ConnectionString
            ds.SelectCommand = _
              "SELECT Production.ProductDescription.Description, Production.Product.Name, Production.ProductPhoto.ThumbnailPhotoFileName, " & _
              "Production.Product.ProductID " & _
              "FROM Production.Product INNER JOIN " & _
              "Production.ProductProductPhoto ON Production.Product.ProductID = Production.ProductProductPhoto.ProductID INNER JOIN " & _
              "Production.ProductPhoto ON Production.ProductProductPhoto.ProductPhotoID = Production.ProductPhoto.ProductPhotoID INNER JOIN " & _
              "Production.ProductModelProductDescriptionCulture ON  " & _
              "Production.Product.ProductModelID = Production.ProductModelProductDescriptionCulture.ProductModelID INNER JOIN " & _
              "Production.ProductDescription ON  " & _
              "Production.ProductModelProductDescriptionCulture.ProductDescriptionID = Production.ProductDescription.ProductDescriptionID"

            Dim gv As GridView = New GridView()
            gv.ID = "ProductsGridView"
            gv.DataSourceID = ds.ID
            gv.AutoGenerateColumns = False
            gv.DataKeyNames = New String() {"ProductID"}
            gv.GridLines = GridLines.None
            gv.HeaderStyle.BackColor = Color.LightGray
            gv.AlternatingRowStyle.BackColor = Color.LightBlue
            gv.AllowPaging = True
            gv.PageSize = _pageSize
            AddHandler gv.RowCommand, AddressOf Me.GridView_RowCommand

            Dim if1 As ImageField = New ImageField()
            if1.HeaderText = "Product"
            if1.DataImageUrlField = "ThumbnailPhotoFileName"
            if1.DataImageUrlFormatString = "..\images\thumbnails\{0}"

            Dim bf1 As BoundField = New BoundField()
            bf1.HeaderText = "Name"
            bf1.DataField = "Name"

            Dim bf2 As BoundField = New BoundField()
            bf2.HeaderText = "Description"
            bf2.DataField = "Description"

            Dim btf1 As ButtonField = New ButtonField()
            btf1.Text = "Add"
            btf1.CommandName = "AddToCart"

            Dim btf2 As ButtonField = New ButtonField()
            btf2.Text = "Remove"
            btf2.CommandName = "RemoveFromCart"

            gv.Columns.Add(if1)
            gv.Columns.Add(bf1)
            gv.Columns.Add(bf2)
            gv.Columns.Add(btf1)
            gv.Columns.Add(btf2)

            parent.Controls.Add(New LiteralControl("<br />"))
            parent.Controls.Add(gv)
            parent.Controls.Add(New LiteralControl("<br />"))
            parent.Controls.Add(ds)
        End Sub
    End Class
End Namespace
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Web.UI;
using System.Drawing;

namespace UpdatePanelTutorialCustom.CS
{
    public class ProductsView : CompositeControl
    {
        private int _pageSize;
        private ArrayList _cart;
        private static readonly object EventRowCommand = new object();

        public int PageSize
        {
            get { return _pageSize; }
            set { _pageSize = value; }
        }

        public ArrayList Cart
        {
            get { return _cart; }
        }

        protected override void CreateChildControls() {
            base.CreateChildControls();

            Control parent;
            Control container;

            // Get a reference to the ScriptManager object for the page
            // if one exists.
            ScriptManager sm = ScriptManager.GetCurrent(Page);

            if (sm == null || !sm.EnablePartialRendering)
            {
                // If partial rendering is not enabled, set the parent
                // and container as a basic control. 
                container = new Control();
                parent = container;
            }
            else
            {
                // If partial rendering is enabled, set the parent as
                // a new UpdatePanel object and the container to the 
                // content template of the UpdatePanel object.
                UpdatePanel up = new UpdatePanel();
                container = up.ContentTemplateContainer;
                parent = up;
            }

            AddDataboundControls(container);

            Controls.Add(parent);
        }

        private void GridView_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            string productID;

            if (e.CommandName == "AddToCart")
            {
                productID = ((GridView)sender).DataKeys[Convert.ToInt32(e.CommandArgument)].Value.ToString();
                if (_cart == null) { GetCart(); }
                if (_cart.IndexOf(productID) == -1)
                    _cart.Add(productID);
                ViewState["Cart"] = _cart;
            }

            if (e.CommandName == "RemoveFromCart")
            {
                productID = ((GridView)sender).DataKeys[Convert.ToInt32(e.CommandArgument)].Value.ToString();
                if (_cart == null) { GetCart(); }
                _cart.Remove(productID);
                ViewState["Cart"] = _cart;
            }

            this.OnRowCommand(new EventArgs());
        }

        private void GetCart()
        {
            if (ViewState["Cart"] == null)
                _cart = new ArrayList();
            else
                _cart = (ArrayList)ViewState["Cart"];
        }

        public event EventHandler RowCommand
        {
            add { Events.AddHandler(EventRowCommand, value); }
            remove { Events.RemoveHandler(EventRowCommand, value); }
        }

        protected virtual void OnRowCommand(EventArgs e)
        {
            EventHandler handler = (EventHandler)Events[EventRowCommand];
            if (handler != null)
            {
                handler(this, e);
            }
        }

        private void AddDataboundControls(Control parent)
        {
            SqlDataSource ds = new SqlDataSource();
            ds.ID = "ProductsSqlDataSource";
            ds.ConnectionString = 
              ConfigurationManager.ConnectionStrings["AdventureWorksConnectionString"].ConnectionString;
            ds.SelectCommand =
              "SELECT Production.ProductDescription.Description, Production.Product.Name, Production.ProductPhoto.ThumbnailPhotoFileName, " +
              "Production.Product.ProductID " +
              "FROM Production.Product INNER JOIN " +
              "Production.ProductProductPhoto ON Production.Product.ProductID = Production.ProductProductPhoto.ProductID INNER JOIN " +
              "Production.ProductPhoto ON Production.ProductProductPhoto.ProductPhotoID = Production.ProductPhoto.ProductPhotoID INNER JOIN " +
              "Production.ProductModelProductDescriptionCulture ON  " +
              "Production.Product.ProductModelID = Production.ProductModelProductDescriptionCulture.ProductModelID INNER JOIN " +
              "Production.ProductDescription ON  " +
              "Production.ProductModelProductDescriptionCulture.ProductDescriptionID = Production.ProductDescription.ProductDescriptionID";

            GridView gv = new GridView();
            gv.ID = "ProductsGridView";
            gv.DataSourceID = ds.ID;
            gv.AutoGenerateColumns = false;
            gv.DataKeyNames = new string[] { "ProductID" };
            gv.GridLines = GridLines.None;
            gv.HeaderStyle.BackColor = Color.LightGray;
            gv.AlternatingRowStyle.BackColor = Color.LightBlue;
            gv.AllowPaging = true;
            gv.PageSize = _pageSize;
            gv.RowCommand += this.GridView_RowCommand;

            ImageField if1 = new ImageField();
            if1.HeaderText = "Product";
            if1.DataImageUrlField = "ThumbnailPhotoFileName";
            if1.DataImageUrlFormatString = @"..\images\thumbnails\{0}";

            BoundField bf1 = new BoundField();
            bf1.HeaderText = "Name";
            bf1.DataField = "Name";

            BoundField bf2 = new BoundField();
            bf2.HeaderText = "Description";
            bf2.DataField = "Description";

            ButtonField btf1 = new ButtonField();
            btf1.Text = "Add";
            btf1.CommandName = "AddToCart";

            ButtonField btf2 = new ButtonField();
            btf2.Text = "Remove";
            btf2.CommandName = "RemoveFromCart";

            gv.Columns.Add(if1);
            gv.Columns.Add(bf1);
            gv.Columns.Add(bf2);
            gv.Columns.Add(btf1);
            gv.Columns.Add(btf2);

            parent.Controls.Add(new LiteralControl("<br />"));
            parent.Controls.Add(gv);
            parent.Controls.Add(new LiteralControl("<br />"));
            parent.Controls.Add(ds);
        }
    }
}

Vea también

Conceptos

Información general sobre la representación parcial de páginas

Información general sobre el control UpdatePanel

Información general sobre el control Timer