Código Fuente

Cdigo fuente
Carrito de Compras ASP.NET y C#

En este post tratare de explicar y hacer un carrito de compras para ello lo programare
en ASP.NET junto con C#. Veamos en teora cuando escuchamos carrito de compras se nos viene a
la mente uno de los que ocupamos en el supermercado, la lgica del uso de ese carrito es muy
simple:
1.
2.
3.
Veamos como utilizamos un carrito de compras del supermercado:

Primero lo obtenemos en la entrada del mismo supermercado.
Segundo al encontrar el producto deseado lo introducimos en al carrito.
Cuando hemos terminado de comprar vamos a la caja registradora vemos el total que hay
en el carrito y pagamos.
Agrandes rasgos eso es lo que me viene a la mente cuando se trata de este tipo de carrito de
compras, pero para nuestro caso es un carrito es online que permita a nuestros clientes hacer una
compra en nuestro sitio Web.
1.
Veamos como funcionaria nuestro carrito.

Primero a diferencia del carito del sper el de nosotros no es necesario que se tome
(crearlo) al principio; no mas llegue a nuestro sitio el cliente. Sino que el cliente puede revisar el
catalogo de productos y hasta que este listo a comprar se le asignara un carrito donde introducir su
compra.
2.
Segundo en el carro de supermercado es capaz de contener una gran cantidad de productos

a la vez, nuestro carro de compras debe ser capaz de hacer lo mismo.
3.
Tercero el carro de supermercado me permite introducir de un productos varios del mismo,

el que programaremos debe ser capaz de hacerlo.
4.
Cuarto cuando llega a pagar en el supermercado totaliza su compra a partir de los subtotales
de todas sus productos esto lo hace mentalmente, de esta forma decide si dejar algo por que no le
alcanza el dinero. Nuestro carro de compras debe ser capaz de mostrarnos el subtotal a partir de
cada producto que llevamos y as como en el supermercado me debe de permitir eliminar un
producto si no me alcanza el dinero.
5.
Y por ultimo en el carro de compras me debe permitir actualizar la cantidad de producto si

quiero mas de un producto del mismo tipo o quiero dejar de ese producto uno.
Bueno esto es lo que tenemos que programar en nuestro carito de compras. Para ello crearemos un
proyecto web ASP.NET vaco:
Hoy comenzaremos creando una clase que se encargue de los productos que pondr en mi sitio.
Esta clase contendr los siguientes atributos.

Clase Producto
1. using System;
2.
using System.Collections.Generic;
3.
using System.Linq;
4.
using System.Web;
5.
6.
namespace CarroDeComprasEjemplo
7.
8.
public class Producto
9.
10.
public int Id { get; set; }
11.
public decimal Precio { get; set; }
12.
public string Descripcion { get; set; }
13.
14. }
Ahora solo tendramos que hacer un catalogo de productos que me los maneje esta clase. Para ello
haremos un constructor al cual le pase el Id del producto y me devuelva el la descripcin y el precio
del mismo.
Clase Producto
1. namespace CarroDeComprasEjemplo
2.
3.
public class Producto
4.
5.
public int Id { get; set; }
6.
public decimal Precio { get; set; }
7.
public string Descripcion { get; set; }
8.
9.
public Producto(int pId)
10.
11.
Id = pId;
12.
//esta ser la lista de productos y precios
13.
switch (pId)
14.
15.
case 1:
16.
Descripcion = Zapatos Deportivos;
17.
//lo puedo convertir para que me lo tome como

decimal
18.
Precio = Convert.ToDecimal(50.90);
19.
break;
20.
21.
case 2:
Descripcion = Camisas Deportivas;
22.
//es igual que convertirlo solo que le estoy

