Usar el control UpdatePanel de ASP.NET con controles de usuario
Actualización: noviembre 2007
Puede habilitar las actualizaciones parciales de página en los controles de usuario de la misma forma que en otros controles de una página web. Debe agregar un control ScriptManager a la página y establecer su propiedad EnablePartialRendering en true. El control ScriptManager administrará las actualizaciones parciales de página de los controles UpdatePanel incluidos directamente en la página web ASP.NET o dentro de un control de usuario de la página.
En un escenario simple, puede incluir controles de usuario dentro de un panel de actualización y se actualizarán cuando se actualice el contenido del panel de actualización. También puede incluir un control UpdatePanel dentro de un control de usuario para que el control de usuario admita las actualizaciones parciales de página. Sin embargo, en este caso, los desarrolladores de páginas que agregan el control de usuario a una página deben agregar explícitamente un control ScriptManager en la página web del host.
Si agrega controles mediante programación a su control de usuario, puede determinar si existe un control ScriptManager en la página. A continuación, puede asegurarse de que la propiedad EnablePartialRendering se ha establecido en true antes de agregar un control UpdatePanel al control de usuario. Para obtener un ejemplo que muestra cómo esto se lleva a cabo en un control de servidor web, vea Usar el control UpdatePanel de ASP.NET con controles enlazados a datos.
Podría tener varios controles de usuario en una página web que desea actualizar de forma independiente. En este caso, puede incluir uno o más controles UpdatePanel dentro del control de usuario y extender el control de usuario para exponer públicamente las funciones de los controles UpdatePanel secundarios.
El ejemplo de este tutorial incluye dos controles de usuario cuyo contenido está dentro de los controles UpdatePanel. Cada control de usuario expone la propiedad UpdateMode del control UpdatePanel interno de forma que la propiedad se pueda establecer explícitamente para cada control de usuario. Cada control de usuario también expone el método Update del control UpdatePanel interno para que un origen externo pueda actualizar explícitamente el contenido del control de usuario.
Crear una página web ASP.NET con varios controles de usuario
El ejemplo de este tutorial crea una página de detalle maestra de información de empleado a partir de la base de datos de ejemplo de AdventureWorks. Un control de usuario usa un control GridView para mostrar una lista de nombres del empleado y admitir la selección, paginación y ordenación. Otro control de usuario usa un control DetailsView para mostrar los detalles de un empleado seleccionado.
El control de usuario de la lista de empleados almacena el identificador del empleado seleccionado en el estado de vista. Se asegura de que sólo se resalta el empleado seleccionado en el control GridView, independientemente de la página de datos que se muestre o de cómo se haya ordenado la lista. El control de usuario también se asegura de que el control de usuario del detalle de empleado sólo se muestra cuando el empleado seleccionado está visible en la lista de empleados.
En el ejemplo, el control de usuario del detalle de empleado contiene un control UpdatePanel. El panel de actualización se actualiza cuando se selecciona un empleado. También se actualiza cuando el usuario se desplaza fuera de la página del control GridView que muestra al empleado seleccionado. Si el usuario ve una página del control GridView que no incluye al empleado seleccionado, no se muestra el control de usuario del detalle de empleado y el panel de actualización no se actualiza.
Incluir un control UpdatePanel en el control de usuario
El primer paso para crear los controles de usuario que se actualizan de forma independiente consiste en incluir un control UpdatePanel en el control de usuario, como se muestra en el ejemplo siguiente.
<%@ Control Language="VB" AutoEventWireup="true" CodeFile="EmployeeInfo.ascx.vb" Inherits="EmployeeInfo" %>
<asp:UpdatePanel ID="EmployeeInfoUpdatePanel" >
<ContentTemplate>
<asp:Label ID="LastUpdatedLabel" ></asp:Label>
<asp:DetailsView ID="EmployeeDetailsView" Height="50px" Width="410px" AutoGenerateRows="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataSourceID="EmployeeDataSource" ForeColor="Black" GridLines="None">
<FooterStyle BackColor="Tan" />
<EditRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<Fields>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
<asp:BoundField DataField="EmailAddress" HeaderText="E-mail Address" SortExpression="EmailAddress" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
<asp:BoundField DataField="HireDate" HeaderText="Hire Date" SortExpression="HireDate" />
<asp:BoundField DataField="VacationHours" HeaderText="Vacation Hours" SortExpression="VacationHours" />
<asp:BoundField DataField="SickLeaveHours" HeaderText="Sick Leave Hours" SortExpression="SickLeaveHours" />
</Fields>
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:DetailsView>
<asp:SqlDataSource ID="EmployeeDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT Person.Contact.LastName, Person.Contact.FirstName, Person.Contact.EmailAddress, Person.Contact.Phone, HumanResources.Employee.HireDate, HumanResources.Employee.VacationHours, HumanResources.Employee.SickLeaveHours FROM Person.Contact INNER JOIN HumanResources.Employee ON Person.Contact.ContactID = HumanResources.Employee.ContactID WHERE HumanResources.Employee.EmployeeID = @SelectedEmployeeID">
<SelectParameters>
<asp:Parameter Name="SelectedEmployeeID" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="EmployeeInfo.ascx.cs" Inherits="EmployeeInfo" %>
<asp:UpdatePanel ID="EmployeeInfoUpdatePanel" >
<ContentTemplate>
<asp:Label ID="LastUpdatedLabel" ></asp:Label>
<asp:DetailsView ID="EmployeeDetailsView" Height="50px" Width="410px" AutoGenerateRows="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataSourceID="EmployeeDataSource" ForeColor="Black" GridLines="None">
<FooterStyle BackColor="Tan" />
<EditRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<Fields>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
<asp:BoundField DataField="EmailAddress" HeaderText="E-mail Address" SortExpression="EmailAddress" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
<asp:BoundField DataField="HireDate" HeaderText="Hire Date" SortExpression="HireDate" />
<asp:BoundField DataField="VacationHours" HeaderText="Vacation Hours" SortExpression="VacationHours" />
<asp:BoundField DataField="SickLeaveHours" HeaderText="Sick Leave Hours" SortExpression="SickLeaveHours" />
</Fields>
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:DetailsView>
<asp:SqlDataSource ID="EmployeeDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT Person.Contact.LastName, Person.Contact.FirstName, Person.Contact.EmailAddress, Person.Contact.Phone, HumanResources.Employee.HireDate, HumanResources.Employee.VacationHours, HumanResources.Employee.SickLeaveHours FROM Person.Contact INNER JOIN HumanResources.Employee ON Person.Contact.ContactID = HumanResources.Employee.ContactID WHERE HumanResources.Employee.EmployeeID = @SelectedEmployeeID">
<SelectParameters>
<asp:Parameter Name="SelectedEmployeeID" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
Exponer públicamente las capacidades del control UpdatePanel
El paso siguiente consiste en exponer la propiedad UpdateMode y el método Update del control UpdatePanel interno. Esto permite establecer propiedades del control UpdatePanel interno desde fuera del control de usuario, como se muestra en el ejemplo siguiente.
Public Property UpdateMode() As UpdatePanelUpdateMode
Get
Return Me.EmployeeInfoUpdatePanel.UpdateMode
End Get
Set(ByVal value As UpdatePanelUpdateMode)
Me.EmployeeInfoUpdatePanel.UpdateMode = value
End Set
End Property
Public Sub Update()
Me.EmployeeInfoUpdatePanel.Update()
End Sub
public UpdatePanelUpdateMode UpdateMode
{
get { return this.EmployeeInfoUpdatePanel.UpdateMode; }
set { this.EmployeeInfoUpdatePanel.UpdateMode = value; }
}
public void Update()
{
this.EmployeeInfoUpdatePanel.Update();
}
Agregar los controles de usuario a la página web
Ahora puede agregar los controles de usuario a una página web ASP.NET y establecer mediante declaración la propiedad UpdateMode del control UpdatePanel interno. En este ejemplo, la propiedad UpdateMode de ambos controles de usuario se establece en Conditional. Esto significa que sólo se actualizan cuando se solicita una actualización explícitamente, como se muestra en el ejemplo siguiente.
<asp:ScriptManager ID="ScriptManager1"
EnablePartialRendering="true" />
<table>
<tr>
<td valign="top">
<uc2:EmployeeList ID="EmployeeList1" UpdateMode="Conditional"
OnSelectedIndexChanged="EmployeeList1_OnSelectedIndexChanged" />
</td>
<td valign="top">
<uc1:EmployeeInfo ID="EmployeeInfo1" UpdateMode="Conditional" />
</td>
</tr>
</table>
<asp:ScriptManager ID="ScriptManager1"
EnablePartialRendering="true" />
<table>
<tr>
<td valign="top">
<uc2:EmployeeList ID="EmployeeList1" UpdateMode="Conditional"
OnSelectedIndexChanged="EmployeeList1_OnSelectedIndexChanged" />
</td>
<td valign="top">
<uc1:EmployeeInfo ID="EmployeeInfo1" UpdateMode="Conditional" />
</td>
</tr>
</table>
Agregar código para actualizar los controles de usuario
Para actualizar de forma explícita el control de usuario, se llama al método Update del control UpdatePanel interno. El ejemplo siguiente incluye un controlador para el evento SelectedIndexChanged del control de usuario de la lista de empleados, que se provoca cuando se provoca el evento SelectedIndexChanged del control GridView interno. El código del controlador actualiza explícitamente el control de usuario de detalles de empleado si se selecciona un empleado o si la página actual de la lista de empleados ya no muestra al empleado seleccionado.
protected void EmployeeList1_OnSelectedIndexChanged(object sender, EventArgs e)
{
if (EmployeeList1.SelectedIndex != -1)
EmployeeInfo1.EmployeeID = EmployeeList1.EmployeeID;
else
EmployeeInfo1.EmployeeID = 0;
EmployeeInfo1.Update();
}
protected void EmployeeList1_OnSelectedIndexChanged(object sender, EventArgs e)
{
if (EmployeeList1.SelectedIndex != -1)
EmployeeInfo1.EmployeeID = EmployeeList1.EmployeeID;
else
EmployeeInfo1.EmployeeID = 0;
EmployeeInfo1.Update();
}
Vea también
Conceptos
Información general sobre el control UpdatePanel
Información general sobre los controles de usuario ASP.NET