.Net Extremo » Precarga http://acollado.wordpress.com Just another WordPress.com weblog Mon, 12 Oct 2009 19:56:43 +0000 http://wordpress.com/ es hourly 1 http://www.gravatar.com/blavatar/284f0b0cc5215cefbd5947b3a2af8361?s=96&d=http://s.wordpress.com/i/buttonw-com.png .Net Extremo » Precarga http://acollado.wordpress.com Precarga en ASP.NET con AJAX (1) http://acollado.wordpress.com/2008/05/02/precarga-en-aspnet-con-ajax-1/ http://acollado.wordpress.com/2008/05/02/precarga-en-aspnet-con-ajax-1/#comments Fri, 02 May 2008 06:49:19 +0000 acollado http://acollado.wordpress.com/?p=31 ]]>

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.

]]> http://acollado.wordpress.com/2008/05/02/precarga-en-aspnet-con-ajax-1/feed/ 6 acollado