Les paniers d'achat sont très importants et peuvent souvent constituer la partie la plus intimidante de la création d'un site de commerce électronique. Ce tutoriel montrera à quel point il est facile d'implémenter un panier en utilisant ASP.NET. De plus, plusieurs explications de base seront fournies pour aider les programmeurs ASP.NET débutants à comprendre ce cadre merveilleux..

Présentation rapide de ASP.NET

Comme ASP.NET n’a pas été beaucoup traité sur NETTUTS, j’ai pensé qu’il serait bon d’inclure un bref aperçu de certains éléments qui le distinguent des autres langues..

1. Le code est compilé. La première fois qu'une page ASP.NET est demandée sur le Web, le code est compilé dans un ou plusieurs fichiers DLL sur le serveur. Cela vous donne la possibilité de simplement copier du code sur le serveur et vous donne l'avantage de la rapidité du code compilé.
2. ASP.NET est un framework orienté objet. Chaque fonction, propriété et page fait partie d'une classe. Par exemple, chaque page Web est sa propre classe qui étend la classe Page. La classe Page a un événement déclenché lors du chargement de la page Web, appelé "événement de chargement de page". Vous pouvez écrire une fonction qui s'abonne à cet événement et qui est appelée. Le même principe s'applique à d'autres événements tels que le clic de bouton et les événements "déroulants" "index sélectionné modifié".
3. La logique est distincte de la conception et du contenu. Ils interagissent les uns avec les autres, mais ils sont dans des endroits séparés. Généralement, cela permet au concepteur de concevoir sans se soucier de la fonction et au programmeur de se concentrer sur la fonction sans regarder la conception. Vous avez le choix de les placer tous les deux dans le même fichier ou dans des fichiers différents. Ceci est similaire au modèle modèle-vue-contrôleur.

Si vous êtes nouveau sur ASP.NET (et que vous avez Windows), vous pouvez l’essayer gratuitement. Vous pouvez télécharger Visual Studio Express en visitant le site Web ASP.NET. De même, lorsque vous créez un site Web localement sur votre ordinateur, vous pouvez l’exécuter à tout moment. Visual Studio démarre rapidement un serveur sur votre ordinateur et affiche votre site Web dans votre navigateur par défaut..

Étape 1: Créer la classe ShoppingCart

Nous avons besoin d’un endroit pour stocker les articles dans le panier ainsi que de fonctions pour manipuler les articles. Nous allons créer une classe ShoppingCart pour cela. Cette classe va également gérer le stockage de session.

Tout d'abord, nous devons créer le dossier App_Code. Pour ce faire, allez dans le menu "Site Web", puis "Ajouter un dossier ASP.NET" et choisissez "Code_App". C'est ici que nous allons placer toutes nos classes personnalisées. Ces classes seront automatiquement accessibles depuis le code de l’une de nos pages (nous n’avons pas besoin de le référencer en utilisant quelque chose de similaire à "include" ou quoi que ce soit). Ensuite, nous pouvons ajouter une classe à ce dossier en faisant un clic droit sur le dossier et en choisissant "Ajouter un nouvel élément".

Conseil rapide: Les régions dans ASP.NET sont vraiment sympas pour organiser et regrouper du code. La meilleure chose à leur sujet est que vous pouvez ouvrir et fermer des régions afin de minimiser la quantité de code que vous consultez ou de vous repérer rapidement dans un fichier..

 using System.Collections.Generic; using System.Web; / ** * La classe ShoppingCart * * Contient les éléments présents dans le panier et fournit des méthodes pour les manipuler * / public class ShoppingCart #region Properties public List Articles get; ensemble privé;  #endregion #region Implémentation Singleton // Les propriétés en lecture seule ne peuvent être définies qu'en initialisation ou dans un constructeur public static en lecture seule ShoppingCart Instance; // Le constructeur statique est appelé dès que la classe est chargée en mémoire statique ShoppingCart () // Si le panier n'est pas dans la session, créez-en un et mettez-le là // Sinon, récupérez-le à partir de la session if (HttpContext .Current.Session ["ASPNETShoppingCart"] == null) Instance = new ShoppingCart (); Instance.Items = nouvelle liste(); HttpContext.Current.Session ["ASPNETShoppingCart"] = Instance;  else Instance = (Panier) HttpContext.Current.Session ["ASPNETShoppingCart"];  // Un constructeur protégé garantit qu'aucun objet ne peut être créé de l'extérieur. ShoppingCart ()  # #endregion #region Méthodes de modification d'élément / ** * AddItem () - Ajoute un élément à shopping * / public void AddItem (int productId) // Créer un nouvel élément à ajouter au panier CartItem newItem = new CartItem (productId); // Si cet élément existe déjà dans notre liste d'éléments, augmentez la quantité // Sinon, ajoutez le nouvel élément à la liste if (Items.Contains (newItem)) foreach (élément CartItem in Items) if (item.Equals (newItem)) item.Quantity ++; revenir;  else newItem.Quantity = 1; Items.Add (newItem);  / ** * SetItemQuantity () - Modifie la quantité d'un article du panier * / public void SetItemQuantity (int productId, int quantit) // Si nous définissons la quantité sur 0, supprimons entièrement l'élément si (quantité == 0) RemoveItem (productId); revenir;  // Trouver l'article et mettre à jour la quantité CartItem updatedItem = new CartItem (productId); foreach (élément CartItem dans Items) if (item.Equals (updatedItem)) item.Quantity = quantité; revenir;  / ** * RemoveItem () - Supprime un article du panier * / public void RemoveItem (int productId) CartItem removeItem = new CartItem (productId); Items.Remove (removeItem);  #endregion #region Méthodes de rapport / ** * GetSubTotal () - renvoie le prix total de tous les éléments * avant taxes, envoi, etc. * / public décimal GetSubTotal () decimal subTotal = 0; foreach (élément CartItem dans Items) subTotal + = item.TotalPrice; retour sous-total;  #endregion

