Panier d’achat
par Erik Reitan
Télécharger Wingtip Toys Sample Project (C#) ou Télécharger le livre électronique (PDF)
Cette série de tutoriels vous apprend les principes de base de la création d’une application ASP.NET Web Forms à l’aide de ASP.NET 4.5 et Microsoft Visual Studio Express 2013 pour le web. Un projet Visual Studio 2013 avec du code source C# est disponible pour accompagner cette série de tutoriels.
Ce tutoriel décrit la logique métier requise pour ajouter un panier d’achat à l’exemple Wingtip Toys ASP.NET Web Forms application. Ce tutoriel s’appuie sur le tutoriel précédent « Afficher les éléments de données et les détails » et fait partie de la série de tutoriels Wingtip Toy Store. Une fois ce tutoriel terminé, les utilisateurs de votre exemple d’application pourront ajouter, supprimer et modifier les produits dans leur panier d’achat.
Ce que vous allez apprendre :
- Comment créer un panier d’achat pour l’application web.
- Comment permettre aux utilisateurs d’ajouter des éléments au panier d’achat.
- Comment ajouter un contrôle GridView pour afficher les détails du panier d’achat.
- Comment calculer et afficher le total de la commande.
- Comment supprimer et mettre à jour des éléments dans le panier d’achat.
- Comment inclure un compteur de panier d’achat.
Fonctionnalités de code de ce tutoriel :
- Entity Framework Code First
- Annotations de données
- Contrôles de données fortement typés
- Liaison de données
Création d’un panier d’achat
Plus tôt dans cette série de tutoriels, vous avez ajouté des pages et du code pour afficher les données de produit d’une base de données. Dans ce tutoriel, vous allez créer un panier d’achat pour gérer les produits que les utilisateurs sont intéressés à acheter. Les utilisateurs peuvent parcourir et ajouter des éléments au panier même s’ils ne sont pas inscrits ou connectés. Pour gérer l’accès au panier d’achat, vous allez affecter aux utilisateurs un unique ID à l’aide d’un identificateur global unique (GUID) lorsque l’utilisateur accède au panier pour la première fois. Vous allez le stocker ID à l’aide de l’état session ASP.NET.
Notes
L’état session ASP.NET est un emplacement pratique pour stocker des informations spécifiques à l’utilisateur qui expireront après que l’utilisateur quitte le site. Si une mauvaise utilisation de l’état de session peut avoir des conséquences sur les performances sur des sites plus grands, l’utilisation légère de l’état de session fonctionne bien à des fins de démonstration. L’exemple de projet Wingtip Toys montre comment utiliser l’état de session sans fournisseur externe, où l’état de session est stocké en cours sur le serveur web hébergeant le site. Pour les sites plus volumineux qui fournissent plusieurs instances d’une application ou pour les sites qui exécutent plusieurs instances d’une application sur différents serveurs, envisagez d’utiliser le service de cache Azure Windows. Ce service de cache fournit un service de mise en cache distribué externe au site web et résout le problème d’utilisation de l’état de session in-process. Pour plus d’informations, consultez How to Use ASP.NET Session State with Windows Azure Web Sites.
Ajouter CartItem en tant que classe de modèle
Plus tôt dans cette série de tutoriels, vous avez défini le schéma pour les données de catégorie et de produit en créant les Category classes et Product dans le dossier Modèles . Maintenant, ajoutez une nouvelle classe pour définir le schéma du panier d’achat. Plus loin dans ce tutoriel, vous allez ajouter une classe pour gérer l’accès aux données à la CartItem table. Cette classe fournit la logique métier pour ajouter, supprimer et mettre à jour des éléments dans le panier d’achat.
Cliquez avec le bouton droit sur le dossier Modèles , puis sélectionnez Ajouter ->Nouvel élément.
La boîte de dialogue Ajouter un nouvel élément s’affiche. Sélectionnez Code, puis Classe.
Nommez cette nouvelle classe CartItem.cs.
Cliquez sur Add.
Le nouveau fichier de classe s’affiche dans l’éditeur.Remplacez le code par défaut par le code suivant :
using System.ComponentModel.DataAnnotations; namespace WingtipToys.Models { public class CartItem { [Key] public string ItemId { get; set; } public string CartId { get; set; } public int Quantity { get; set; } public System.DateTime DateCreated { get; set; } public int ProductId { get; set; } public virtual Product Product { get; set; } } }
La CartItem classe contient le schéma qui définit chaque produit qu’un utilisateur ajoute au panier d’achat. Cette classe est similaire aux autres classes de schéma que vous avez créées précédemment dans cette série de tutoriels. Par convention, Entity Framework Code s’attend d’abord à ce que la clé primaire de la CartItem table soit ou CartItemIdID. Toutefois, le code remplace le comportement par défaut à l’aide de l’attribut d’annotation [Key] de données. L’attribut Key de la propriété ItemId spécifie que la ItemID propriété est la clé primaire.
La CartId propriété spécifie le ID de l’utilisateur associé à l’élément à acheter. Vous allez ajouter du code pour créer cet utilisateur ID lorsque l’utilisateur accède au panier d’achat. Elle ID sera également stockée en tant que variable de session ASP.NET.
Mettre à jour le contexte du produit
Outre l’ajout de la CartItem classe, vous devez mettre à jour la classe de contexte de base de données qui gère les classes d’entité et fournit l’accès aux données à la base de données. Pour ce faire, vous allez ajouter la classe de modèle nouvellement créée CartItem à la ProductContext classe .
Dans Explorateur de solutions, recherchez et ouvrez le fichier ProductContext.cs dans le dossier Models.
Ajoutez le code mis en surbrillance au fichier ProductContext.cs comme suit :
using System.Data.Entity; namespace WingtipToys.Models { public class ProductContext : DbContext { public ProductContext() : base("WingtipToys") { } public DbSet<Category> Categories { get; set; } public DbSet<Product> Products { get; set; } public DbSet<CartItem> ShoppingCartItems { get; set; } } }
Comme mentionné précédemment dans cette série de tutoriels, le code dans le fichier ProductContext.cs ajoute l’espace System.Data.Entity de noms afin que vous ayez accès à toutes les fonctionnalités principales d’Entity Framework. Cette fonctionnalité inclut la possibilité d’interroger, d’insérer, de mettre à jour et de supprimer des données en travaillant avec des objets fortement typés. La ProductContext classe ajoute l’accès à la classe de modèle qui vient d’être ajoutée CartItem .
Gestion de la logique métier du panier d’achat
Ensuite, vous allez créer la ShoppingCart classe dans un nouveau dossier Logique . La ShoppingCart classe gère l’accès aux données à la CartItem table. La classe inclut également la logique métier pour ajouter, supprimer et mettre à jour des éléments dans le panier d’achat.
La logique du panier d’achat que vous allez ajouter contiendra les fonctionnalités permettant de gérer les actions suivantes :
- Ajout d’éléments au panier d’achat
- Suppression d’éléments du panier d’achat
- Obtention de l’ID du panier d’achat
- Récupération d’éléments dans le panier d’achat
- Total de tous les articles du panier d’achat
- Mise à jour des données du panier d’achat
Une page de panier d’achat (ShoppingCart.aspx) et la classe de panier d’achat seront utilisées ensemble pour accéder aux données du panier d’achat. La page du panier affiche tous les éléments que l’utilisateur ajoute au panier d’achat. Outre la page et la classe du panier d’achat, vous allez créer une page (AddToCart.aspx) pour ajouter des produits au panier. Vous allez également ajouter du code à la page ProductList.aspx et à la page ProductDetails.aspx qui fournit un lien vers la page AddToCart.aspx , afin que l’utilisateur puisse ajouter des produits au panier.
Le diagramme suivant montre le processus de base qui se produit lorsque l’utilisateur ajoute un produit au panier d’achat.
Lorsque l’utilisateur clique sur le lien Ajouter au panier sur la page ProductList.aspx ou la page ProductDetails.aspx , l’application accède à la page AddToCart.aspx , puis automatiquement à la page ShoppingCart.aspx . La page AddToCart.aspx ajoute le produit sélectionné au panier d’achat en appelant une méthode dans la classe ShoppingCart. La page ShoppingCart.aspx affiche les produits qui ont été ajoutés au panier d’achat.
Création de la classe Panier d’achat
La ShoppingCart classe sera ajoutée à un dossier distinct dans l’application afin qu’il y ait une distinction claire entre le modèle (dossier Modèles), les pages (dossier racine) et la logique (dossier logique).
Dans Explorateur de solutions, cliquez avec le bouton droit sur le projet WingtipToyset sélectionnez Ajouter-Nouveau>dossier. Nommez le nouveau dossier Logique.
Cliquez avec le bouton droit sur le dossier Logique , puis sélectionnez Ajouter ->Nouvel élément.
Ajoutez un nouveau fichier de classe nommé ShoppingCartActions.cs.
Remplacez le code par défaut par le code suivant :
using System; using System.Collections.Generic; using System.Linq; using System.Web; using WingtipToys.Models; namespace WingtipToys.Logic { public class ShoppingCartActions : IDisposable { public string ShoppingCartId { get; set; } private ProductContext _db = new ProductContext(); public const string CartSessionKey = "CartId"; public void AddToCart(int id) { // Retrieve the product from the database. ShoppingCartId = GetCartId(); var cartItem = _db.ShoppingCartItems.SingleOrDefault( c => c.CartId == ShoppingCartId && c.ProductId == id); if (cartItem == null) { // Create a new cart item if no cart item exists. cartItem = new CartItem { ItemId = Guid.NewGuid().ToString(), ProductId = id, CartId = ShoppingCartId, Product = _db.Products.SingleOrDefault( p => p.ProductID == id), Quantity = 1, DateCreated = DateTime.Now }; _db.ShoppingCartItems.Add(cartItem); } else { // If the item does exist in the cart, // then add one to the quantity. cartItem.Quantity++; } _db.SaveChanges(); } public void Dispose() { if (_db != null) { _db.Dispose(); _db = null; } } public string GetCartId() { if (HttpContext.Current.Session[CartSessionKey] == null) { if (!string.IsNullOrWhiteSpace(HttpContext.Current.User.Identity.Name)) { HttpContext.Current.Session[CartSessionKey] = HttpContext.Current.User.Identity.Name; } else { // Generate a new random GUID using System.Guid class. Guid tempCartId = Guid.NewGuid(); HttpContext.Current.Session[CartSessionKey] = tempCartId.ToString(); } } return HttpContext.Current.Session[CartSessionKey].ToString(); } public List<CartItem> GetCartItems() { ShoppingCartId = GetCartId(); return _db.ShoppingCartItems.Where( c => c.CartId == ShoppingCartId).ToList(); } } }
La AddToCart méthode permet d’inclure des produits individuels dans le panier d’achat en fonction du produit ID. Le produit est ajouté au panier ou, si le panier contient déjà un élément pour ce produit, la quantité est incrémentée.
La GetCartId méthode retourne le panier ID de l’utilisateur. Le panier ID est utilisé pour suivre les articles qu’un utilisateur a dans son panier d’achat. Si l’utilisateur n’a pas de panier IDexistant , un nouveau panier ID est créé pour lui. Si l’utilisateur est connecté en tant qu’utilisateur inscrit, le panier ID est défini sur son nom d’utilisateur. Toutefois, si l’utilisateur n’est pas connecté, le panier ID est défini sur une valeur unique (un GUID). Un GUID garantit qu’un seul panier est créé pour chaque utilisateur, en fonction de la session.
La GetCartItems méthode retourne une liste d’éléments du panier d’achat pour l’utilisateur. Plus loin dans ce tutoriel, vous verrez que la liaison de modèle est utilisée pour afficher les éléments du panier dans le panier à l’aide de la GetCartItems méthode .
Création de la fonctionnalité De complément au panier
Comme mentionné précédemment, vous allez créer une page de traitement nommée AddToCart.aspx qui sera utilisée pour ajouter de nouveaux produits au panier d’achat de l’utilisateur. Cette page appelle la AddToCart méthode dans la ShoppingCart classe que vous venez de créer. La page AddToCart.aspx s’attend à ce qu’un produit ID lui soit passé. Ce produit ID sera utilisé lors de l’appel de la AddToCart méthode dans la ShoppingCart classe .
Notes
Vous allez modifier le code-behind (AddToCart.aspx.cs) pour cette page, et non l’interface utilisateur de la page (AddToCart.aspx).
Pour créer la fonctionnalité Add-To-Cart :
Dans Explorateur de solutions, cliquez avec le bouton droit sur le projet WingtipToys, puis cliquez sur Ajouter ->Nouvel élément.
La boîte de dialogue Ajouter un nouvel élément s’affiche.Ajoutez une nouvelle page standard (Formulaire Web) à l’application nommée AddToCart.aspx.
Dans Explorateur de solutions, cliquez avec le bouton droit sur la page AddToCart.aspx, puis cliquez sur Afficher le code. Le fichier code-behind AddToCart.aspx.cs est ouvert dans l’éditeur.
Remplacez le code existant dans le code-behind AddToCart.aspx.cs par ce qui suit :
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Diagnostics; using WingtipToys.Logic; namespace WingtipToys { public partial class AddToCart : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string rawId = Request.QueryString["ProductID"]; int productId; if (!String.IsNullOrEmpty(rawId) && int.TryParse(rawId, out productId)) { using (ShoppingCartActions usersShoppingCart = new ShoppingCartActions()) { usersShoppingCart.AddToCart(Convert.ToInt16(rawId)); } } else { Debug.Fail("ERROR : We should never get to AddToCart.aspx without a ProductId."); throw new Exception("ERROR : It is illegal to load AddToCart.aspx without setting a ProductId."); } Response.Redirect("ShoppingCart.aspx"); } } }
Lorsque la page AddToCart.aspx est chargée, le produit ID est récupéré à partir de la chaîne de requête. Ensuite, un instance de la classe de panier d’achat est créé et utilisé pour appeler la AddToCart méthode que vous avez ajoutée précédemment dans ce didacticiel. La AddToCart méthode, contenue dans le fichier ShoppingCartActions.cs , inclut la logique permettant d’ajouter le produit sélectionné au panier ou d’incrémenter la quantité de produit du produit sélectionné. Si le produit n’a pas été ajouté au panier d’achat, le produit est ajouté à la CartItem table de la base de données. Si le produit a déjà été ajouté au panier et que l’utilisateur ajoute un élément supplémentaire du même produit, la quantité de produit est incrémentée dans la CartItem table. Enfin, la page redirige vers la page ShoppingCart.aspx que vous ajouterez à l’étape suivante, où l’utilisateur voit une liste mise à jour d’éléments dans le panier.
Comme mentionné précédemment, un utilisateur ID est utilisé pour identifier les produits associés à un utilisateur spécifique. Cette ID valeur est ajoutée à une ligne de la CartItem table chaque fois que l’utilisateur ajoute un produit au panier d’achat.
Création de l’interface utilisateur du panier d’achat
La page ShoppingCart.aspx affiche les produits que l’utilisateur a ajoutés à son panier. Il permet également d’ajouter, de supprimer et de mettre à jour des éléments dans le panier d’achat.
Dans Explorateur de solutions, cliquez avec le bouton droit sur WingtipToys, cliquez sur Ajouter ->Nouvel élément.
La boîte de dialogue Ajouter un nouvel élément s’affiche.Ajoutez une nouvelle page (Formulaire Web) qui inclut une page master en sélectionnant Formulaire Web à l’aide de la page maître. Nommez la nouvelle page ShoppingCart.aspx.
Sélectionnez Site.Master pour joindre la page master à la page .aspx nouvellement créée.
Dans la page ShoppingCart.aspx , remplacez le balisage existant par le balisage suivant :
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ShoppingCart.aspx.cs" Inherits="WingtipToys.ShoppingCart" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <div id="ShoppingCartTitle" runat="server" class="ContentHead"><h1>Shopping Cart</h1></div> <asp:GridView ID="CartList" runat="server" AutoGenerateColumns="False" ShowFooter="True" GridLines="Vertical" CellPadding="4" ItemType="WingtipToys.Models.CartItem" SelectMethod="GetShoppingCartItems" CssClass="table table-striped table-bordered" > <Columns> <asp:BoundField DataField="ProductID" HeaderText="ID" SortExpression="ProductID" /> <asp:BoundField DataField="Product.ProductName" HeaderText="Name" /> <asp:BoundField DataField="Product.UnitPrice" HeaderText="Price (each)" DataFormatString="{0:c}"/> <asp:TemplateField HeaderText="Quantity"> <ItemTemplate> <asp:TextBox ID="PurchaseQuantity" Width="40" runat="server" Text="<%#: Item.Quantity %>"></asp:TextBox> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Item Total"> <ItemTemplate> <%#: String.Format("{0:c}", ((Convert.ToDouble(Item.Quantity)) * Convert.ToDouble(Item.Product.UnitPrice)))%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Remove Item"> <ItemTemplate> <asp:CheckBox id="Remove" runat="server"></asp:CheckBox> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <div> <p></p> <strong> <asp:Label ID="LabelTotalText" runat="server" Text="Order Total: "></asp:Label> <asp:Label ID="lblTotal" runat="server" EnableViewState="false"></asp:Label> </strong> </div> <br /> </asp:Content>
La page ShoppingCart.aspx inclut un contrôle GridView nommé CartList. Ce contrôle utilise la liaison de modèle pour lier les données du panier d’achat de la base de données au contrôle GridView . Lorsque vous définissez la ItemType propriété du contrôle GridView , l’expression Item de liaison de données est disponible dans le balisage du contrôle et le contrôle devient fortement typé. Comme mentionné précédemment dans cette série de tutoriels, vous pouvez sélectionner les détails de l’objet à l’aide Item d’IntelliSense. Pour configurer un contrôle de données afin d’utiliser la liaison de modèle pour sélectionner des données, vous définissez la SelectMethod propriété du contrôle. Dans le balisage ci-dessus, vous définissez pour SelectMethod utiliser la méthode GetShoppingCartItems qui retourne une liste d’objets CartItem . Le contrôle de données GridView appelle la méthode au moment approprié du cycle de vie de la page et lie automatiquement les données retournées. La GetShoppingCartItems méthode doit toujours être ajoutée.
Récupération des éléments du panier d’achat
Ensuite, vous ajoutez du code au code-behind ShoppingCart.aspx.cs pour récupérer et remplir l’interface utilisateur du panier d’achat.
Dans Explorateur de solutions, cliquez avec le bouton droit sur la page ShoppingCart.aspx, puis cliquez sur Afficher le code. Le fichier code-behind ShoppingCart.aspx.cs est ouvert dans l’éditeur.
Remplacez le code existant par le code ci-dessous :
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using WingtipToys.Models; using WingtipToys.Logic; namespace WingtipToys { public partial class ShoppingCart : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } public List<CartItem> GetShoppingCartItems() { ShoppingCartActions actions = new ShoppingCartActions(); return actions.GetCartItems(); } } }
Comme mentionné ci-dessus, le GridView contrôle de données appelle la GetShoppingCartItems méthode au moment approprié du cycle de vie de la page et lie automatiquement les données retournées. La GetShoppingCartItems méthode crée une instance de l’objetShoppingCartActions. Ensuite, le code utilise cette instance pour retourner les éléments dans le panier en appelant la GetCartItems méthode .
Ajout de produits au panier d’achat
Lorsque la page ProductList.aspx ou ProductDetails.aspx s’affiche, l’utilisateur peut ajouter le produit au panier à l’aide d’un lien. Lorsqu’ils cliquent sur le lien, l’application accède à la page de traitement nommée AddToCart.aspx. La page AddToCart.aspx appelle la méthode dans la AddToCartShoppingCart classe que vous avez ajoutée précédemment dans ce tutoriel.
Maintenant, vous allez ajouter un lien Ajouter au panier à la fois à la page ProductList.aspx et à la page ProductDetails.aspx . Ce lien inclut le produit ID récupéré à partir de la base de données.
Dans Explorateur de solutions, recherchez et ouvrez la page nommée ProductList.aspx.
Ajoutez le balisage mis en surbrillance en jaune à la page ProductList.aspx afin que la page entière s’affiche comme suit :
<%@ Page Title="Products" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductList.aspx.cs" Inherits="WingtipToys.ProductList" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <section> <div> <hgroup> <h2><%: Page.Title %></h2> </hgroup> <asp:ListView ID="productList" runat="server" DataKeyNames="ProductID" GroupItemCount="4" ItemType="WingtipToys.Models.Product" SelectMethod="GetProducts"> <EmptyDataTemplate> <table runat="server"> <tr> <td>No data was returned.</td> </tr> </table> </EmptyDataTemplate> <EmptyItemTemplate> <td runat="server" /> </EmptyItemTemplate> <GroupTemplate> <tr id="itemPlaceholderContainer" runat="server"> <td id="itemPlaceholder" runat="server"></td> </tr> </GroupTemplate> <ItemTemplate> <td runat="server"> <table> <tr> <td> <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>"> <img src="/Catalog/Images/Thumbs/<%#:Item.ImagePath%>" width="100" height="75" style="border: solid" /></a> </td> </tr> <tr> <td> <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>"> <span> <%#:Item.ProductName%> </span> </a> <br /> <span> <b>Price: </b><%#:String.Format("{0:c}", Item.UnitPrice)%> </span> <br /> <a href="/AddToCart.aspx?productID=<%#:Item.ProductID %>"> <span class="ProductListItem"> <b>Add To Cart<b> </span> </a> </td> </tr> <tr> <td> </td> </tr> </table> </p> </td> </ItemTemplate> <LayoutTemplate> <table runat="server" style="width:100%;"> <tbody> <tr runat="server"> <td runat="server"> <table id="groupPlaceholderContainer" runat="server" style="width:100%"> <tr id="groupPlaceholder" runat="server"></tr> </table> </td> </tr> <tr runat="server"> <td runat="server"></td> </tr> <tr></tr> </tbody> </table> </LayoutTemplate> </asp:ListView> </div> </section> </asp:Content>
Test du panier d’achat
Exécutez l’application pour voir comment vous ajoutez des produits au panier.
Appuyez sur F5 pour exécuter l'application.
Une fois que le projet a recréé la base de données, le navigateur s’ouvre et affiche la page Default.aspx .Sélectionnez Voitures dans le menu de navigation de catégorie.
La page ProductList.aspx s’affiche uniquement pour les produits inclus dans la catégorie « Voitures ».
Cliquez sur le lien Ajouter au panier en regard du premier produit répertorié (la voiture convertible).
La page ShoppingCart.aspx s’affiche, montrant la sélection dans votre panier d’achat.
Affichez d’autres produits en sélectionnant Plans dans le menu de navigation de catégorie.
Cliquez sur le lien Ajouter au panier en regard du premier produit répertorié.
La page ShoppingCart.aspx s’affiche avec l’élément supplémentaire.Fermez le navigateur.
Calcul et affichage du total des commandes
En plus d’ajouter des produits au panier d’achat, vous allez ajouter une GetTotal méthode à la ShoppingCart classe et afficher le montant total de la commande dans la page du panier d’achat.
Dans Explorateur de solutions, ouvrez le fichier ShoppingCartActions.cs dans le dossier Logique.
Ajoutez la méthode suivante
GetTotalmise en surbrillance en jaune à laShoppingCartclasse, afin que la classe apparaisse comme suit :using System; using System.Collections.Generic; using System.Linq; using System.Web; using WingtipToys.Models; namespace WingtipToys.Logic { public class ShoppingCartActions : IDisposable { public string ShoppingCartId { get; set; } private ProductContext _db = new ProductContext(); public const string CartSessionKey = "CartId"; public void AddToCart(int id) { // Retrieve the product from the database. ShoppingCartId = GetCartId(); var cartItem = _db.ShoppingCartItems.SingleOrDefault( c => c.CartId == ShoppingCartId && c.ProductId == id); if (cartItem == null) { // Create a new cart item if no cart item exists. cartItem = new CartItem { ItemId = Guid.NewGuid().ToString(), ProductId = id, CartId = ShoppingCartId, Product = _db.Products.SingleOrDefault( p => p.ProductID == id), Quantity = 1, DateCreated = DateTime.Now }; _db.ShoppingCartItems.Add(cartItem); } else { // If the item does exist in the cart, // then add one to the quantity. cartItem.Quantity++; } _db.SaveChanges(); } public void Dispose() { if (_db != null) { _db.Dispose(); _db = null; } } public string GetCartId() { if (HttpContext.Current.Session[CartSessionKey] == null) { if (!string.IsNullOrWhiteSpace(HttpContext.Current.User.Identity.Name)) { HttpContext.Current.Session[CartSessionKey] = HttpContext.Current.User.Identity.Name; } else { // Generate a new random GUID using System.Guid class. Guid tempCartId = Guid.NewGuid(); HttpContext.Current.Session[CartSessionKey] = tempCartId.ToString(); } } return HttpContext.Current.Session[CartSessionKey].ToString(); } public List<CartItem> GetCartItems() { ShoppingCartId = GetCartId(); return _db.ShoppingCartItems.Where( c => c.CartId == ShoppingCartId).ToList(); } public decimal GetTotal() { ShoppingCartId = GetCartId(); // Multiply product price by quantity of that product to get // the current price for each of those products in the cart. // Sum all product price totals to get the cart total. decimal? total = decimal.Zero; total = (decimal?)(from cartItems in _db.ShoppingCartItems where cartItems.CartId == ShoppingCartId select (int?)cartItems.Quantity * cartItems.Product.UnitPrice).Sum(); return total ?? decimal.Zero; } } }
Tout d’abord, la GetTotal méthode obtient l’ID du panier d’achat de l’utilisateur. Ensuite, la méthode obtient le total du panier en multipliant le prix du produit par la quantité de produit pour chaque produit répertorié dans le panier.
Notes
Le code ci-dessus utilise le type nullable «int? ». Les types nullables peuvent représenter toutes les valeurs d’un type sous-jacent, ainsi qu’une valeur null. Pour plus d’informations, consultez Utilisation de types nullables.
Modifier l’affichage du panier d’achat
Ensuite, vous allez modifier le code de la page ShoppingCart.aspx pour appeler la GetTotal méthode et afficher ce total sur la page ShoppingCart.aspx lorsque la page se charge.
Dans Explorateur de solutions, cliquez avec le bouton droit sur la page ShoppingCart.aspx et sélectionnez Afficher le code.
Dans le fichier ShoppingCart.aspx.cs , mettez à jour le
Page_Loadgestionnaire en ajoutant le code suivant mis en surbrillance en jaune :using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using WingtipToys.Models; using WingtipToys.Logic; namespace WingtipToys { public partial class ShoppingCart : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { using (ShoppingCartActions usersShoppingCart = new ShoppingCartActions()) { decimal cartTotal = 0; cartTotal = usersShoppingCart.GetTotal(); if (cartTotal > 0) { // Display Total. lblTotal.Text = String.Format("{0:c}", cartTotal); } else { LabelTotalText.Text = ""; lblTotal.Text = ""; ShoppingCartTitle.InnerText = "Shopping Cart is Empty"; } } } public List<CartItem> GetShoppingCartItems() { ShoppingCartActions actions = new ShoppingCartActions(); return actions.GetCartItems(); } } }
Lorsque la page ShoppingCart.aspx se charge, elle charge l’objet du panier d’achat, puis récupère le total du panier en appelant la GetTotal méthode de la ShoppingCart classe . Si le panier est vide, un message à cet effet s’affiche.
Test du total du panier d’achat
Exécutez l’application maintenant pour voir comment non seulement ajouter un produit au panier d’achat, mais vous pouvez également voir le total du panier d’achat.
Appuyez sur F5 pour exécuter l'application.
Le navigateur s’ouvre et affiche la page Default.aspx .Sélectionnez Voitures dans le menu de navigation de catégorie.
Cliquez sur le lien Ajouter au panier en regard du premier produit.
La page ShoppingCart.aspx s’affiche avec le total des commandes.
Ajoutez d’autres produits (par exemple, un avion) au panier.
La page ShoppingCart.aspx s’affiche avec un total mis à jour pour tous les produits que vous avez ajoutés.
Arrêtez l’application en cours d’exécution en fermant la fenêtre du navigateur.
Ajout de boutons de mise à jour et de paiement au panier d’achat
Pour permettre aux utilisateurs de modifier le panier d’achat, vous allez ajouter un bouton Mettre à jour et un bouton De paiement à la page du panier d’achat. Le bouton Checkout n’est utilisé que plus tard dans cette série de tutoriels.
Dans Explorateur de solutions, ouvrez la page ShoppingCart.aspx à la racine du projet d’application web.
Pour ajouter le bouton Mettre à jour et le bouton Caisse à la page ShoppingCart.aspx , ajoutez le balisage en surbrillance en jaune au balisage existant, comme indiqué dans le code suivant :
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ShoppingCart.aspx.cs" Inherits="WingtipToys.ShoppingCart" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <div id="ShoppingCartTitle" runat="server" class="ContentHead"><h1>Shopping Cart</h1></div> <asp:GridView ID="CartList" runat="server" AutoGenerateColumns="False" ShowFooter="True" GridLines="Vertical" CellPadding="4" ItemType="WingtipToys.Models.CartItem" SelectMethod="GetShoppingCartItems" CssClass="table table-striped table-bordered" > <Columns> <asp:BoundField DataField="ProductID" HeaderText="ID" SortExpression="ProductID" /> <asp:BoundField DataField="Product.ProductName" HeaderText="Name" /> <asp:BoundField DataField="Product.UnitPrice" HeaderText="Price (each)" DataFormatString="{0:c}"/> <asp:TemplateField HeaderText="Quantity"> <ItemTemplate> <asp:TextBox ID="PurchaseQuantity" Width="40" runat="server" Text="<%#: Item.Quantity %>"></asp:TextBox> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Item Total"> <ItemTemplate> <%#: String.Format("{0:c}", ((Convert.ToDouble(Item.Quantity)) * Convert.ToDouble(Item.Product.UnitPrice)))%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Remove Item"> <ItemTemplate> <asp:CheckBox id="Remove" runat="server"></asp:CheckBox> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <div> <p></p> <strong> <asp:Label ID="LabelTotalText" runat="server" Text="Order Total: "></asp:Label> <asp:Label ID="lblTotal" runat="server" EnableViewState="false"></asp:Label> </strong> </div> <br /> <table> <tr> <td> <asp:Button ID="UpdateBtn" runat="server" Text="Update" OnClick="UpdateBtn_Click" /> </td> <td> <!--Checkout Placeholder --> </td> </tr> </table> </asp:Content>
Lorsque l’utilisateur clique sur le bouton Mettre à jour , le UpdateBtn_Click gestionnaire d’événements est appelé. Ce gestionnaire d’événements appelle le code que vous allez ajouter à l’étape suivante.
Ensuite, vous pouvez mettre à jour le code contenu dans le fichier ShoppingCart.aspx.cs pour parcourir les éléments du panier et appeler les RemoveItem méthodes et UpdateItem .
Dans Explorateur de solutions, ouvrez le fichier ShoppingCart.aspx.cs à la racine du projet d’application web.
Ajoutez les sections de code suivantes mises en évidence en jaune au fichier ShoppingCart.aspx.cs :
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using WingtipToys.Models; using WingtipToys.Logic; using System.Collections.Specialized; using System.Collections; using System.Web.ModelBinding; namespace WingtipToys { public partial class ShoppingCart : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { using (ShoppingCartActions usersShoppingCart = new ShoppingCartActions()) { decimal cartTotal = 0; cartTotal = usersShoppingCart.GetTotal(); if (cartTotal > 0) { // Display Total. lblTotal.Text = String.Format("{0:c}", cartTotal); } else { LabelTotalText.Text = ""; lblTotal.Text = ""; ShoppingCartTitle.InnerText = "Shopping Cart is Empty"; UpdateBtn.Visible = false; } } } public List<CartItem> GetShoppingCartItems() { ShoppingCartActions actions = new ShoppingCartActions(); return actions.GetCartItems(); } public List<CartItem> UpdateCartItems() { using (ShoppingCartActions usersShoppingCart = new ShoppingCartActions()) { String cartId = usersShoppingCart.GetCartId(); ShoppingCartActions.ShoppingCartUpdates[] cartUpdates = new ShoppingCartActions.ShoppingCartUpdates[CartList.Rows.Count]; for (int i = 0; i < CartList.Rows.Count; i++) { IOrderedDictionary rowValues = new OrderedDictionary(); rowValues = GetValues(CartList.Rows[i]); cartUpdates[i].ProductId = Convert.ToInt32(rowValues["ProductID"]); CheckBox cbRemove = new CheckBox(); cbRemove = (CheckBox)CartList.Rows[i].FindControl("Remove"); cartUpdates[i].RemoveItem = cbRemove.Checked; TextBox quantityTextBox = new TextBox(); quantityTextBox = (TextBox)CartList.Rows[i].FindControl("PurchaseQuantity"); cartUpdates[i].PurchaseQuantity = Convert.ToInt16(quantityTextBox.Text.ToString()); } usersShoppingCart.UpdateShoppingCartDatabase(cartId, cartUpdates); CartList.DataBind(); lblTotal.Text = String.Format("{0:c}", usersShoppingCart.GetTotal()); return usersShoppingCart.GetCartItems(); } } public static IOrderedDictionary GetValues(GridViewRow row) { IOrderedDictionary values = new OrderedDictionary(); foreach (DataControlFieldCell cell in row.Cells) { if (cell.Visible) { // Extract values from the cell. cell.ContainingField.ExtractValuesFromCell(values, cell, row.RowState, true); } } return values; } protected void UpdateBtn_Click(object sender, EventArgs e) { UpdateCartItems(); } } }
Lorsque l’utilisateur clique sur le bouton Mettre à jour sur la page ShoppingCart.aspx , la méthode UpdateCartItems est appelée. La méthode UpdateCartItems obtient les valeurs mises à jour pour chaque élément du panier d’achat. Ensuite, la méthode UpdateCartItems appelle la UpdateShoppingCartDatabase méthode (ajoutée et expliquée à l’étape suivante) pour ajouter ou supprimer des éléments du panier. Une fois que la base de données a été mise à jour pour refléter les mises à jour du panier d’achat, le contrôle GridView est mis à jour sur la page du panier d’achat en appelant la DataBind méthode pour GridView. En outre, le montant total de la commande sur la page du panier d’achat est mis à jour pour refléter la liste mise à jour des éléments.
Mise à jour et suppression d’éléments du panier d’achat
Dans la page ShoppingCart.aspx , vous pouvez voir que des contrôles ont été ajoutés pour mettre à jour la quantité d’un élément et supprimer un élément. Maintenant, ajoutez le code qui fera fonctionner ces contrôles.
Dans Explorateur de solutions, ouvrez le fichier ShoppingCartActions.cs dans le dossier Logique.
Ajoutez le code suivant mis en surbrillance en jaune au fichier de classe ShoppingCartActions.cs :
using System; using System.Collections.Generic; using System.Linq; using System.Web; using WingtipToys.Models; namespace WingtipToys.Logic { public class ShoppingCartActions : IDisposable { public string ShoppingCartId { get; set; } private ProductContext _db = new ProductContext(); public const string CartSessionKey = "CartId"; public void AddToCart(int id) { // Retrieve the product from the database. ShoppingCartId = GetCartId(); var cartItem = _db.ShoppingCartItems.SingleOrDefault( c => c.CartId == ShoppingCartId && c.ProductId == id); if (cartItem == null) { // Create a new cart item if no cart item exists. cartItem = new CartItem { ItemId = Guid.NewGuid().ToString(), ProductId = id, CartId = ShoppingCartId, Product = _db.Products.SingleOrDefault( p => p.ProductID == id), Quantity = 1, DateCreated = DateTime.Now }; _db.ShoppingCartItems.Add(cartItem); } else { // If the item does exist in the cart, // then add one to the quantity. cartItem.Quantity++; } _db.SaveChanges(); } public void Dispose() { if (_db != null) { _db.Dispose(); _db = null; } } public string GetCartId() { if (HttpContext.Current.Session[CartSessionKey] == null) { if (!string.IsNullOrWhiteSpace(HttpContext.Current.User.Identity.Name)) { HttpContext.Current.Session[CartSessionKey] = HttpContext.Current.User.Identity.Name; } else { // Generate a new random GUID using System.Guid class. Guid tempCartId = Guid.NewGuid(); HttpContext.Current.Session[CartSessionKey] = tempCartId.ToString(); } } return HttpContext.Current.Session[CartSessionKey].ToString(); } public List<CartItem> GetCartItems() { ShoppingCartId = GetCartId(); return _db.ShoppingCartItems.Where( c => c.CartId == ShoppingCartId).ToList(); } public decimal GetTotal() { ShoppingCartId = GetCartId(); // Multiply product price by quantity of that product to get // the current price for each of those products in the cart. // Sum all product price totals to get the cart total. decimal? total = decimal.Zero; total = (decimal?)(from cartItems in _db.ShoppingCartItems where cartItems.CartId == ShoppingCartId select (int?)cartItems.Quantity * cartItems.Product.UnitPrice).Sum(); return total ?? decimal.Zero; } public ShoppingCartActions GetCart(HttpContext context) { using (var cart = new ShoppingCartActions()) { cart.ShoppingCartId = cart.GetCartId(); return cart; } } public void UpdateShoppingCartDatabase(String cartId, ShoppingCartUpdates[] CartItemUpdates) { using (var db = new WingtipToys.Models.ProductContext()) { try { int CartItemCount = CartItemUpdates.Count(); List<CartItem> myCart = GetCartItems(); foreach (var cartItem in myCart) { // Iterate through all rows within shopping cart list for (int i = 0; i < CartItemCount; i++) { if (cartItem.Product.ProductID == CartItemUpdates[i].ProductId) { if (CartItemUpdates[i].PurchaseQuantity < 1 || CartItemUpdates[i].RemoveItem == true) { RemoveItem(cartId, cartItem.ProductId); } else { UpdateItem(cartId, cartItem.ProductId, CartItemUpdates[i].PurchaseQuantity); } } } } } catch (Exception exp) { throw new Exception("ERROR: Unable to Update Cart Database - " + exp.Message.ToString(), exp); } } } public void RemoveItem(string removeCartID, int removeProductID) { using (var _db = new WingtipToys.Models.ProductContext()) { try { var myItem = (from c in _db.ShoppingCartItems where c.CartId == removeCartID && c.Product.ProductID == removeProductID select c).FirstOrDefault(); if (myItem != null) { // Remove Item. _db.ShoppingCartItems.Remove(myItem); _db.SaveChanges(); } } catch (Exception exp) { throw new Exception("ERROR: Unable to Remove Cart Item - " + exp.Message.ToString(), exp); } } } public void UpdateItem(string updateCartID, int updateProductID, int quantity) { using (var _db = new WingtipToys.Models.ProductContext()) { try { var myItem = (from c in _db.ShoppingCartItems where c.CartId == updateCartID && c.Product.ProductID == updateProductID select c).FirstOrDefault(); if (myItem != null) { myItem.Quantity = quantity; _db.SaveChanges(); } } catch (Exception exp) { throw new Exception("ERROR: Unable to Update Cart Item - " + exp.Message.ToString(), exp); } } } public void EmptyCart() { ShoppingCartId = GetCartId(); var cartItems = _db.ShoppingCartItems.Where( c => c.CartId == ShoppingCartId); foreach (var cartItem in cartItems) { _db.ShoppingCartItems.Remove(cartItem); } // Save changes. _db.SaveChanges(); } public int GetCount() { ShoppingCartId = GetCartId(); // Get the count of each item in the cart and sum them up int? count = (from cartItems in _db.ShoppingCartItems where cartItems.CartId == ShoppingCartId select (int?)cartItems.Quantity).Sum(); // Return 0 if all entries are null return count ?? 0; } public struct ShoppingCartUpdates { public int ProductId; public int PurchaseQuantity; public bool RemoveItem; } } }
La UpdateShoppingCartDatabase méthode, appelée à partir de la UpdateCartItems méthode sur la page ShoppingCart.aspx.cs , contient la logique permettant de mettre à jour ou de supprimer des éléments du panier. La UpdateShoppingCartDatabase méthode itère toutes les lignes de la liste du panier d’achat. Si un élément du panier d’achat a été marqué pour être supprimé ou si la quantité est inférieure à un, la RemoveItem méthode est appelée. Sinon, l’élément du panier d’achat est vérifié pour les mises à jour lorsque la UpdateItem méthode est appelée. Une fois l’élément du panier d’achat supprimé ou mis à jour, les modifications apportées à la base de données sont enregistrées.
La ShoppingCartUpdates structure est utilisée pour contenir tous les éléments du panier d’achat. La UpdateShoppingCartDatabase méthode utilise la ShoppingCartUpdates structure pour déterminer si l’un des éléments doit être mis à jour ou supprimé.
Dans le tutoriel suivant, vous allez utiliser la méthode pour effacer le EmptyCart panier d’achat après l’achat de produits. Mais pour l’instant, vous allez utiliser la GetCount méthode que vous venez d’ajouter au fichier ShoppingCartActions.cs pour déterminer le nombre d’articles dans le panier d’achat.
Ajout d’un compteur de panier d’achat
Pour permettre à l’utilisateur d’afficher le nombre total d’éléments dans le panier d’achat, vous allez ajouter un compteur à la page Site.Master . Ce compteur servira également de lien vers le panier d’achat.
Dans Explorateur de solutions, ouvrez la page Site.Master.
Modifiez le balisage en ajoutant le lien du compteur du panier d’achat comme indiqué en jaune à la section de navigation afin qu’il apparaisse comme suit :
<ul class="nav navbar-nav"> <li><a runat="server" href="~/">Home</a></li> <li><a runat="server" href="~/About">About</a></li> <li><a runat="server" href="~/Contact">Contact</a></li> <li><a runat="server" href="~/ProductList">Products</a></li> <li><a runat="server" href="~/ShoppingCart" ID="cartCount"> </a></li> </ul>Ensuite, mettez à jour le code-behind du fichier Site.Master.cs en ajoutant le code mis en surbrillance en jaune comme suit :
using System; using System.Collections.Generic; using System.Security.Claims; using System.Security.Principal; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Linq; using WingtipToys.Models; using WingtipToys.Logic; namespace WingtipToys { public partial class SiteMaster : MasterPage { private const string AntiXsrfTokenKey = "__AntiXsrfToken"; private const string AntiXsrfUserNameKey = "__AntiXsrfUserName"; private string _antiXsrfTokenValue; protected void Page_Init(object sender, EventArgs e) { // The code below helps to protect against XSRF attacks var requestCookie = Request.Cookies[AntiXsrfTokenKey]; Guid requestCookieGuidValue; if (requestCookie != null && Guid.TryParse(requestCookie.Value, out requestCookieGuidValue)) { // Use the Anti-XSRF token from the cookie _antiXsrfTokenValue = requestCookie.Value; Page.ViewStateUserKey = _antiXsrfTokenValue; } else { // Generate a new Anti-XSRF token and save to the cookie _antiXsrfTokenValue = Guid.NewGuid().ToString("N"); Page.ViewStateUserKey = _antiXsrfTokenValue; var responseCookie = new HttpCookie(AntiXsrfTokenKey) { HttpOnly = true, Value = _antiXsrfTokenValue }; if (FormsAuthentication.RequireSSL && Request.IsSecureConnection) { responseCookie.Secure = true; } Response.Cookies.Set(responseCookie); } Page.PreLoad += master_Page_PreLoad; } protected void master_Page_PreLoad(object sender, EventArgs e) { if (!IsPostBack) { // Set Anti-XSRF token ViewState[AntiXsrfTokenKey] = Page.ViewStateUserKey; ViewState[AntiXsrfUserNameKey] = Context.User.Identity.Name ?? String.Empty; } else { // Validate the Anti-XSRF token if ((string)ViewState[AntiXsrfTokenKey] != _antiXsrfTokenValue || (string)ViewState[AntiXsrfUserNameKey] != (Context.User.Identity.Name ?? String.Empty)) { throw new InvalidOperationException("Validation of Anti-XSRF token failed."); } } } protected void Page_Load(object sender, EventArgs e) { } protected void Page_PreRender(object sender, EventArgs e) { using (ShoppingCartActions usersShoppingCart = new ShoppingCartActions()) { string cartStr = string.Format("Cart ({0})", usersShoppingCart.GetCount()); cartCount.InnerText = cartStr; } } public IQueryable<Category> GetCategories() { var _db = new WingtipToys.Models.ProductContext(); IQueryable<Category> query = _db.Categories; return query; } protected void Unnamed_LoggingOut(object sender, LoginCancelEventArgs e) { Context.GetOwinContext().Authentication.SignOut(); } } }
Avant que la page ne soit rendue au format HTML, l’événement Page_PreRender est déclenché. Dans le Page_PreRender gestionnaire, le nombre total du panier d’achat est déterminé en appelant la GetCount méthode . La valeur retournée est ajoutée à l’étendue cartCount incluse dans le balisage de la page Site.Master . Les <span> balises permettent aux éléments internes d’être correctement rendus. Lorsqu’une page du site s’affiche, le total du panier d’achat s’affiche. L’utilisateur peut également cliquer sur le total du panier d’achat pour afficher le panier d’achat.
Test du panier d’achat terminé
Vous pouvez exécuter l’application maintenant pour voir comment ajouter, supprimer et mettre à jour des éléments dans le panier d’achat. Le total du panier d’achat reflète le coût total de tous les articles du panier d’achat.
Appuyez sur F5 pour exécuter l'application.
Le navigateur s’ouvre et affiche la page Default.aspx .Sélectionnez Voitures dans le menu de navigation de catégorie.
Cliquez sur le lien Ajouter au panier en regard du premier produit.
La page ShoppingCart.aspx s’affiche avec le total des commandes.Sélectionnez Plans dans le menu de navigation de catégorie.
Cliquez sur le lien Ajouter au panier en regard du premier produit.
Définissez la quantité du premier élément du panier sur 3 et sélectionnez la zone Supprimer l’élément case activée du deuxième élément.
Cliquez sur le bouton Mettre à jour pour mettre à jour la page du panier d’achat et afficher le nouveau total des commandes.
Résumé
Dans ce tutoriel, vous avez créé un panier d’achat pour l’exemple d’application Wingtip Toys Web Forms. Au cours de ce didacticiel, vous avez utilisé Entity Framework Code First, des annotations de données, des contrôles de données fortement typés et la liaison de modèle.
Le panier d’achat prend en charge l’ajout, la suppression et la mise à jour d’éléments que l’utilisateur a sélectionnés pour l’achat. En plus d’implémenter la fonctionnalité de panier d’achat, vous avez appris à afficher les éléments du panier d’achat dans un contrôle GridView et à calculer le total des commandes.
Pour comprendre le fonctionnement de la fonctionnalité décrite dans une application métier réelle, vous pouvez voir l’exemple de nopCommerce - ASP.NET basé open source panier d’achat eCommerce. À l’origine, il a été construit sur Web Forms et au fil des ans, il est passé à MVC et maintenant à ASP.NET Core.