Archive for Septiembre 2009
Precarga en ASP.NET con AJAX (2)
En el artículo anterior vimos cómo realizar una precarga con el control UpdatePanel, en esta ocasión vamos a ver cómo implementar nuestro sistema de precarga en una página independiente y redirigir al usuario a la página donde se mostrarán los datos.
Primero el usuario seleccionaría la información de un producto, una vez seleccionado, redirigimos la petición a otra página donde se cargaría de forma asíncrona mientras muestra una animación (para que el usuario no desespere), obtenida la información del producto en cuestión, la guardamos en el estado de la sesión y le redirigimos a la página donde se mostrará la información del producto que obtendremos de la variable de sesión.
Una vez vistos los preliminares, empezamos con el código.
La primera página es la que mostrará el formulario de búsqueda de producto:
viewproduct.aspx
<%@
Page
Language=”C#”
AutoEventWireup=”true” %>
<!DOCTYPE
html
PUBLIC
“-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<script
runat=”server”>
protected
void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
if(DropDownList1.SelectedIndex>0)
Response.Redirect(“loadproduct.aspx?id=” + DropDownList1.SelectedValue);
}
</script>
<html
xmlns=”http://www.w3.org/1999/xhtml”>
<head
runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form
id=”form1″
runat=”server”>
<div>
Seleccione una categoría para ver sus productos:
<asp:DropDownList
ID=”DropDownList1″
runat=”server”
onselectedindexchanged=”DropDownList1_SelectedIndexChanged”
AutoPostBack=”True”>
<asp:ListItem>– Productos –</asp:ListItem>
<asp:ListItem
Value=”1″>Carnes</asp:ListItem>
<asp:ListItem
Value=”2″>Verduras</asp:ListItem>
<asp:ListItem
Value=”3″>Pescados</asp:ListItem>
</asp:DropDownList>
</div>
</form>
</body>
</html>
La segunda es la más importante, es donde cargaremos el producto asincronamente y se lo asignaremos a una variable de sesión:
loadproduct.aspx
<%@
Page
Language=”C#” %>
<%@
Import
Namespace=”System.Collections.Generic” %>
<%@
Import
Namespace=”System.Web.Services” %>
<!DOCTYPE
html
PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<script
runat=”server”>
protected
void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["id"] == null)
Response.Redirect(“viewproduct.aspx”);
}
[WebMethod()]
public
static
void LoadProduct(int id)
{
//Aqui se cargaría el producto
System.Threading.Thread.Sleep(2000);//Esto es sólo para hacer más real el e.0tjemplo (no hacer esto en aplicaciones reales)
HttpContext context = HttpContext.Current;
List<Product> Productos=new
List<Product>();
Random precioAleatorio=new
Random();
//Para hacer más sencillo el ejemplo rellenamos una lista ficticia de productos. En un entorno
//real usaríamos el id pasado cómo parametro para recuperarla de un orígen de datos.
for(int i=0;i<=20;i++)
{
Product p=new
Product();
p.Nombre=“Producto_”+i;
p.Precio=(decimal)precioAleatorio.Next(2,25);
if (i > 0 && i < 5)
{
p.IdCat = 1;
p.Categoria = “Carnes”;
}
else
if (i > 5 && i < 12)
{
p.IdCat = 2;
p.Categoria = “Verduras”;
}
else
{
p.IdCat = 3;
p.Categoria = “Pescados”;
}
if(p.IdCat==id)
Productos.Add(p);
}
//Asignamos la lista de productos a una variable de sesión para recuperarla desde otra página
context.Session["ProductosActuales"] = Productos;
}
</script>
<html
xmlns=”http://www.w3.org/1999/xhtml”>
<head
runat=”server”>
<title>Cargando…</title>
<script
language=”javascript”
type=”text/javascript”>
// <!CDATA[
function load(id) {
PageMethods.LoadProduct(id, onOk, onError);
}
function onOk() {document.location = 'productinfo.aspx';}
function onError() { document.location.href = 'error.aspx'; }
// ]]>
</script>
</head>
<body
onload=”load(<%=Request.QueryString["id"]%>)”>
<form
id=”form1″
runat=”server”>
<div>
<asp:ScriptManager
ID=”ScriptManager1″
runat=”server”
EnablePageMethods=”True”>
</asp:ScriptManager>
<br
/>
<br
/>
<img
src=”loading.gif”
/> Cargando…</div>
</form>
</body>
</html>
En la tercera página mostramos los datos de la variable de sesión:
productinfo.aspx
<%@
Page
Language=”C#” %>
<!DOCTYPE
html
PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<script
runat=”server”>
protected
void Page_Load(object sender, EventArgs e)
{
if(Session["ProductosActuales"]==null)
Response.Redirect(“viewproduct.aspx”);
GridView1.DataSource = Session["ProductosActuales"];
GridView1.DataBind();
}
</script>
<html
xmlns=”http://www.w3.org/1999/xhtml”>
<head
runat=”server”>
<title></title>
</head>
<body>
<form
id=”form1″
runat=”server”>
<div>
</div>
<asp:GridView
ID=”GridView1″
runat=”server”
AutoGenerateColumns=”false”>
<Columns>
<asp:BoundField
DataField=”Precio”
DataFormatString=”{0:C}”
/>
<asp:BoundField
DataField=”Nombre”
/>
<asp:BoundField
DataField=”Categoria”
/>
</Columns>
</asp:GridView>
</form>
</body>
</html>
Soy consciente de que se han quedado algunas cosas en el tintero, lo más importante es saber que hay que establecer la propiedad EnablePageMethods
del control ScriptManager en true y declarar el método de página cómo static con el ámbito público.
Espero que os haya servido.
Add comment Septiembre 7, 2009
