ASP.NET: Utilización de Ajax - UpdatePanel

Para evitar devoluciones de datos completos (full postbacks) en las páginas ASPX y actualizar sólo una parte de la página, se puede utilizar el control de servidor UpdatePanel. Para que este control pueda operar correctamente, también es necesario añadir un control ScriptManager. Si vas a utilizar Ajax en muchas de las páginas ASPX de tu sitio web, deberías colocar el control ScriptManager en la página maestra para que esté disponible en todas las páginas que están basadas en dicha página maestra.

Solamente puedes tener un solo ScriptManager por página, por lo que si se agrega uno a una página maestra, no se puede agregar otro a una página de contenido. Para acceder desde una página de contenido a un control ScriptManager definido en una página maestra, se puede utilizar el control de servidor ScriptManagerProxy. Puedes encontrar estos controles en la categoría "Extensiones Ajax" del cuadro de herramientas.

El control UpdatePanel

El control UpdatePanel es un componente clave en la creación de páginas sin parpadeos (flicker-free pages). En su aplicación más básica, sólo tienes que envolver con el control el contenido que deseas actualizar, agregar un ScriptManager a la página y ya está. Cada vez que uno de los controles dentro del UpdatePanel provoca una devolución de datos del servidor, sólo se actualiza el contenido dentro de ese UpdatePanel.

Para ver cuáles son los problemas que el control UpdatePanel resuelve y cómo se comporta en una página del cliente, sigue los pasos del siguiente ejemplo:

• Crea un nuevo Web Form llamado UpdatePanel.aspx.
• Cambia el Web Form creado a la vista de Diseño y arrastra un control Label y un control Button, ambos desde el  Cuadro de Herramientas.
• Borra la propiedad "Text" del control Label para dejarla vacía.
• Pulsa F7 para ver el código fuente de la página y añade el siguiente código dentro del Page_Load:

protected void Page_Load(object sender, EventArgs e)
{
    Label1.Text = System.DateTime.Now.ToString();
}

• Guarda todos los cambios y pulsa Ctrl + F5 para abrir la página en el navegador. La etiqueta muestra la fecha y hora actuales. Haz clic en el control Button varias veces. Si te das cuenta, cada vez que  haces clic en el botón, la página parpadea y se vuelve a dibujar, mostrando la fecha y hora actuales. Ahora echa un vistazo al código HTML que se utiliza en el navegador (haz clic en la página en el navegador y selecciona Ver código fuente). Observa cómo la página contiene un elemento <span> con la fecha y hora que se envía desde el servidor.
• Cierra el navegador, vuelve a Visual Studio y cambia la página UpdatePanel.aspx a la vista de Código. Introduce algo de espacio justo antes del control Label y a continuación teclea UpdatePanel y presiona la tecla Tab. Visual Studio
  inserta el código para el UpdatePanel y <ContentTemplate> por ti.
• A continuación, corta tanto las etiquetas de cierre </ContentTemplate> y </UpdatePanel> y pégalas debajo del botón que has creado anteriormente. Tu código debería ser similar a:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
      <asp:Label ID="Label1" runat="server"></asp:Label>
      <asp:Button ID="Button1" runat="server" Text="Button" />
   </ContentTemplate>
</asp:UpdatePanel>

• Justo antes de la etiqueta de apertura del UpdatePanel, arrastra un control ScriptManager de la categoría "Extensiones AJAX" del cuadro de herramientas. El código deberá ser similar al siguiente:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">

• Por último, guarda los cambios y pulsa Ctrl + F5 para abrir la página en el navegador de nuevo. Haz clic en el botón varias veces para actualizar la etiqueta con la fecha y la hora actuales. Si te fijas, ahora ya no se produce ningún parpadeo en la página, y sólo la etiqueta (Label) se actualiza en la página para mostrar la fecha y hora actuales. Si vuelves a ver el código fuente de la página en el navegador, se ve que el elemento <span> contiene la fecha y hora de la primera solicitud realizada. Los cambios que ha sufrido la etiqueta Label como consecuencia de los clics del botón no son parte del código fuente HTML porque han sido añadidos dinámicamente por el ASP.NET Ajax Framework al HTML interno del navegador.

Fuente: Beginning ASP.NET 4: in C# and VB