diciendo que es decimal
23.
Precio = 15.50m;
24.
break;
25.
26.
case 3:
Descripcion = Pantalones Cortos;
27.
Precio = 12.50m;
28.
break;
29.
case 4:
30.
Descripcion = Sandalias;
31.
Precio = 5m;
32.
break;
33.
case 5:
34.
Descripcion = Bxer;
35.
Precio = 2.75m;
36.
break;
37.
38.
39.
40. }
Ahora tendramos que crear una clase que me maneje los productos y la cantidad de los mismos que
sern enviados al carro de compras.
Esta clase tiene que ser capaz de decirme o encontrarme un producto de los que estoy introduciendo
en el carro de compras. Para ello utilizare una interfaz genrica que me los filtre, la que ocupare ser
IEquatable.
Clase ProductosAlCarro
1.
2.
3.
public class ProductosAlCarro : IEquatable<ProductosAlCarro>
4.
5.
6.
Colocare las atributos siguientes.

2.
3.
4.
5.
public int Cantidad { get; set; }
6.
private int _IdProducto;
7.
private Producto _producto = null;
8.
9.
}
}
En esta clase tenemos que manejar tres cosas la cantidad de producto el id del producto y una
instancia que me permita tener acceso al catalogo de productos. encapsularemos el id y producto
nos quedara as:
2.
3.
4.
5.
6.
7.
8.
9.
public int IdProducto
10.
11.
get { return _IdProducto; }
12.
set
13.
14.
_producto = null;
15.
_IdProducto = value;
16.
17.
}
}
18.
19.
public Producto Producto
20.
21.
get
22.
23.
if (_producto == null)
24.
25.
_producto = new Producto(IdProducto);
26.
27.
return _producto;
28.
29.
30.
31. }
En el encapsulador del id hay que hacer un nuevo producto volvindolo null para que siempre nos
introduzca un nuevo producto al carro de compras. En el de productos solo hay que ver si el
producto viene vaco o no.
Bueno ahora hay que hacer unas propiedades que me manejen la descripcin del producto y el
precio unitario de cada producto adems del total de productos:
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
set
13.
14.
_producto = null;
15.
16.
17.
}
}
18.
19.
20.
21.
get
22.
23.
24.
25.
26.
27.
return _producto;
28.
29.
30.
31.
public string Descripcion
32.
33.
get { return Producto.Descripcion; }
34.
35.
public decimal PrecioUnitario
36.
37.
get { return Producto.Precio; }
38.
39.
public decimal Total
40.
41.
get { return PrecioUnitario * Cantidad; }
42.
43.
44. }
Con esto solo necesitare un constructor que me tome como parmetro el id del producto as como
usar el mtodo Equals para filtrar los distintos productos que tenga en mi carro de compras.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
set
13.
14.
_producto = null;
15.
16.
17.
}
}
18.
19.
20.
21.
get
22.
23.
24.
25.
26.
27.
return _producto;
28.
29.
}
}
30.
31.
public string Descripcion
32.
33.
get { return Producto.Descripcion; }
34.
35.
public decimal PrecioUnitario
36.
37.
get { return Producto.Precio; }
38.
39.
public decimal Total
40.
41.
42.
get { return PrecioUnitario * Cantidad; }

}
43.
44.
public ProductosAlCarro(int pId)
45.
46.
47.
IdProducto = pId;
}
48.
49.
public bool Equals(ProductosAlCarro pItem)
50.
51.
return pItem.IdProducto == IdProducto;
52.
53.
54. }
Con esto tengo dos clase una que me maneja los producto y otra que me maneja dichos productos en
el carro de compras. Hoy solo tengo que tener una clase que me maneje el carro de compras y me
guarde en una lista los productos que han sido comprados o seleccionados.
Esta clase que me permitira seleccionar un producto, guardar uno producto y eliminar un producto
del carro de compras. Primero crearemos una lista para guardar todos los productos dentro del
carro de compras:
Clase CarroDeCompras
1.
2.
3.
public class CarroDeCompras
4.
5.
public List<ProductosAlCarro> ListaProductos

{ get; private set; }
6.
7.
}
}
Crearemos un mtodo que me capture el producto que ser enviado al carro de compras (la lista),
para este caso usaremos unas variables de seccin entre la pagina que muestra el catalogo y laque
me muestra los productos en al carro de compras.
2.
3.
4.
5.

