Descripción de las actualizaciones de página parcial con ASP.NET AJAX

por Scott Cate

Posiblemente la característica más visible de las extensiones AJAX de ASP.NET sea la capacidad de realizar actualizaciones parciales o incrementales de página sin realizar una devolución completa al servidor, sin cambios de código ni cambios mínimos de marcado. Las ventajas son amplias: el estado de los elementos multimedia (como Adobe Flash o Windows Media) no cambia, se reducen los costos de ancho de banda y el cliente no experimenta el parpadeo normalmente asociado a un postback.

Introducción

La tecnología ASP.NET de Microsoft aporta un modelo de programación orientado a objetos y controlado por eventos, y lo une con las ventajas del código compilado. Pero su modelo de procesamiento del lado servidor tiene varias desventajas propias de la tecnología:

• Las actualizaciones de página necesitan un recorrido de ida y vuelta al servidor, para lo que se necesita una actualización de la página.
• Los recorridos de ida y vuelta no conservan ningún efecto generado por Javascript ni otras tecnología del lado cliente (como Adobe Flash)
• Durante el postback, los exploradores distintos de Microsoft Internet Explorer no admiten la restauración automática de la posición de desplazamiento. E incluso en Internet Explorer, todavía hay un parpadeo a medida que se actualiza la página.
• Los postback pueden implicar una gran cantidad de ancho de banda, ya que el campo de formulario __VIEWSTATE puede crecer, especialmente cuando se trabaja con controles como GridView o repetidores.
• No hay ningún modelo unificado para acceder a servicios web desde JavaScript u otra tecnología del lado cliente.

Extensiones AJAX para ASP.NET de Microsoft. AJAX (siglas de A synchronous J avaScript A nd X ML) es un marco integrado para proporcionar actualizaciones incrementales de páginas mediante JavaScript multiplataforma, compuesto de código del lado servidor que comprende Microsoft AJAX Framework y un componente de script denominado Biblioteca de scripts de Microsoft AJAX. Las extensiones AJAX de ASP.NET también proporcionan compatibilidad multiplataforma para acceder a servicios web de ASP.NET mediante JavaScript.

En estas notas del producto se examina la funcionalidad de actualizaciones parciales de página de las extensiones AJAX de ASP.NET, lo que incluye el componente ScriptManager, los controles UpdatePanel y UpdateProgress, y los escenarios en los que deben usarse o no.

Estas notas del producto se basan en la versión Beta 2 de Visual Studio 2008 y .NET Framework 3.5, que integra las extensiones AJAX de ASP.NET en la biblioteca de clases base (donde anteriormente era un componente de complemento disponible para ASP.NET 2.0). En estas notas del producto también se supone que usa Visual Studio 2008 y no Visual Web Developer Express Edition; es posible que algunas plantillas de proyecto a las que se hace referencia no estén disponibles para los usuarios de Visual Web Developer Express.

Actualizaciones parciales de página

Posiblemente la característica más visible de las extensiones AJAX de ASP.NET sea la capacidad de realizar actualizaciones parciales o incrementales de página sin realizar una devolución completa al servidor, sin cambios de código ni cambios mínimos de marcado. Las ventajas son amplias: el estado de los elementos multimedia (como Adobe Flash o Windows Media) no cambia, se reducen los costos de ancho de banda y el cliente no experimenta el parpadeo normalmente asociado a un postback.

La capacidad de integrar la representación parcial de páginas se integra en ASP.NET con cambios mínimos en el proyecto.

Tutorial: Integración de la representación parcial en un proyecto existente

1. En Microsoft Visual Studio 2008, cree un proyecto de sitio web de ASP.NET; para ello, vaya a Archivo:> Nuevo-Sitio web de > y seleccione Sitio web de ASP.NET en el cuadro de diálogo. Puede asignarle el nombre que quiera y puede instalarlo en el sistema de archivos o en Internet Information Services (IIS).
2. Aparecerá la página predeterminada en blanco con marcado básico de ASP.NET (un formulario del lado servidor y una directiva @Page). Coloque una etiqueta denominada Label1 y un botón llamado Button1 en la página dentro del elemento de formulario. Puede establecer sus propiedades de texto en lo que quiera.
3. En la vista Diseño, haga doble clic en Button1 para generar un controlador de eventos de código subyacente. Dentro de este controlador de eventos, establezca Label1.Text en ¡Ha hecho clic en el botón! .