Étape 2: Les catégories CartItem & Product

Avec un emplacement pour stocker nos articles dans le panier, nous devons pouvoir stocker des informations sur chaque article. Nous allons créer une classe CartItem qui le fera. Nous allons également créer une classe de produits simple qui simulera un moyen de récupérer des données sur les produits que nous vendons..

La classe CartItem:

 en utilisant le système; / ** * La classe CartItem * * Fondamentalement une structure pour la conservation des données d'élément * / classe publique CartItem: IEquatable #region Properties // Un emplacement pour stocker la quantité dans le panier // Cette propriété a un getter et un setter implicites. public int Quantity get; ensemble;  private int _productId; public int ProductId get return _productId;  set // Pour s'assurer que l'objet Prod sera recréé _product = null; _productId = valeur;  private Product _product = null; public Product Prod get // Initialisation différée - l'objet ne sera pas créé jusqu'à ce qu'il soit nécessaire si (_product == null) _product = new Product (ProductId);  return _product;  chaîne publique Description get return Prod.Description;  décimal public UnitPrice get return Prod.Price;  décimal public TotalPrice get return UnitPrice * Quantity;  #endregion // Le constructeur CartItem a juste besoin d'un productId public CartItem (int productId) this.ProductId = productId;  / ** * Equals () - Nécessaire pour implémenter l'interface IEquatable * Vérifie si cet élément est égal au paramètre * Cette méthode est appelée par la méthode Contains () de la classe List * Nous avons utilisé cette méthode Contains () dans la méthode ShoppingCart AddItem () * / public bool Equals (élément CartItem) return item.ProductId == this.ProductId; 

La classe de produit:

 / ** * La classe de produits * * Ceci est juste pour simuler un moyen d'accéder aux données sur nos produits * / public class Produit public int Id get; ensemble;  public decimal Price get; ensemble;  chaîne publique Description get; ensemble;  public Product (int id) this.Id = id; switch (id) cas 1: this.Price = 19.95m; this.Description = "Chaussures"; Pause; cas 2: this.Price = 9,95 m; this.Description = "Chemise"; Pause; cas 3: this.Price = 14,95 m; this.Description = "Pantalon"; Pause; 

Définition: Une "propriété" dans ASP.NET est une variable dans une classe qui a un setter, un getter ou les deux. Ceci est similaire aux autres langages, mais dans ASP.NET, le mot propriété se réfère spécifiquement à cela. Un exemple de ceci est la propriété ProductId dans la classe CartItem. Ce n'est pas simplement une variable dans une classe avec une méthode pour l'obtenir ou la définir. Il est déclaré de manière spéciale avec les blocs get et set ..

Ajoutons des articles au panier

Après avoir si longtemps compris le code, il est temps de faire quelque chose de visuel. Cette page sera simplement un moyen d’ajouter des articles au panier. Tout ce dont nous avons besoin est quelques articles avec des liens "Ajouter au panier". Mettons ce code dans la page Default.aspx.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>        
 
 
Mon magasin
 
 
Des chaussures - Ajouter au panier
 
Chemise - Ajouter au panier
 
Un pantalon - Ajouter au panier
 
 Voir le panier 
 
  

Comme vous pouvez le constater, la seule chose qui se passe ici est que nous avons quelques LinkButtons auxquels sont associés des gestionnaires d’événements OnClick..