{ get; privateset; }
6.
7.
public static CarroDeCompras CapturarProducto()
8.
9.
CarroDeCompras _carrito =
(CarroDeCompras)HttpContext.Current.Session[ASPCarroDeCompras];
10.
if (_carrito == null)
11.
12.
HttpContext.Current.Session[ASPCarroDeCompras] =
_carrito = new CarroDeCompras();
13.
14.
return _carrito;
15.
16.
17. }
Ahora hay que hacer un constructor que me permita hacer una lista de productos, recuerda que nos
solo una persona comprara en lnea as que cada persona hay que hacerle una lista de productos.
Crearemos un mtodo me debe de identificar si ya hay productos en el carro de compras si los hay
solo tenemos que sumar a la cantidad de producto un producto mas sino hay hay que agregarle una
a la cantidad de producto as que veamos como queda:
2.
3.
4.
5.

6.
7.
8.
9.
10.
11.
12.
13.
14.
return _carrito;
15.
16.
17.
protected CarroDeCompras()
18.
19.
ListaProductos = new List<ProductosAlCarro>();
20.
21.
22.
public void Agregar(int pIdProducto)
23.
24.
ProductosAlCarro NuevoProducto
= newProductosAlCarro(pIdProducto);
25.
if (ListaProductos.Contains(NuevoProducto))
26.
27.
foreach (ProductosAlCarro item in ListaProductos)
28.
29.
if (item.Equals(NuevoProducto))
30.
31.
item.Cantidad++;
32.
return;
33.
34.
35.
36.
else
37.
38.
NuevoProducto.Cantidad = 1;
39.
ListaProductos.Add(NuevoProducto);
40.
41.
42.
43. }
Hoy tenemos que hacer un mtodo que me permita eliminar un producto de la lista que tengo si ya
no lo quiero esto es relativamente fcil quedara as:
2.
3.
4.
5.

6.
7.
8.
9.
10.
11.
12.
13.
14.
return _carrito;
15.
16.
17.
18.
19.
20.

}
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
item.Cantidad++;
32.
return;
33.
34.
35.
36.
else
37.
38.
39.
40.
41.
42.
43.
public void EliminarProductos(int pIdProducto)
44.
45.
ProductosAlCarro eliminaritems
46.
ListaProductos.Remove(eliminaritems);
47.
48.
49. }
Hoy tendramos que hacer un mtodo queme permita ver o saber la cantidad de productos en el
carro de compras para que me sirve esto es para actualizar la cantidad cuando compre mas del
mismo producto o cuando compre otro producto, que daria as:
2.
3.
4.
5.

6.
7.
8.
9.
10.
11.
12.
13.
14.
return _carrito;
15.
16.
17.
18.
19.
20.
21.

}
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
item.Cantidad++;
32.
return;
33.
34.
35.
36.
else
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
public void CantidadDeProductos(int pIdProducto, intpCantid

ad)
50.
51.
if (pCantidad == 0)
52.
53.
EliminarProductos(pIdProducto);
54.
return;
55.
56.
ProductosAlCarro updateProductos
57.
58.
59.
if (item.Equals(updateProductos))
60.
61.
item.Cantidad = pCantidad;
62.
return;
63.
64.
65.
66.
67. }
Por ultimo en esta clase sacaremos los subtotales por producto que hemos agregado al carro de
compras:
2.
3.
4.
5.