Listado 1: Marcado para default.aspx antes de habilitar la representación parcial

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
 <title>Untitled Page</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <div>
 <asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
 <asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
 </div>
 </form>
 </body>
</html>

Listado 2:Código subyacente (recortado) en default.aspx.cs

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "You clicked the button!";
    }
}

1. Presione F5 para iniciar el sitio web. Visual Studio le pedirá que agregue un archivo web.config para habilitar la depuración; hágalo. Al hacer clic en el botón, observe que la página se actualiza para cambiar el texto de la etiqueta y hay un breve parpadeo a medida que se vuelve a dibujar la página.
2. Después de cerrar la ventana del explorador, vuelva a Visual Studio y a la página de marcado. Desplácese hacia abajo en el cuadro de herramientas de Visual Studio y busque la pestaña con la etiqueta Extensiones de AJAX. (Si no tiene esta pestaña porque usa una versión anterior de las extensiones AJAX o Atlas, consulte el tutorial para registrar los elementos del cuadro de herramientas extensiones de AJAX más adelante en estas notas del producto, o bien instale la versión actual con Windows Installer que puede descargar desde el sitio web).

(Haga clic para ver la imagen a tamaño completo)

1. Problema conocido: Si instala Visual Studio 2008 en un equipo que ya tiene Visual Studio 2005 instalado con las extensiones AJAX de ASP.NET 2.0, Visual Studio 2008 importará los elementos del cuadro de herramientas Extensiones de AJAX. Para determinar si este es el caso, examine la información sobre herramientas de los componentes; debe mostrar la versión 3.5.0.0. Si se muestra la versión 2.0.0.0, ha importado los elementos antiguos del cuadro de herramientas y tendrá que importarlos manualmente mediante el cuadro de diálogo Elegir elementos del cuadro de herramientas en Visual Studio. No podrá agregar controles de la versión 2 desde el diseñador.

2. Antes de que comience la etiqueta <asp:Label>, cree una línea de espacios en blanco y haga doble clic en el control UpdatePanel del cuadro de herramientas. Observe que se incluye una nueva directiva @Register en la parte superior de la página, lo que indica que los controles del espacio de nombres System.Web.UI se deben importar mediante el prefijo asp:.

3. Arrastre la etiqueta </asp:UpdatePanel> de cierre más allá del final del elemento Button, de modo que el elemento esté bien formado con los controles Label y Button encapsulados.

4. Después de la etiqueta <asp:UpdatePanel> de apertura, comience a abrir una nueva etiqueta. Observe que IntelliSense le pide dos opciones. En este caso, cree una etiqueta <ContentTemplate>. Asegúrese de encapsular esta etiqueta alrededor de la etiqueta y el botón para que el marcado esté bien formado.

(Haga clic para ver la imagen a tamaño completo)

1. En cualquier parte del elemento <form>, haga doble clic en el elemento ScriptManager del cuadro de herramientas para incluir un control ScriptManager.
2. Edite la etiqueta <asp:ScriptManager> para que incluya el atributo EnablePartialRendering= true.

Listado 3: Marcado para default.aspx con la representación parcial habilitada

<%@ Page Language="C#" AutoEventWireup="true"
 CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
 PublicKeyToken=31bf3856ad364e35"
 Namespace="System.Web.UI" TagPrefix="asp" %>
<!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 runat="server">
 <title>Untitled Page</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <asp:ScriptManager EnablePartialRendering="true"
 ID="ScriptManager1" runat="server"></asp:ScriptManager>
 <div>
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 <asp:Label ID="Label1" runat="server"
 Text="This is a label!"></asp:Label>
 <asp:Button ID="Button1" runat="server"
 Text="Click Me" OnClick="Button1_Click" />
 </ContentTemplate>
 </asp:UpdatePanel>
 </div>
 </form>
 </body>