Dans la page code-behind, nous avons 4 gestionnaires d’événements. Nous en avons un pour chaque lien qui ajoute un élément au panier et redirige l'utilisateur vers son panier. Nous avons également un gestionnaire d'événements Page_Load créé par défaut par l'EDI que nous n'avions pas besoin d'utiliser..

 en utilisant le système; classe partielle publique _Default: System.Web.UI.Page protégé void Page_Load (expéditeur d'objet, EventArgs e)  protégé void btnAddShoes_Click (expéditeur d'objet, EventArgs e) // Ajoute le produit 1 au panier ShoppingCart.Instance.AddItem (1); // Redirige l'utilisateur pour qu'il visualise son panier Response.Redirect ("ViewCart.aspx");  void protected btnAddShirt_Click (expéditeur d'objet, EventArgs e) ShoppingCart.Instance.AddItem (2); Response.Redirect ("ViewCart.aspx");  void protected btnAddPants_Click (expéditeur d'objet, EventArgs e) ShoppingCart.Instance.AddItem (3); Response.Redirect ("ViewCart.aspx"); 

Construire la page du panier

Enfin, ce que nous avons préparé depuis le début: le panier! Regardons d'abord ViewCart.aspx et je l'expliquerai après cela.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ViewCart.aspx.cs" Inherits="ViewCart" %>        
 
 
Chariot
 < Back to Products 

         ">
 ">       
  
 
  

Le contrôle GridView est un contrôle puissant qui peut sembler compliqué au début. Je ne discuterai pas des éléments de style car ils sont explicites. (Il y a quelques principes ici que je ne vais pas expliquer en profondeur. Je vais juste essayer de faire passer l'idée principale). Faisons le décomposer.

• Donner un identifiant à GridView nous permettra d’accéder à GridView à partir du code-behind en utilisant cet identifiant.

  ID = "gvShoppingCart"

• GridView générera automatiquement des colonnes et des noms de colonnes à partir des données que nous fournissons, à moins que nous ne leur indiquions spécifiquement de ne pas.

  AutoGenerateColumns = "false"

• Nous pouvons dire au GridView ce qu’il faut afficher au cas où nous le fournirions sans données.

  EmptyDataText = "Il n'y a rien dans votre panier."

• Nous voulons montrer le pied de page afin que nous puissions afficher le prix total.

  ShowFooter = "true"

• Nous aurions intérêt à disposer d'un tableau de ProductIds indexé par l'index de ligne lorsque nous mettons à jour la quantité d'un article de panier dans le code-behind. Cela fera cela pour nous:

  DataKeyNames = "ProductId"

• Nous avons besoin que les événements répondent à deux événements: RowDataBound et RowCommand. Fondamentalement, RowDataBound est déclenché lorsque GridView prend une ligne de nos données et l'ajoute à la table. Nous utilisons cet événement uniquement pour répondre au pied de page lié afin que nous puissions personnaliser ce que nous voulons afficher ici. RowCommand est déclenché lorsqu'un clic sur un lien ou un bouton est effectué depuis l'intérieur du GridView. Dans ce cas, il s’agit du lien "Supprimer".

  OnRowDataBound = "gvShoppingCart_RowDataBound" OnRowCommand = "gvShoppingCart_RowCommand"

Parlons maintenant des colonnes. Nous définissons les colonnes ici et GridView prendra chaque ligne dans les données que nous fournissons et mappera les données de cette ligne à la colonne dans laquelle elle devrait s'afficher. La colonne la plus simple est BoundField. Dans notre cas, il va rechercher une propriété "Description" dans notre objet CartItem et l'afficher dans la première colonne. L'en-tête de cette colonne affichera également "Description".

Nous avions besoin de la quantité à afficher dans une zone de texte plutôt que de simplement afficher du texte. Nous avons donc utilisé un TemplateField. Le TemplateField vous permet de mettre ce que vous voulez dans cette colonne. Si vous avez besoin de certaines données de la ligne, vous insérez simplement <%# Eval("PropertyName") %>. Le LinkButton que nous avons mis dans notre TemplateField a un CommandName et un CommandArgument, qui seront tous deux transmis à notre gestionnaire d'événements RowCommand de GridView..

La dernière chose à noter ici est que les deux derniers BoundField ont un DataFormatString spécifié. Il ne s'agit que de l'une des nombreuses chaînes de format fournies par ASP.NET. Celui-ci formate le nombre en tant que devise. Voir la documentation Microsoft pour d'autres chaînes de format..

Nous pouvons maintenant regarder la page code-behind. J'ai fourni beaucoup de commentaires ici pour décrire ce qui se passe.

Le résultat final:

Maintenant, nous avons un bon panier de travail!

Vous pourriez aussi aimer…

Comment rechercher un site Web avec ASP.NET 3.5 - screencast

1er octobre dans Screencasts par Jeffrey Way

56

Je suis heureux de dire qu'aujourd'hui, nous publions notre tout premier article sur ASP.NET. Dans ce screencast, je vais vous montrer comment implémenter une fonctionnalité de recherche simple sur votre site web personnel. Nous allons passer en revue de nombreuses nouvelles fonctionnalités d'ASP.NET 3.5, telles que LINQ et de nombreux contrôles AJAX fournis avec Visual Studio / Web Developer..

Continuer la lecture

• Abonnez-vous au flux RSS NETTUTS pour plus de commentaires et d'articles sur le développement Web au quotidien.