Cómo hacer un carrito en ASP.NET Core

A la hora de hacer una página web de una tienda online, uno de los elementos más importantes es el carrito de la compra. A continuación, os voy a explicar de una manera sencilla, como implementarlo en nuestro proyecto ASP.NET Core.

Requisitos

Deberemos instalar el NuGet de Session. En Session solo podemos guardar string e integer. Al ser un carrito, querremos almacenar un array de elementos, y para ello deberemos extender la clase Session. Para poder serializar un array usaremos el NuGet Newtonsoft.json.

Configuración

Primero debemos configurar Session para que funcione en nuestro proyecto, para ello iremos al Startup. Hay que habilitar Session en los métodos ConfigureServices

y Configure

app.UseSession() DEBE ir antes de app.UseEndpoints().

Como ya comenté antes, en Session sólo se pueden guardar strings e integers, y en nuestro caso queremos almacenar un array de integers. Una forma de arreglar este problema, sería serializando el array con ayuda del NuGet Newtonsoft.json.

Vamos a crear en nuestro proyecto una carpeta llamada Extensions, y en la carpeta, crearemos la clase estática SessionExtension. Haremos un using a newtonsoft.json para poder utilizar JsonConvert.

Ejemplo

Ahora que está todo configurado, procedemos a implementarlo en el proyecto. Como ejemplo he creado un modelo simple de producto.

public class Producto
{
    public int IdProducto { get; set; }

    public String Nombre { get; set; }

    public int Precio { get; set; }

}

Vista productos

Creamos un controller para las vistas de productos, inyectamos nuestro repositorio del proyecto y hacemos un using a Extensions. Hacemos un IActionResult que reciba un parámetro opcional, que será un id de producto. Si llega un id, hay que comprobar si hay un carrito creado en Session, en caso contrario, crear uno. Después, comprobar si el id ya está en dicho carrito. Por último, pasamos la lista de todos los productos a la vista.

Ahora creamos la vista que reciba de model la lista de productos. A cada producto le pondremos un enlace a GetProductos con el id del producto para añadirlo al carrito. Ponemos un control por si el producto ya estuviese en el carrito.

‘carrito’ lo declaramos de esta manera:

Para poder usar la extensión de Session hay que incluir Extensions en el fichero _ViewImports.cs.

Vista carrito

En nuestro repositorio creamos un método que devuelva una lista de productos a partir de la lista del carrito, con ayuda de LINQ.

public List<Producto> GetProductosCarrito(List<int> idproductos)
{
    return this.context.Productos.Where(z => idproductos.Contains(z.IdProducto));
}

Creamos un IActionResult, que también pueda recibir un id de producto, para poder eliminar elementos del carrito. Y con el nuevo método, pasamos la lista de productos que tenemos en el carrito a la vista.

En la vista, al igual que en la de productos, le damos un enlace a cada producto con su id para que se pueda eliminar dicho producto. Y también pondremos un enlace para finalizar el pedido.

Vista pedidos

Por último, el IActionResult de pedido tiene que devolver la lista de los productos del carrito a la vista y eliminar el Session.