</html>

1. Abra el archivo web.config. Observe que Visual Studio ha agregado automáticamente una referencia de compilación a System.Web.Extensions.dll.

2. Novedades de Visual Studio 2008: el archivo web.config incluido en las plantillas de proyecto de sitio web de ASP.NET incluye automáticamente todas las referencias necesarias a las extensiones AJAX de ASP.NET e incluye secciones comentadas de información de configuración de las que se pueden quitar las marcas de comentario para habilitar funcionalidad adicional. Visual Studio 2005 tenía plantillas similares cuando se instalaron las extensiones AJAX de ASP.NET 2.0. Pero en Visual Studio 2008, las extensiones de AJAX no se aceptan de forma predeterminada (es decir, se hace referencia a ellas de forma predeterminada, pero se pueden quitar como referencias).

(Haga clic para ver la imagen a tamaño completo)

1. Presione F5 para iniciar el sitio web. Observe cómo no se han necesitado cambios de código fuente para admitir la representación parcial: solo se ha cambiado el marcado.

Al iniciar el sitio web, debería ver que ahora la representación parcial está habilitada, ya que al hacer clic en el botón no habrá ningún parpadeo, ni ningún cambio en la posición de desplazamiento de página (en este ejemplo no se muestra eso). Si examinara el código fuente representado de la página después de hacer clic en el botón, confirmaría que, de hecho, no se ha producido una devolución posterior: el texto de la etiqueta original sigue formando parte del marcado de origen y la etiqueta se ha cambiado mediante JavaScript.

Visual Studio 2008 no parece incluir una plantilla predefinida para un sitio web ASP.NET habilitado para AJAX. Pero esta plantilla estaba disponible en Visual Studio 2005 si se instalaban las extensiones de AJAX de Visual Studio 2005 y ASP.NET 2.0. Por tanto, la configuración de un sitio web y el inicio con la plantilla de sitio web habilitado para AJAX probablemente será aún más fácil, ya que la plantilla debe incluir un archivo web.config totalmente configurado (que admite todas las extensiones AJAX de ASP.NET, incluido el acceso a servicios web y la serialización JSON: notación de objetos JavaScript) e incluye elementos UpdatePanel y ContentTemplate dentro de la página principal de Web Forms de manera predeterminada. Habilitar la representación parcial con esta página predeterminada es tan simple como volver a visitar el paso 10 de este tutorial y colocar controles en la página.

ScriptManager (control)

Referencia del control ScriptManager

Propiedades habilitadas para marcado:

Nombre de la propiedad	Tipo	Descripción
AllowCustomErrors-Redirect	Booleano	Especifica si se va a usar la sección de error personalizada del archivo web.config para controlar los errores.
AsyncPostBackError-Message	Cadena	Obtiene o establece el mensaje de error enviado al cliente si se produce un error.
AsyncPostBack-Timeout	Int32	Obtiene o establece la cantidad predeterminada de tiempo que un cliente debe esperar a que se complete la solicitud asincrónica.
EnableScript-Globalization	Booleano	Obtiene o establece si la globalización de scripts está habilitada.
EnableScript-Localization	Booleano	Obtiene o establece si la localización de scripts está habilitada.
ScriptLoadTimeout	Int32	Determina el número de segundos permitidos para cargar scripts en el cliente
ScriptMode	Enumeración (Auto, Debug, Release, Inherit)	Obtiene o establece si se van a representar versiones de versión de scripts
scriptPath	Cadena	Obtiene o establece la ruta de acceso raíz a la ubicación de los archivos de script que se enviarán al cliente.

Propiedades de solo código:

