sábado, 7 de febrero de 2009

ASP.NET - Refrescado automatico de una seccion de pagina

grid Vamos a explicar una manera muy sencilla de mostrar datos actualizados en una zona de la pantalla, sin que tengamos que refrescar toda la página para tan simple propósito.
Este ejemplo aplica a .NET 2.0 + ASP.NET AJAX

El caso es muy sencillo:
digamos que tenemos un gridview en el que se mostrará una lista actualizada de usuarios.

Para simular que la lista de usuarios se actualiza, nosotros vamos a generar números aleatorios... lo cual indicará la cantidad de usuarios a generarse y mostrar en la grilla.


Entonces, añado un scriptmanager, un updatepanel, un control Timer y un gridview. Este es el código aspx:

<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" Interval="3000" runat="server" OnTick="Timer1_Tick">
</asp:Timer>
<asp:GridView ID="gridUsers" runat="server">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>

Al Timer le hemos puesto su propiedad Interval = 3000 milisegundos… ahora nos vamos a la vista de código beside:

Para cargar de datos la grilla, he creado una clase User:

class User
{
string _firstname;
string _lastname;
int _age;

public User(string fn, string ln, int age)
{
_firstname = fn;
_lastname = ln;
_age = age;
}

public string FirstName
{
get
{ return _firstname; }

set
{ _firstname = value; }
}

public string LastName
{
get
{ return _lastname; }

set
{ _lastname = value; }
}

public int Age
{
get
{ return _age; }

set
{ _age = value; }
}
}

Y éste sería el método que me permite generar los usuarios:

private void GetUsers()
{
Random r = new Random();
int Quantity = r.Next(1, 10);

List<User> users = new List<User>();
for (int i=1; i<=Quantity;i++)
{
users.Add(new User("FirstName" + i.ToString(), "LastName" + i.ToString(), i));
}

gridUsers.DataSource = users;
gridUsers.DataBind();
}

Luego, hago doble click sobre el control Timer para que se genere el código para el evento Tick… el cual, finalmente, debe quedar así:

protected void Timer1_Tick(object sender, EventArgs e)
{
GetUsers();
}

Eso es todo, ejecuta tu página y sin que muevas un solo dedo, tu página debe permitirte actualizar la grilla cada 3 segundos.

No te olvides que tu web.config debe tener las entradas necesarias para que funcione el ASP.NET AJAX.

No hay comentarios.: