Precarga en ASP.NET con AJAX (1)

mayo 2, 2008 at 6:49 am 6 comentarios

A todos los que desarrollamos en entorno Web con Asp.Net se nos ha presentado en algún momento la necesidad de mostrar una precarga en mientras se realizaba alguna operación. Por ejemplo, mientras se llena un Datagrid. Desde la versión 2.0 de Asp.Net esto es más fácil gracias a AJAX.

Que es AJAX:

AJAX (Asynchronous JavaScript And XML) nos permitirá realizar operaciones de manera asíncrona en nuestras aplicaciones Web. Esto quiere decir, que no tendremos que hacer Postback (Viajes de ida y vuelta al servidor) para realizar algunas operaciones que antes lo requerían.

Empezamos:

En nuestro ejemplo realizaremos una tarea que llevara algo de tiempo y mostraremos una imagen animada mientras esto sucede.

Código:

<%@ Page Language=”C#” AutoEventWireup=”true” %>

<script runat=”server” language=”C#”>

public void Fill()

{

ArrayList vals = new ArrayList(30);

for (int i = 1; i <= 30; i++)

{

vals.Add(“Elemento: “ + i.ToString());

}

Grid1.DataSource = vals;

Grid1.DataBind();

}

protected void Button1_Click(object sender, EventArgs e)

{

Fill();

}

</script>

<!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>Página sin título</title>

<style type=”text/css”>

.loading {

color: #FF9900;

}

</style>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

</div>

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>

</asp:ScriptManager>

<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>

<ContentTemplate>

<asp:Button ID=”Button1″ runat=”server” Text=”Cargar datos” onclick=”Button1_Click” />

<asp:GridView ID=”Grid1″ runat=”server” Width=”519px”>

</asp:GridView>

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress ID=”UpdateProgress1″ runat=”server”

AssociatedUpdatePanelID=”UpdatePanel1″>

<ProgressTemplate>

<span> <img src=”imgs/loader.gif” /></span> <span class=”loading”> Cargando datos… </span>

</ProgressTemplate>

</asp:UpdateProgress>

</form>

</body>

</html>

Como podeis ver, el ejemplo es muy básico. Hemos introducido los controles que se han de ejecutar en un contexto asincrono en el control UpdatePanel, a su vez colocamos un control UpdateProgress que mostrara la imagen mientras dure la operación y lo hemos asociado al control UpdatePanel.

Esto solo a sido la primera parte de una serie de articulos sobre el mismo tema. Según tenga tiempo los ire subiendo.

Nota:
En esta ocasión no he introducido el código en VB ya que opino que en este caso no hay nada de especial relevancia.

Advertisement

Entrada archivada en:Ajax, Piensa en asíncrono. Etiquetas:, , .

Acceso a base de datos embebidas Firebird desde .net

6 comentarios Añade el tuyo

Deja un comentario

Fill in your details below or click an icon to log in:

Logo de WordPress.com

You are commenting using your WordPress.com account. Log Out / Cambiar )

Twitter picture

You are commenting using your Twitter account. Log Out / Cambiar )

Facebook photo

You are commenting using your Facebook account. Log Out / Cambiar )

Connecting to %s

Trackback este articulo  |  Suscríbete a los comentarios vía RSS Feed


Entradas recientes


Seguir

Get every new post delivered to your Inbox.