Nombre de la propiedad	Tipo	Descripción
AuthenticationService	AuthenticationService-Manager	Obtiene detalles sobre el proxy del servicio de autenticación de ASP.NET que se enviará al cliente.
IsDebuggingEnabled	Booleano	Obtiene si el script y la depuración de código están habilitados.
IsInAsyncPostback	Booleano	Obtiene si la página se encuentra actualmente en una solicitud posterior asincrónica.
ProfileService	ProfileService-Manager	Obtiene detalles sobre el proxy del servicio de generación de perfiles de ASP.NET que se enviará al cliente.
Scripts	Collection<Referencia de script>	Obtiene una colección de referencias de script que se enviarán al cliente.
Servicios	Collection<Referencia del servicio>	Obtiene una colección de referencias de proxy de servicio web que se enviarán al cliente.
SupportsPartialRendering	Booleano	Obtiene si el cliente actual admite la representación parcial. Si esta propiedad devuelve false, todas las solicitudes de página serán postbacks estándar.

Métodos de código públicos:

Nombre de método	Tipo	Descripción
SetFocus(string)	No válido	Establece el foco del cliente en un control determinado cuando se ha completado la solicitud.

Descendientes de marcado:

Tag	Descripción
<AuthenticationService>	Proporciona detalles sobre el proxy al servicio de autenticación de ASP.NET.
<ProfileService>	Proporciona detalles sobre el proxy al servicio de generación de perfiles de ASP.NET.
<Scripts>	Proporciona referencias de script adicionales.
<asp:ScriptReference>	Indica una referencia de script específica.
<Servicio>	Proporciona referencias de servicio web adicionales que tendrán clases de proxy generadas.
<asp:ServiceReference>	Indica una referencia de servicio web específica.

El control ScriptManager es el núcleo esencial para las extensiones AJAX de ASP.NET. Proporciona acceso a la biblioteca de scripts (incluido el amplio sistema de tipos de script del lado cliente), admite la representación parcial y proporciona una amplia compatibilidad con servicios adicionales de ASP.NET (como los de autenticación y generación de perfiles, pero también otros servicios web). El control ScriptManager también proporciona compatibilidad con la globalización y localización para los scripts de cliente.

Scripts alternativos y complementarios

Aunque las extensiones AJAX de Microsoft ASP.NET 2.0 incluyen todo el código de script en las ediciones de depuración y versión como recursos insertados en los ensamblados a los que se hace referencia, los desarrolladores pueden redirigir ScriptManager a archivos de script personalizados, así como registrar scripts necesarios adicionales.

A fin de invalidar el enlace predeterminado para los scripts incluidos normalmente (como los que admiten el espacio de nombres Sys.WebForms y el sistema de escritura personalizado) puede registrar el evento ResolveScriptReference de la clase ScriptManager. Cuando se llama a este método, el controlador de eventos tiene la oportunidad de cambiar la ruta de acceso al archivo de script en cuestión; después, el administrador de scripts enviará una copia diferente o personalizada de los scripts al cliente.

Además, las referencias de script (representadas por la clase ScriptReference) se pueden incluir mediante programación o mediante marcado. Para ello, modifique mediante programación la colección ScriptManager.Scripts o incluya etiquetas <asp:ScriptReference> en la etiqueta <Scripts>, que es un elemento secundario de primer nivel del control ScriptManager.

Control de errores personalizado para instancias de UpdatePanel

Aunque los desencadenadores especificados por los controles UpdatePanel controlan las actualizaciones, la compatibilidad con el control de errores y los mensajes de error personalizados se controlan mediante la instancia de control ScriptManager de una página. Para esto, se expone un evento, AsyncPostBackError, a la página que después puede proporcionar lógica de control de excepciones personalizada.

Al consumir el evento AsyncPostBackError, puede especificar la propiedad AsyncPostBackErrorMessage, que luego hace que se genere un cuadro de alerta al finalizar la devolución de llamada.

La personalización del lado cliente también es posible en lugar de usar el cuadro de alerta predeterminado; por ejemplo, es posible que quiera mostrar un elemento <div> personalizado en lugar del cuadro de diálogo modal del explorador predeterminado. En este caso, puede controlar el error en el script de cliente:

