Bases del control UpdateProgress de Atlas

Cuando utilizamos atlas para habilitar un comportamiento AJAX con la finalidad de mejorar la experiencia de usuario, la comunicación con el servidor se hace a través de XmlHttp el cual no infiere con el navegador en absoluto para mostrar alguna notificación o icono que notifique el comportamiento de la pagina. El uso de notificaciones que describan lo que esta sucediendo cuando existe algún tipo de tardanza a la hora de que Atlas este estableciendo una comunicación con el servidor para cargar datos y actualizar una porción de la pagina es un aspecto que también debemos de cuidar para que cuando el servidor tarde en responder y no lo haga instantáneamente el usuario final no piense que su acción no se efectuo.

El control “UpgradeProgress” de Atlas ofrece la posibilidad de mostrar una especie de indicador de progreso en nuestras páginas ASP.NET 2.0. Este control no está visible en la pagina cuando es cargada por primera vez en el navegador, pero para cuando se haga cualquier invocación asincrónica muestra automáticamente su contenido hasta que se reciba una respuesta del servidor o se cancele la petición.

Entonces, continuando con el mismo código del post sobre UpdatePanel que utilizamos anteriormente, veamos como configurar un control UpgradeProgress para nuestro UpdatePanel.

<atlas:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:GridView

ID="GridView1"

runat="server"

AllowPaging="True"

AllowSorting="True"

DataSourceID="SqlDataSource1">

</asp:GridView>

<atlas:UpdateProgress ID="UpdateProgress1" runat="server">

<ProgressTemplate>

<b>Cargando datos…</b>

</ProgressTemplate>

</atlas:UpdateProgress>

</ContentTemplate>

</atlas:UpdatePanel>

Con esta declaración tendremos un comportamiento interesante. Cuando en nuestro control GridView seleccionemos el ordenado de una columna en particular dando clic sobre el link de la columna, en ese momento se dispara una operación asincrónica al servidor para cargar los datos ordenados y justamente mientras eso sucede se presenta justo debajo de nuestro GridView una leyenda que dice “Cargando datos…”. Cabe mencionar que dentro de nuestra sección “<ProgressTemplate>” podemos escribir cualquier tipo de código HTML que muestra una mejor interface, iconos o imágenes.

updateprogress01.jpg 

Leave a Reply

Your email address will not be published. Required fields are marked *