6.
7.
8.
9.
10.
11.
12.
13.
14.
return _carrito;
15.
16.
17.
18.
19.
20.

}
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
item.Cantidad++;
32.
return;
33.
34.
35.
36.
else
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
public void CantidadDeProductos(int pIdProducto, intpCantid

ad)
50.
51.
if (pCantidad == 0)
52.
53.
EliminarProductos(pIdProducto);
54.
return;
55.
56.
ProductosAlCarro updateProductos
57.
58.
59.
if (item.Equals(updateProductos))
60.
61.
item.Cantidad = pCantidad;
62.
return;
63.
64.
65.
66.
67.
public decimal SubTotal()
68.
69.
decimal subtotal = 0;
70.
71.
72.
subtotal += item.Total;
73.
74.
return subtotal;
75.
76.
77. }
Con esto solo seria dibujar nuestros webform y programarlos y as ya tenemos nuestro carro de
compras los siguiente no vamos a hondar mucho solo seria implementar esta programacin.
Comencemos la implementacin creando un WeBForms que llamaremos CatalogoProductos.
CatalogoProductos
1. <%@ Page Language=C# AutoEventWireu
p=trueCodeBehind=CatalogoProductos.aspx.csInherits=CarroDeCompr
asEjemplo.CataloProductos %>
2.
3.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0

Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd>
4.
5.
<html xmlns=http://www.w3.org/1999/xhtml>
6.
<head runat=server>
7.
<title></title>
8.
</head>
9.
<body>
10.
<form id=form1 runat=server>
11.
<div>
12.
13.
</div>
14.
</form>
15. </body>
16. </html>
Recordemos que no entrare en detalles en esta parte, este WebForms quedara as:
CatalogoProductos
p=trueCodeBehind=CatalogoProductos.aspx.csInherits=CarroDeCompr
asEjemplo.CataloProductos %>
2.
3.

4.
5.
6.
<head runat=server>
7.
<title></title>
8.
<style type=text/css>
9.
.style1
10.
11.
width: 995px;
12.
13.
.style2
14.
15.
width: 2387px;
16.
17.
.style3
18.
19.
width: 783px;
20.
21.
</style>
22. </head>
23. <body>
24.
25.
<div>
26.
<table style=width: 600px; border:1px;>
27.
28.
<thead>
<tr style=border:1px;>
29.
<th colspan=2 style=font-size: xlarge; font-weight: bold; text-align: center;
30.
text-transform: uppercase; backgroundcolor: #999999; color: #FFFFFF;>
31.
Tienda al mayoreo
32.
33.
</th>
</tr>
34.
</thead>
35.
<tbody>
36.
37.
<td class=style2 style=font-size:

larger;font-weight: bold; text-align: left;
38.
text-transform: capitalize;>
39.
Zapatos Deportivos
40.
</td>
41.
<td class=style3>
42.
<asp:LinkButton ID=lbZapatos runat=serve

ronclick=lbZapatos_Click >Agregar al Carrito</asp:LinkButton>
43.
</td>
44.
</tr>
45.
46.

47.
48.
Camisas Deportivas
49.
</td>
50.
<td class=style3>
51.
<asp:LinkButton ID=lbCamisas runat=serve

ronclick=lbCamisas_Click>Agregar al Carrito</asp:LinkButton>
52.
</td>
53.
</tr>
54.
55.

56.
57.
Pantalones Cortos
58.
</td>
59.
<td class=style3>
60.
<asp:LinkButton ID=lbPantalonesrunat=ser
ver onclick=lbPantalones_Click>Agregar al
Carrito</asp:LinkButton>
61.
</td>
62.
</tr>
63.
64.

65.
66.
Sandalias
67.
</td>
68.
<td class=style3>
69.
<asp:LinkButton ID=lbSandaliasrunat=serv
er onclick=lbSandalias_Click>Agregar al Carrito</asp:LinkButton>
70.
</td>
71.
</tr>
72.
73.

74.
75.
Boxer
76.
</td>
77.
<td class=style3>
78.
<asp:LinkButton ID=lbBoxer runat=server

onclick=lbBoxer_Click>Agregar al Carrito</asp:LinkButton>
79.
</td>
80.
</tr>
81.
82.
<td class=style1 colspan=2>
83.
</td>
84.
</tr>
85.
</tbody>
86.
</table>
87.
</div>
88.
</form>
89. </body>
en modo e diseo se vera as:
En clic de los linkButton programaramos esto:

CatalogoProductos
2.
3.
public partial class CataloProductos : System.Web.UI.Page
4.
5.
protected void Page_Load(object sender, EventArgs e)
6.
7.
8.
9.
10.
protected void lbZapatos_Click(object sender, EventArgs e)
11.
12.
CarroDeCompras carrito
=CarroDeCompras.CapturarProducto();
13.
carrito.Agregar(1);
14.
Response.Redirect(VerCarrito.aspx);
15.
16.
17.
protected void lbCamisas_Click(object sender, EventArgs e)
18.
19.
20.
carrito.Agregar(2);
21.
22.
23.
24.
protected void lbPantalones_Click(object sender, EventArgs

e)
25.
26.
27.
carrito.Agregar(3);
28.
29.
30.
31.
protected void lbSandalias_Click(object sender, EventArgs e

)
32.
33.
34.
carrito.Agregar(4);
35.
36.
37.
38.
protected void lbBoxer_Click(object sender, EventArgs e)
39.
40.
41.
carrito.Agregar(5);
42.
43.
44.
}
}
45. }
Como Podemos ver solo es mandar el producto en este caso el id que seria un numero del 1 al 5 al
mtodo agregar. En el otro formulario que le pondr verCarrito tenemos que mostrar los productos
que vayamos comprando.
Ya programado quedara as:

verCarrito
p=trueCodeBehind=VerCarrito.aspx.csInherits=CarroDeComprasEjemp
lo.VerCarrito %>
2.
3.

4.
5.
6.
<head runat=server>
7.
<title></title>
8.
</head>
9.
<body>
10.
11.
<div style=background-color: #FFF; padding: 15px; margin: 0

auto; width: 600px;>
12.
13.
<h1>
Carrito de Compras</h1>
14.
<a href=CatalogoProductos.aspx>Seguir Comprando</a>
15.
<br />
16.
<br />
17.
<asp:GridView runat=server ID=gvCaritoComprasAutoGenera

teColumns=false EmptyDataText=No hay nada en su carrito de
compras.
18.
GridLines=None Width=100% CellPadding=5ShowFooter

=true DataKeyNames=IdProducto
19.
OnRowCommand=gvCaritoCompras_RowCommandOnRowDataBound
=gvCaritoCompras_RowDataBound>
20.
<HeaderStyle HorizontalAlign=LeftBackColor=BlueViole
t ForeColor=AliceBlue />
21.
<FooterStyle HorizontalAlign=RightBackColor=Chocolat
e ForeColor=Aqua />
22.
<AlternatingRowStyle BackColor=Azure />
23.
<Columns>
24.
<asp:BoundField DataField=DescripcionHeaderText=
Descripcion />
25.
<asp:TemplateField HeaderText=Cantidad>
26.
<ItemTemplate>
27.
<asp:TextBox runat=server ID=txtCantidad

Columns=5 Text=<%# Eval(Cantidad) %>></asp:TextBox><br />
28.
<asp:LinkButton runat=serverID=btnElimin
ar Text=Eliminar CommandName=Eliminar
29.
CommandArgument=<%# Eval(IdProducto)
%> Style=font-size: 12px;></asp:LinkButton>
30.
</ItemTemplate>
31.
</asp:TemplateField>
32.
<asp:BoundField DataField=PrecioUnitarioHeaderTex
t=Precio ItemStyle-HorizontalAlign=Right
33.
HeaderStyleHorizontalAlign=RightDataFormatString={0:C} />
34.
<asp:BoundField DataField=Total HeaderText=Total

ItemStyle-HorizontalAlign=Right
35.
HeaderStyleHorizontalAlign=RightDataFormatString={0:C} />
36.
</Columns>
37.
</asp:GridView>
38.
<br />
39.
<asp:Button runat=server ID=btActulizar Text=Actualiza

r el Carrito
40.
41.
onclick=btActulizar_Click/>
</div>
42.
</form>
43. </body>
44. </html>
La programacin quedara as.