Listado 5: Script del lado cliente para mostrar errores personalizados

<script type= text/javascript >
 <!--
 Sys.WebForms.PageRequestManager.getInstance().add_EndRequest(Request_End);
 function Request_End(sender, args)
 {
 if (args.get_error() != undefined)
 {
 var errorMessage =  ;
 if (args.get_response().get_statusCode() ==  200 )
 {
 errorMessage = args.get_error().message;
 }
 else
 {
 // the server wasn't the problem...
 errorMessage =  An unknown error occurred... ;
 }
 // do something with the errorMessage here.
 // now make sure the system knows we handled the error.
 args.set_errorHandled(true);
 }
 }
 // -->
</script>

Simplemente, el script anterior registra una devolución de llamada con el entorno de ejecución de AJAX del lado cliente para cuando se ha completado la solicitud asincrónica. Después, comprueba si se ha notificado un error y, en ese caso, procesa sus detalles, para por último indicarle al tiempo de ejecución que el error se ha controlado en el script personalizado.

Compatibilidad con la globalización y la localización

El control ScriptManager proporciona una amplia compatibilidad con la localización de cadenas de script y componentes de la interfaz de usuario; pero ese tema está fuera del ámbito de las notas del producto. Para más información, vea las notas del producto Compatibilidad con la globalización en extensiones AJAX de ASP.NET.

UpdatePanel (control)

Referencia del control UpdatePanel

Propiedades habilitadas para marcado:

Nombre de la propiedad	Tipo	Descripción
ChildrenAsTriggers	bool	Especifica si los controles secundarios invocan automáticamente la actualización durante el postback.
RenderMode	enum (Block, Inline)	Especifica la forma en que se presentará visualmente el contenido.
UpdateMode	enum (Always, Conditional)	Especifica si UpdatePanel siempre se actualiza durante una representación parcial o si solo se actualiza cuando se alcanza un desencadenador.

Propiedades de solo código:

Nombre de la propiedad	Tipo	Descripción
IsInPartialRendering	bool	Obtiene si UpdatePanel admite la representación parcial de la solicitud actual.
ContentTemplate	ITemplate	Obtiene la plantilla de marcado para la solicitud de actualización.
ContentTemplateContainer	Control	Obtiene la plantilla mediante programación para la solicitud de actualización.
Desencadenadores	UpdatePanel- TriggerCollection	Obtiene la lista de desencadenadores asociados al control UpdatePanel actual.

Métodos de código públicos:

Nombre de método	Tipo	Descripción
Update()	No válido	Actualiza el control UpdatePanel especificado mediante programación. Permite que una solicitud de servidor desencadene una representación parcial de un control UpdatePanel no registrado de otro modo.

Descendientes de marcado:

Tag	Descripción
<ContentTemplate>	Especifica el marcado que se va a usar para representar el resultado de representación parcial. Elemento secundario de <asp:UpdatePanel>.
<Desencadenadores>	Especifica una colección de n controles asociados a la actualización de este control UpdatePanel. Elemento secundario de <asp:UpdatePanel>.
<asp:AsyncPostBackTrigger>	Especifica un desencadenador que invoca una representación parcial de página para el elemento UpdatePanel especificado. Esto puede ser o no un control como descendiente de la instancia de UpdatePanel en cuestión. Granular al nombre del evento. Elemento secundario de <desencadenadores>.
<asp:PostBackTrigger>	Especifica un control que hace que se actualice toda la página. Esto puede ser o no un control como descendiente de la instancia de UpdatePanel en cuestión. Granular al objeto. Elemento secundario de <desencadenadores>.

UpdatePanel es el control que delimita el contenido del lado servidor que formará parte de la funcionalidad de representación parcial de las extensiones de AJAX. No hay ningún límite para el número de controles UpdatePanel que pueden estar en una página y se pueden anidar. Cada control UpdatePanel está aislado, para que cada uno pueda funcionar de forma independiente (puede tener dos controles UpdatePanel en ejecución al mismo tiempo, que representen diferentes partes de la página, independientemente del postback de la página).

