Precarga en ASP.NET con AJAX (1)
Mayo 2, 2008
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: |
Entry Filed under: Ajax, Piensa en asíncrono. Etiquetas: Ajax, ASP.NET, Precarga.
6 Comments Add your own
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed
1.
Miguel | Noviembre 13, 2008 at 8:39 am
Muy interesante, lo usaré en cuanto tenga oportunidad
2. Precarga en ASP.NET con AJAX (2) « .Net Extremo | Septiembre 7, 2009 at 9:52 pm
[...] 7, 2009 En el articulo anterior vimos cómo realizar una precarga con el control UpdatePanel, en esta ocasión vamos a ver cómo [...]
3. Precarga en ASP.NET con AJAX (2) « .Net Extremo | Octubre 12, 2009 at 7:06 pm
[...] 12, 2009 En el articulo anterior vimos cómo realizar una precarga con el control UpdatePanel, en esta ocasión vamos a ver cómo [...]
4. Precarga en ASP.NET con AJAX (2) « .Net Extremo | Octubre 12, 2009 at 7:20 pm
[...] 9, 2009 En el articulo anterior vimos cómo realizar una precarga con el control UpdatePanel, en esta ocasión vamos a ver cómo [...]
5. Precarga en ASP.NET con AJAX (2) « .Net Extremo | Octubre 12, 2009 at 7:24 pm
[...] 7, 2009 En el articulo anterior vimos cómo realizar una precarga con el control UpdatePanel, en esta ocasión vamos a ver cómo [...]
6. Precarga en ASP.NET con AJAX (2) « .Net Extremo | Octubre 12, 2009 at 7:56 pm
[...] 7, 2009 En el artículo anterior vimos cómo realizar una precarga con el control UpdatePanel, en esta ocasión vamos a ver cómo [...]