Codigo VerCarrito
2.
3.
public partial class VerCarrito : System.Web.UI.Page
4.
5.
protected void Page_Load(object sender, EventArgs e)
6.
7.
if (!IsPostBack)
8.
9.
BindData();
}
10.
11.
protected void BindData()
12.
13.
gvCaritoCompras.DataSource
=CarroDeCompras.CapturarProducto().ListaProductos;
14.
gvCaritoCompras.DataBind();
15.
16.
17.
protected void gvCaritoCompras_RowDataBound(object sender,G

ridViewRowEventArgs e)
18.
19.
if (e.Row.RowType == DataControlRowType.Footer)
20.
21.
e.Row.Cells[3].Text = Total:
+CarroDeCompras.CapturarProducto().SubTotal().ToString(C);
22.
23.
24.
25.
protected void gvCaritoCompras_RowCommand(object sender,Gri

dViewCommandEventArgs e)
26.
27.
if (e.CommandName == Eliminar)
28.
29.
int productId = Convert.ToInt32(e.CommandArgument);
30.
CarroDeCompras.CapturarProducto().EliminarProductos
(productId);
31.
32.
BindData();
33.
34.
35.
protected void btActulizar_Click(object sender, EventArgs e

)
36.
37.
foreach (GridViewRow row in gvCaritoCompras.Rows)
38.
39.
if (row.RowType == DataControlRowType.DataRow)
40.
41.
try
42.
43.
int productoId
=Convert.ToInt32(gvCaritoCompras.DataKeys[row.RowIndex].Value);
44.
int cantidad
=int.Parse(((TextBox)row.Cells[1].FindControl(txtCantidad)).Text);
45.
CarroDeCompras.CapturarProducto().CantidadD
eProductos(productoId, cantidad);
46.
47.
catch (FormatException) { }
48.
49.
50.
BindData();
51.
52.
}
}
53. }
Si lo corremos se vera as:
Con esto terminamos espero que te sirva de algo

Código Fuente

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Código Fuente

Hochgeladen von

Copyright:

Verfügbare Formate

Cdigo fuente

Carrito de Compras ASP.NET y C#

Veamos como utilizamos un carrito de compras del supermercado:

Veamos como funcionaria nuestro carrito.

Segundo en el carro de supermercado es capaz de contener una gran cantidad de productos

Tercero el carro de supermercado me permite introducir de un productos varios del mismo,

Y por ultimo en el carro de compras me debe permitir actualizar la cantidad de producto si

Esta clase contendr los siguientes atributos.

public class Producto

public int Id { get; set; }

public decimal Precio { get; set; }

public string Descripcion { get; set; }

public class Producto

public int Id { get; set; }

public decimal Precio { get; set; }

public string Descripcion { get; set; }

public Producto(int pId)

//esta ser la lista de productos y precios

Descripcion = Zapatos Deportivos;

//lo puedo convertir para que me lo tome como

//es igual que convertirlo solo que le estoy

public class ProductosAlCarro : IEquatable<ProductosAlCarro>

Colocare las atributos siguientes.

public class ProductosAlCarro : IEquatable<ProductosAlCarro>

public int Cantidad { get; set; }

private int _IdProducto;

private Producto _producto = null;

public class ProductosAlCarro : IEquatable<ProductosAlCarro>

public int Cantidad { get; set; }

private int _IdProducto;

private Producto _producto = null;

public int IdProducto

get { return _IdProducto; }

public Producto Producto

_producto = new Producto(IdProducto);

public class ProductosAlCarro : IEquatable<ProductosAlCarro>

public int Cantidad { get; set; }

private int _IdProducto;

private Producto _producto = null;

public int IdProducto

get { return _IdProducto; }

public Producto Producto

_producto = new Producto(IdProducto);

public string Descripcion

get { return Producto.Descripcion; }

public decimal PrecioUnitario

get { return Producto.Precio; }

public decimal Total

get { return PrecioUnitario * Cantidad; }

public class ProductosAlCarro : IEquatable<ProductosAlCarro>

public int Cantidad { get; set; }

private int _IdProducto;

private Producto _producto = null;

public int IdProducto

get { return _IdProducto; }

public Producto Producto

_producto = new Producto(IdProducto);

public string Descripcion

get { return Producto.Descripcion; }

public decimal PrecioUnitario

get { return Producto.Precio; }

public decimal Total

get { return PrecioUnitario * Cantidad; }

public ProductosAlCarro(int pId)