El control UpdatePanel se ocupa principalmente de los desencadenadores de control, de manera predeterminada, cualquier control contenido dentro de ContentTemplate de UpdatePanel que crea un postback se registra como desencadenador para UpdatePanel. Esto significa que UpdatePanel puede trabajar con los controles enlazados a datos predeterminados (como GridView), con controles de usuario y que se puede programar en script.

De manera predeterminada, cuando se desencadena una representación parcial de la página, se actualizarán todos los controles UpdatePanel de la página, independientemente de si los controles UpdatePanel han definido desencadenadores para esa acción o no. Por ejemplo, si un control UpdatePanel define un control Button y se hace clic en ese control Button, todos los controles UpdatePanel de esa página se actualizarán de forma predeterminada. Esto se debe a que, de manera predeterminada, la propiedad UpdateMode de UpdatePanel se establece en Always. Como alternativa, puede establecer la propiedad UpdateMode en Conditional, lo que significa que UpdatePanel solo se actualizará si se alcanza un desencadenador específico.

Notas de controles personalizados

Se puede agregar una instancia de UpdatePanel a cualquier control de usuario o personalizado; pero la página en la que se incluyen estos controles también debe incluir un control ScriptManager con la propiedad EnablePartialRendering establecida en true.

Una manera en la que puede tener en cuenta esto al usar controles personalizados web es invalidar el método protegido CreateChildControls() de la clase CompositeControl. Al hacerlo, puede insertar una instancia de UpdatePanel entre los elementos secundarios del control y el mundo exterior si determina que la página admite la representación parcial; de lo contrario, simplemente puede colocar los controles secundarios en una instancia de Control de contenedor.

Consideraciones sobre UpdatePanel

UpdatePanel funciona como una especie de caja negra: encapsula postback de ASP.NET dentro del contexto de una instancia de XMLHttpRequest de JavaScript. Pero hay importantes consideraciones de rendimiento que se deben tener en cuenta, tanto en términos de comportamiento como de velocidad. Para comprender cómo funciona UpdatePanel, y que pueda decidir mejor cuándo es adecuado usarlo, debe examinar el intercambio de AJAX. En el ejemplo siguiente se usa un sitio existente y Mozilla Firefox con la extensión Firebug (Firebug captura datos de XMLHttpRequest).

Imagine un formulario que, entre otras cosas, tiene un cuadro de texto de código postal que se supone que rellena un campo de ciudad y estado en un formulario o control. En última instancia, este formulario recopila información de pertenencia, incluido el nombre, la dirección y la información de contacto de un usuario. Hay muchas consideraciones de diseño que se deben tener en cuenta, en función de los requisitos de un proyecto específico.

(Haga clic para ver la imagen a tamaño completo)

(Haga clic para ver la imagen a tamaño completo)

En la iteración original de esta aplicación, se ha creado un control que incorporaba la totalidad de los datos de registro de usuario, incluido el código postal, la ciudad y el estado. El control completo se encapsulaba dentro de una instancia de UpdatePanel y se colocaba en un formulario web. Cuando el usuario escribe el código postal, UpdatePanel detecta el evento (el evento TextChanged correspondiente en el back-end, ya sea mediante la especificación de desencadenadores o con la propiedad ChildrenAsTriggers establecida en true). AJAX publica todos los campos dentro de UpdatePanel, tal como los captura FireBug (vea el diagrama de la derecha).

Como indica la captura de pantalla, los valores de todos los controles de UpdatePanel se entregan (en este caso, todos están vacíos), así como el campo ViewState. En total, se envían más de 9 kb de datos, cuando en realidad solo se necesitaban 5 bytes para realizar esta solicitud concreta. La respuesta está aún más sobredimensionada: en total, se envían 57 kb al cliente, simplemente para actualizar un campo de texto y un campo desplegable.

También puede interesarle ver cómo AJAX de ASP.NET actualiza la presentación. La parte de respuesta de la solicitud de actualización de UpdatePanel se muestra en la pantalla de la consola de Firebug de la izquierda; es una cadena delimitada por barras especialmente formulada que divide el script de cliente y, después, se vuelve a ensamblar en la página. En concreto, AJAX de ASP.NET establece la propiedad innerHTML del elemento HTML en el cliente que representa el control UpdatePanel. A medida que el explorador vuelve a generar el DOM, hay un ligero retraso, en función de la cantidad de información que se debe procesar.

La regeneración del DOM desencadena una serie de problemas adicionales:

(Haga clic para ver la imagen a tamaño completo)

• Si el elemento HTML con el foco está dentro de UpdatePanel, perderá el foco. Por tanto, para los usuarios que hayan presionado la tecla Tab para salir del cuadro de texto de código postal, el siguiente destino habría sido el cuadro de texto Ciudad. Pero una vez que UpdatePanel ha actualizado la pantalla, el formulario ya no tendrá el foco y al presionar Tab se habría empezado a resaltar los elementos con el foco (como los vínculos).
• Si hay algún tipo de script personalizado del lado cliente en uso para acceder a los elementos del DOM, las referencias persistentes por las funciones pueden quedar inactivas después de un postback parcial.

Los controles UpdatePanel no están diseñados para ser soluciones integrales. En su lugar, proporcionan una solución rápida para determinadas situaciones, como la creación de prototipos, actualizaciones de control pequeñas y proporcionan una interfaz familiar para los desarrolladores de ASP.NET que podrían estar familiarizados con el modelo de objetos de .NET, pero menos con el DOM. Hay una serie de alternativas que pueden dar lugar a un mejor rendimiento, en función del escenario de la aplicación:

• Considere la posibilidad de usar PageMethods y JSON (notación de objetos JavaScript) que permite al desarrollador invocar métodos estáticos en una página como si se invocara una llamada de servicio web. Como los métodos son estáticos, no es necesario ningún estado; el autor de la llamada del script proporciona los parámetros y el resultado se devuelve de forma asincrónica.
• Considere la posibilidad de usar un servicio web y JSON si es necesario usar un solo control en varios lugares de una aplicación. Como antes, no se necesita un trabajo muy especial y funciona de forma asincrónica.

La incorporación de la funcionalidad mediante servicios web o métodos de página también tiene desventajas. En primer lugar, los desarrolladores de ASP.NET suelen crear pequeños componentes de funcionalidad en controles de usuario (archivos .ascx). Los métodos de página no se pueden hospedar en estos archivos; se deben hospedar dentro de la clase de página .aspx real. Los servicios web, de forma similar, se deben hospedar dentro de la clase .asmx. En función de la aplicación, esta arquitectura puede infringir el principio de responsabilidad única, por el que la funcionalidad de un solo componente ahora se distribuye entre dos o más componentes físicos que pueden tener poco o ningún vínculo cohesivo.

Por último, si en una aplicación es necesario usar controles UpdatePanel, las instrucciones siguientes deben ayudar con la solución de problemas y el mantenimiento.

• Anide los controles UpdatePanel lo menos posible, no solo dentro de las unidades, sino también entre unidades de código. Por ejemplo, tener una instancia de UpdatePanel en una página que encapsula un control, mientras que ese control también contiene una instancia de UpdatePanel, que contiene otro control que contiene una instancia de UpdatePanel, es anidamiento entre unidades. Esto ayuda saber con claridad qué elementos se deben actualizar y evita actualizaciones inesperadas a controles UpdatePanel secundarios.
• Mantenga la propiedad ChildrenAsTriggers establecida en false y establezca explícitamente los eventos desencadenadores. El uso de la colección <Triggers> es una manera mucho más clara de controlar eventos y puede evitar un comportamiento inesperado, lo que ayuda con las tareas de mantenimiento y obliga a un desarrollador a optar por un evento.
• Use la unidad más pequeña posible para lograr la funcionalidad. Como se ha indicado en la explicación del servicio de código postal, una encapsulación mínima reduce el tiempo al servidor, el procesamiento total y la superficie del intercambio entre cliente y servidor, lo que mejora el rendimiento.

UpdateProgress (control)

Referencia del control UpdateProgress

Propiedades habilitadas para marcado:

Nombre de la propiedad	Tipo	Descripción
AssociatedUpdate-PanelID	Cadena	Especifica el identificador del control UpdatePanel sobre el que debe informar este control UpdateProgress.
DisplayAfter	Int	Especifica el tiempo de espera en milisegundos antes de que se muestre este control después de que se inicie la solicitud asincrónica.
DynamicLayout	bool	Especifica si el progreso se representa dinámicamente.

Descendientes de marcado:

Tag	Descripción
<ProgressTemplate>	Contiene el conjunto de plantillas de control para el contenido que se mostrará con este control.

El control UpdateProgress proporciona una medida de comentarios para mantener el interés de los usuarios mientras realiza el trabajo necesario para transportarlo al servidor. Esto puede ayudar a los usuarios a saber que están haciendo algo aunque no sea evidente, especialmente porque la mayoría están acostumbrados a que se actualice la página y ver el resaltado de la barra de estado.

Como nota, los controles UpdateProgress pueden aparecer en cualquier lugar de una jerarquía de páginas. Pero en los casos en los que se inicia un postback parcial desde un elemento UpdatePanel secundario (donde una instancia de UpdatePanel está anidada dentro de otra), los postbacks que desencadenan el elemento UpdatePanel secundario harán que las plantillas UpdateProgress se muestren para el elemento UpdatePanel secundario, así como para el primario. Pero si el desencadenador es un elemento secundario directo del control UpdatePanel primario, solo se mostrarán las plantillas UpdateProgress asociadas al elemento primario.

Resumen

Las extensiones AJAX de Microsoft ASP.NET son productos sofisticados diseñados para ayudar a que el contenido web sea más accesible y proporcionar una experiencia del usuario más completa a las aplicaciones web. Como parte de las extensiones AJAX de ASP.NET, los controles de representación de páginas parciales, incluidos ScriptManager, UpdatePanel y UpdateProgress son algunos de los componentes más visibles del kit de herramientas.

El componente ScriptManager integra el aprovisionamiento de JavaScript de cliente para las extensiones, y permite que los distintos componentes del lado servidor y cliente funcionen de manera conjunta con una inversión de desarrollo mínima.

El control UpdatePanel es el cuadro mágico evidente: el marcado dentro de UpdatePanel puede tener código subyacente del lado servidor y no desencadenar una actualización de página. Los controles UpdatePanel se pueden anidar y pueden depender de los controles de otras instancias de UpdatePanel. De manera predeterminada, las instancias de UpdatePanel controlan los postbacks invocados por sus controles descendientes, aunque esta funcionalidad se puede ajustar de manera precisa, ya sea mediante declaración o mediante programación.

Al usar el control UpdatePanel, los desarrolladores deben tener en cuenta el posible impacto en el rendimiento. Entre las posibles alternativas se incluyen los servicios web y los métodos de página, aunque se debe tener en cuenta el diseño de la aplicación.

El control UpdateProgress permite al usuario saber que no se le ignora y que la solicitud en segundo plano se produce mientras la página no hace nada para responder a la entrada del usuario. También incluye la capacidad de anular los resultados de representación parcial.

De manera conjunta, estas herramientas ayudan a crear una experiencia del usuario enriquecida y sin problemas, y hacen que el trabajo en el servidor sea menos aparente para el usuario y el flujo de trabajo se interrumpa menos.

Biografía

Scott Cate ha trabajado con las tecnologías web de Microsoft desde 1997 y es el presidente de myKB.com (www.myKB.com) donde se especializa en escribir aplicaciones ASP.NET basadas en soluciones de software de Knowledge Base. Puede ponerse en contacto con Scott por correo electrónico en scott.cate@myKB.com o en su blog, ScottCate.com

Siguiente