Einkaufswagen
von Erik Reitan
Wingtip Toys Sample Project (C#) oder E-Book herunterladen (PDF)
In dieser Tutorialreihe erfahren Sie die Grundlagen zum Erstellen einer ASP.NET Web Forms-Anwendung mit ASP.NET 4.5 und Microsoft Visual Studio Express 2013 für Web. Für diese Tutorialreihe steht ein Visual Studio 2013 Projekt mit C#-Quellcode zur Verfügung.
In diesem Tutorial wird die Geschäftslogik beschrieben, die zum Hinzufügen eines Warenkorbs zum Wingtip Toys-Beispiel ASP.NET Web Forms Anwendung erforderlich ist. Dieses Tutorial baut auf dem vorherigen Tutorial "Datenelemente und Details anzeigen" auf und ist Teil der Tutorialreihe Wingtip Toy Store. Wenn Sie dieses Tutorial abgeschlossen haben, können die Benutzer Ihrer Beispiel-App die Produkte in ihrem Warenkorb hinzufügen, entfernen und ändern.
Sie lernen Folgendes:
- Erstellen eines Warenkorbs für die Webanwendung
- So ermöglichen Sie Benutzern das Hinzufügen von Artikeln zum Warenkorb.
- Hinzufügen eines GridView-Steuerelements zum Anzeigen von Warenkorbdetails
- Berechnen und Anzeigen der Auftragssumme
- So entfernen und aktualisieren Sie Elemente im Warenkorb.
- So fügen Sie einen Warenkorbzähler ein.
Codefeatures in diesem Tutorial:
- Entity Framework Code First
- Datenanmerkungen
- Stark typisierte Datensteuerelemente
- Modellbindung
Erstellen eines Warenkorbs
Zuvor in dieser Tutorialreihe haben Sie Seiten und Code hinzugefügt, um Produktdaten aus einer Datenbank anzuzeigen. In diesem Tutorial erstellen Sie einen Warenkorb, um die Produkte zu verwalten, die Benutzer kaufen möchten. Benutzer können Elemente durchsuchen und dem Warenkorb hinzufügen, auch wenn sie nicht registriert oder angemeldet sind. Um den Warenkorbzugriff zu verwalten, weisen Sie Benutzern einen eindeutigen ID Benutzer mithilfe eines global eindeutigen Bezeichners (GUID) zu, wenn der Benutzer zum ersten Mal auf den Warenkorb zugreift. Sie speichern dies ID mithilfe des ASP.NET Sitzungsstatus.
Hinweis
Der ASP.NET Sitzungsstatus ist ein bequemer Ort zum Speichern benutzerspezifischer Informationen, die ablaufen, nachdem der Benutzer die Website verlassen hat. Während ein Missbrauch des Sitzungszustands Auswirkungen auf die Leistung auf größere Websites haben kann, funktioniert die leichte Verwendung des Sitzungszustands gut zu Demonstrationszwecken. Das Wingtip Toys-Beispielprojekt zeigt, wie der Sitzungszustand ohne einen externen Anbieter verwendet wird, bei dem der Sitzungszustand prozessintern auf dem Webserver gespeichert wird, der die Website hostet. Für größere Standorte, die mehrere Instanzen einer Anwendung bereitstellen, oder für Standorte, die mehrere Instanzen einer Anwendung auf verschiedenen Servern ausführen, sollten Sie windows Azure Cache Service verwenden. Dieser Cachedienst stellt einen verteilten Zwischenspeicherdienst bereit, der sich außerhalb der Website befindet und das Problem der Verwendung des Prozesssitzungszustands löst. Weitere Informationen finden Sie unter Verwenden ASP.NET Sitzungsstatus mit Windows Azure-Websites.
Hinzufügen von CartItem als Modellklasse
Zuvor in dieser Tutorialreihe haben Sie das Schema für die Kategorie- und Produktdaten definiert, indem Sie die Category Klassen und Product im Ordner Models erstellen. Fügen Sie nun eine neue Klasse hinzu, um das Schema für den Warenkorb zu definieren. Später in diesem Tutorial fügen Sie eine Klasse hinzu, um den Datenzugriff auf die CartItem Tabelle zu behandeln. Diese Klasse stellt die Geschäftslogik zum Hinzufügen, Entfernen und Aktualisieren von Elementen im Warenkorb bereit.
Klicken Sie mit der rechten Maustaste auf den Ordner Models , und wählen Sie Hinzufügen –>Neues Element aus.
Das Dialogfeld Neues Element hinzufügen wird angezeigt. Wählen Sie Code und dann Klasse aus.
Nennen Sie diese neue Klasse CartItem.cs.
Klicken Sie auf Hinzufügen.
Die neue Klassendatei wird im Editor angezeigt.Ersetzen Sie den Standardcode durch den folgenden Code:
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; } } }
Die CartItem -Klasse enthält das Schema, das jedes Produkt definiert, das ein Benutzer dem Warenkorb hinzufügt. Diese Klasse ähnelt den anderen Schemaklassen, die Sie zuvor in dieser Tutorialreihe erstellt haben. Gemäß der Konvention erwartet Entity Framework Code First, dass der Primärschlüssel für die CartItem Tabelle entweder CartItemId oder IDist. Der Code überschreibt jedoch das Standardverhalten mithilfe des Datenanmerkungsattributs [Key] . Das Key Attribut der ItemId-Eigenschaft gibt an, dass die ItemID Eigenschaft der Primärschlüssel ist.
Die CartId -Eigenschaft gibt den ID des Benutzers an, der dem zu erwerbenden Element zugeordnet ist. Sie fügen Code hinzu, um diesen Benutzer ID zu erstellen, wenn der Benutzer auf den Warenkorb zugreift. Dies ID wird auch als ASP.NET Sitzungsvariable gespeichert.
Aktualisieren des Produktkontexts
Zusätzlich zum Hinzufügen der CartItem -Klasse müssen Sie die Datenbankkontextklasse aktualisieren, die die Entitätsklassen verwaltet und Datenzugriff auf die Datenbank ermöglicht. Dazu fügen Sie der Klasse die neu erstellte CartItem Modellklasse hinzu ProductContext .
Suchen Und öffnen Sie in Projektmappen-Explorer die Datei ProductContext.cs im Ordner Models.
Fügen Sie den hervorgehobenen Code wie folgt zur Datei ProductContext.cs hinzu:
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; } } }
Wie bereits in dieser Tutorialreihe erwähnt, fügt der Code in der Datei ProductContext.cs den System.Data.Entity Namespace hinzu, sodass Sie Zugriff auf alle Kernfunktionen von Entity Framework haben. Diese Funktionalität umfasst die Möglichkeit, Daten durch Arbeiten mit stark typisierten Objekten abzufragen, einzufügen, zu aktualisieren und zu löschen. Die ProductContext -Klasse fügt Zugriff auf die neu hinzugefügte Modellklasse hinzu CartItem .
Verwalten der Einkaufswagen-Geschäftslogik
Als Nächstes erstellen Sie die ShoppingCart -Klasse in einem neuen Logic-Ordner . Die ShoppingCart -Klasse übernimmt den Datenzugriff auf die CartItem Tabelle. Die Klasse enthält auch die Geschäftslogik zum Hinzufügen, Entfernen und Aktualisieren von Elementen im Warenkorb.
Die Warenkorblogik, die Sie hinzufügen, enthält die Funktionalität zum Verwalten der folgenden Aktionen:
- Hinzufügen von Artikeln zum Warenkorb
- Entfernen von Artikeln aus dem Warenkorb
- Abrufen der Warenkorb-ID
- Abrufen von Artikeln aus dem Warenkorb
- Gesamtsumme aller Warenkorbartikel
- Aktualisieren der Warenkorbdaten
Eine Warenkorbseite (ShoppingCart.aspx) und die Warenkorbklasse werden zusammen verwendet, um auf Warenkorbdaten zuzugreifen. Auf der Warenkorbseite werden alle Elemente angezeigt, die der Benutzer dem Warenkorb hinzufügt. Neben der Warenkorbseite und -klasse erstellen Sie eine Seite (AddToCart.aspx), um Produkte zum Warenkorb hinzuzufügen. Außerdem fügen Sie der Seite ProductList.aspx und der Seite ProductDetails.aspx Code hinzu, die einen Link zur Seite AddToCart.aspx bereitstellen, damit der Benutzer Produkte zum Warenkorb hinzufügen kann.
Das folgende Diagramm zeigt den grundlegenden Prozess, der auftritt, wenn der Benutzer dem Warenkorb ein Produkt hinzufügt.
Wenn der Benutzer auf der Seite ProductList.aspx oder auf der Seite ProductDetails.aspx auf den Link Zum Warenkorb hinzufügen klickt, navigiert die Anwendung zur Seite AddToCart.aspx und dann automatisch zur Seite ShoppingCart.aspx. Die Seite AddToCart.aspx fügt das ausgewählte Produkt dem Warenkorb hinzu, indem eine Methode in der ShoppingCart-Klasse aufgerufen wird. Auf der Seite ShoppingCart.aspx werden die Produkte angezeigt, die dem Warenkorb hinzugefügt wurden.
Erstellen der Warenkorbklasse
Die ShoppingCart -Klasse wird einem separaten Ordner in der Anwendung hinzugefügt, sodass eine klare Unterscheidung zwischen dem Modell (Ordner Models), den Seiten (Stammordner) und der Logik (Logikordner) besteht.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das WingtipToys-Projekt, und wählen Sie Add-New>Folder (Neuer Ordner hinzufügen) aus. Nennen Sie den neuen Ordner Logic.
Klicken Sie mit der rechten Maustaste auf den Ordner Logic , und wählen Sie dann Hinzufügen –>Neues Element aus.
Fügen Sie eine neue Klassendatei mit dem Namen ShoppingCartActions.cs hinzu.
Ersetzen Sie den Standardcode durch den folgenden Code:
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(); } } }
Die AddToCart Methode ermöglicht es, einzelne Produkte basierend auf dem Produkt IDin den Warenkorb aufzunehmen. Das Produkt wird dem Warenkorb hinzugefügt, oder wenn der Warenkorb bereits einen Artikel für dieses Produkt enthält, wird die Menge erhöht.
Die GetCartId -Methode gibt den Warenkorb ID für den Benutzer zurück. Der Warenkorb ID wird verwendet, um die Elemente zu verfolgen, die ein Benutzer im Warenkorb hat. Wenn der Benutzer nicht über einen vorhandenen Warenkorb IDverfügt, wird ein neuer Warenkorb ID für den Benutzer erstellt. Wenn der Benutzer als registrierter Benutzer angemeldet ist, wird der Warenkorb ID auf seinen Benutzernamen festgelegt. Wenn der Benutzer jedoch nicht angemeldet ist, wird der Warenkorb ID auf einen eindeutigen Wert (GUID) festgelegt. Eine GUID stellt sicher, dass nur ein Warenkorb für jeden Benutzer erstellt wird, basierend auf der Sitzung.
Die GetCartItems -Methode gibt eine Liste von Warenkorbelementen für den Benutzer zurück. Später in diesem Tutorial werden Sie sehen, dass die Modellbindung verwendet wird, um die Warenkorbelemente im Warenkorb mithilfe der GetCartItems -Methode anzuzeigen.
Erstellen der Add-to-Cart-Funktionalität
Wie bereits erwähnt, erstellen Sie eine Verarbeitungsseite mit dem Namen AddToCart.aspx , die verwendet wird, um dem Warenkorb des Benutzers neue Produkte hinzuzufügen. Auf dieser Seite wird die AddToCart -Methode in der ShoppingCart -Klasse aufgerufen, die Sie gerade erstellt haben. Die Seite AddToCart.aspx erwartet, dass ein Produkt ID an sie übergeben wird. Dieses Produkt ID wird beim Aufrufen der AddToCart -Methode in der ShoppingCart -Klasse verwendet.
Hinweis
Sie ändern das CodeBehind (AddToCart.aspx.cs) für diese Seite, nicht die Seitenbenutzeroberfläche (AddToCart.aspx).
So erstellen Sie die Add-To-Cart-Funktionalität:
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt WingtipToys, und klicken Sie auf Hinzufügen –>Neues Element.
Das Dialogfeld Neues Element hinzufügen wird angezeigt.Fügen Sie der Anwendung eine neue Standardseite (WebFormular) mit dem Namen AddToCart.aspx hinzu.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf die Seite AddToCart.aspx, und klicken Sie dann auf Code anzeigen. Die CodeBehind-Datei AddToCart.aspx.cs wird im Editor geöffnet.
Ersetzen Sie den vorhandenen Code im CodeBehind addToCart.aspx.cs durch Folgendes:
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"); } } }
Wenn die Seite AddToCart.aspx geladen wird, wird das Produkt ID aus der Abfragezeichenfolge abgerufen. Als Nächstes wird eine instance der Warenkorbklasse erstellt und verwendet, um die Methode aufzurufen, die AddToCart Sie weiter oben in diesem Tutorial hinzugefügt haben. Die AddToCart in der Datei ShoppingCartActions.cs enthaltene Methode enthält die Logik, das ausgewählte Produkt dem Warenkorb hinzuzufügen oder die Produktmenge des ausgewählten Produkts inkrementieren. Wenn das Produkt nicht dem Warenkorb hinzugefügt wurde, wird das Produkt der CartItem Tabelle der Datenbank hinzugefügt. Wenn das Produkt bereits dem Warenkorb hinzugefügt wurde und der Benutzer einen zusätzlichen Artikel desselben Produkts hinzufügt, wird die Produktmenge in der CartItem Tabelle erhöht. Schließlich leitet die Seite zurück zur Seite ShoppingCart.aspx , die Sie im nächsten Schritt hinzufügen werden, auf der dem Benutzer eine aktualisierte Liste der Elemente im Warenkorb angezeigt wird.
Wie bereits erwähnt, wird ein Benutzer ID verwendet, um die Produkte zu identifizieren, die einem bestimmten Benutzer zugeordnet sind. Dies ID wird jedes Mal, wenn der CartItem Benutzer dem Warenkorb ein Produkt hinzufügt, einer Zeile in der Tabelle hinzugefügt.
Erstellen der Einkaufswagen-Benutzeroberfläche
Auf der Seite ShoppingCart.aspx werden die Produkte angezeigt, die der Benutzer dem Warenkorb hinzugefügt hat. Es bietet auch die Möglichkeit, Elemente im Warenkorb hinzuzufügen, zu entfernen und zu aktualisieren.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf WingtipToys, und klicken Sie auf Hinzufügen –>Neues Element.
Das Dialogfeld Neues Element hinzufügen wird angezeigt.Fügen Sie eine neue Seite (WebFormular) hinzu, die eine master Seite enthält, indem Sie Webformular mit Gestaltungsvorlage auswählen. Nennen Sie die neue Seite ShoppingCart.aspx.
Wählen Sie Site.Master aus, um die master Seite an die neu erstellte ASPX-Seite anzufügen.
Ersetzen Sie auf der Seite ShoppingCart.aspx das vorhandene Markup durch das folgende Markup:
<%@ 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>
Die Seite ShoppingCart.aspx enthält ein GridView-Steuerelement namens CartList. Dieses Steuerelement verwendet die Modellbindung, um die Warenkorbdaten aus der Datenbank an das GridView-Steuerelement zu binden. Wenn Sie die ItemType Eigenschaft des GridView-Steuerelements festlegen, ist der Datenbindungsausdruck Item im Markup des Steuerelements verfügbar, und das Steuerelement wird stark typisiert. Wie bereits in dieser Tutorialreihe erwähnt, können Sie details des Item Objekts mithilfe von IntelliSense auswählen. Um ein Datensteuerelement für die Verwendung der Modellbindung zum Auswählen von Daten zu konfigurieren, legen Sie die SelectMethod -Eigenschaft des Steuerelements fest. Im obigen Markup legen Sie fest SelectMethod , dass die GetShoppingCartItems-Methode verwendet wird, die eine Liste von CartItem Objekten zurückgibt. Das GridView-Datensteuerelement ruft die -Methode zum geeigneten Zeitpunkt im Seitenlebenszyklus auf und bindet die zurückgegebenen Daten automatisch. Die GetShoppingCartItems -Methode muss noch hinzugefügt werden.
Abrufen der Warenkorbelemente
Als Nächstes fügen Sie Code zum CodeBehind shoppingCart.aspx.cs hinzu, um die Einkaufswagenbenutzeroberfläche abzurufen und aufzufüllen.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf die Seite ShoppingCart.aspx, und klicken Sie dann auf Code anzeigen. Die CodeBehind-Datei ShoppingCart.aspx.cs wird im Editor geöffnet.
Ersetzen Sie den vorhandenen Code durch folgenden Code:
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(); } } }
Wie bereits erwähnt, ruft das GridView Datensteuerelement die -Methode zum GetShoppingCartItems geeigneten Zeitpunkt im Seitenlebenszyklus auf und bindet die zurückgegebenen Daten automatisch. Die GetShoppingCartItems -Methode erstellt eine instance des ShoppingCartActions -Objekts. Anschließend verwendet der Code dieses instance, um die Elemente im Warenkorb durch Aufrufen der GetCartItems -Methode zurückzugeben.
Hinzufügen von Produkten zum Warenkorb
Wenn entweder die Seite ProductList.aspx oder ProductDetails.aspx angezeigt wird, kann der Benutzer das Produkt über einen Link zum Warenkorb hinzufügen. Wenn sie auf den Link klicken, navigiert die Anwendung zur Verarbeitungsseite namens AddToCart.aspx. Die Seite AddToCart.aspx ruft die -Methode in der AddToCartShoppingCart Klasse auf, die Sie weiter oben in diesem Tutorial hinzugefügt haben.
Nun fügen Sie einen Link Zum Warenkorb hinzufügen sowohl zur Seite ProductList.aspx als auch zur Seite ProductDetails.aspx hinzu. Dieser Link enthält das Produkt ID , das aus der Datenbank abgerufen wird.
Suchen Sie in Projektmappen-Explorer die Seite ProductList.aspx, und öffnen Sie sie.
Fügen Sie das gelb hervorgehobene Markup zur Seite ProductList.aspx hinzu, damit die gesamte Seite wie folgt angezeigt wird:
<%@ 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>
Testen des Einkaufswagens
Führen Sie die Anwendung aus, um zu sehen, wie Sie Produkte zum Warenkorb hinzufügen.
Drücken Sie F5, um die Anwendung auszuführen.
Nachdem das Projekt die Datenbank neu erstellt hat, wird der Browser geöffnet und die Seite Default.aspx angezeigt.Wählen Sie im Navigationsmenü der Kategorie Die Option Autos aus.
Die Seite ProductList.aspx wird nur mit Produkten angezeigt, die in der Kategorie "Cars" enthalten sind.
Klicken Sie neben dem ersten aufgeführten Produkt (dem Cabriocar) auf den Link In den Warenkorb .
Die Seite ShoppingCart.aspx wird angezeigt, auf der die Auswahl in Ihrem Warenkorb angezeigt wird.
Zeigen Sie zusätzliche Produkte an, indem Sie im Navigationsmenü der Kategorie Ebenen auswählen.
Klicken Sie neben dem ersten aufgeführten Produkt auf den Link In den Warenkorb .
Die Seite ShoppingCart.aspx wird mit dem zusätzlichen Element angezeigt.Schließen Sie den Browser.
Berechnen und Anzeigen der Auftragssumme
Zusätzlich zum Hinzufügen von Produkten zum Warenkorb fügen Sie der ShoppingCart Klasse eine GetTotal Methode hinzu und zeigen den Gesamtbetrag der Bestellung auf der Warenkorbseite an.
Öffnen Sie in Projektmappen-Explorer die Datei ShoppingCartActions.cs im Ordner Logic.
Fügen Sie der Klasse die
ShoppingCartfolgendeGetTotalgelb hervorgehobene Methode hinzu, damit die Klasse wie folgt angezeigt wird: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; } } }
Zunächst ruft die GetTotal Methode die ID des Warenkorbs für den Benutzer ab. Anschließend erhält die Methode die Warenkorbsumme, indem der Produktpreis mit der Produktmenge für jedes im Warenkorb aufgeführte Produkt multipliziert wird.
Hinweis
Der obige Code verwendet den Nullable-Typ "int?". Nullable-Typen können alle Werte eines zugrunde liegenden Typs und auch als NULL-Wert darstellen. Weitere Informationen finden Sie unter Verwenden von Nullable-Typen.
Ändern der Warenkorbanzeige
Als Nächstes ändern Sie den Code für die Seite ShoppingCart.aspx , um die GetTotal -Methode aufzurufen und diese Summe auf der Seite ShoppingCart.aspx anzuzeigen, wenn die Seite geladen wird.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf die Seite ShoppingCart.aspx, und wählen Sie Code anzeigen aus.
Aktualisieren Sie in der Datei ShoppingCart.aspx.cs den
Page_LoadHandler, indem Sie den folgenden gelb hervorgehobenen Code hinzufügen: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(); } } }
Wenn die Seite ShoppingCart.aspx geladen wird, lädt sie das Warenkorbobjekt und ruft dann die Warenkorbsumme ab, indem die GetTotal -Methode der ShoppingCart -Klasse aufgerufen wird. Wenn der Warenkorb leer ist, wird eine meldung angezeigt.
Testen der Warenkorbsumme
Führen Sie die Anwendung jetzt aus, um zu sehen, wie Sie nicht nur ein Produkt zum Einkaufswagen hinzufügen, sondern auch die Warenkorbsumme anzeigen können.
Drücken Sie F5, um die Anwendung auszuführen.
Der Browser wird geöffnet und zeigt die Seite Default.aspx an.Wählen Sie im Navigationsmenü der Kategorie Die Option Autos aus.
Klicken Sie neben dem ersten Produkt auf den Link In den Warenkorb hinzufügen .
Die Seite ShoppingCart.aspx wird mit der Bestellsumme angezeigt.
Fügen Sie dem Warenkorb einige andere Produkte (z. B. eine Ebene) hinzu.
Die Seite ShoppingCart.aspx wird mit einer aktualisierten Summe für alle produkte angezeigt, die Sie hinzugefügt haben.
Beenden Sie die ausgeführte App, indem Sie das Browserfenster schließen.
Hinzufügen der Schaltflächen "Aktualisieren" und "Auschecken" zum Warenkorb
Damit die Benutzer den Einkaufswagen ändern können, fügen Sie der Warenkorbseite eine Schaltfläche Aktualisieren und eine Schaltfläche Zur Kasse hinzu. Die Schaltfläche Auschecken wird erst später in dieser Tutorialreihe verwendet.
Öffnen Sie in Projektmappen-Explorer die Seite ShoppingCart.aspx im Stammverzeichnis des Webanwendungsprojekts.
Um der Seite ShoppingCart.aspx die Schaltfläche Aktualisieren und die Schaltfläche Auschecken hinzuzufügen, fügen Sie dem vorhandenen Markup das gelb hervorgehobene Markup hinzu, wie im folgenden Code gezeigt:
<%@ 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>
Wenn der Benutzer auf die Schaltfläche Aktualisieren klickt, wird der UpdateBtn_Click Ereignishandler aufgerufen. Dieser Ereignishandler ruft den Code auf, den Sie im nächsten Schritt hinzufügen.
Als Nächstes können Sie den in der Datei ShoppingCart.aspx.cs enthaltenen Code aktualisieren, um die Warenkorbelemente zu durchlaufen und die RemoveItem Methoden und UpdateItem aufzurufen.
Öffnen Sie in Projektmappen-Explorer die Datei ShoppingCart.aspx.cs im Stammverzeichnis des Webanwendungsprojekts.
Fügen Sie der Datei ShoppingCart.aspx.cs die folgenden gelb hervorgehobenen Codeabschnitte hinzu:
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(); } } }
Wenn der Benutzer auf der Seite ShoppingCart.aspx auf die Schaltfläche Aktualisieren klickt, wird die UpdateCartItems-Methode aufgerufen. Die UpdateCartItems-Methode ruft die aktualisierten Werte für jedes Element im Warenkorb ab. Anschließend ruft die UpdateCartItems-Methode die UpdateShoppingCartDatabase -Methode auf (im nächsten Schritt hinzugefügt und erläutert), um Elemente aus dem Warenkorb hinzuzufügen oder daraus zu entfernen. Nachdem die Datenbank aktualisiert wurde, um die Aktualisierungen des Warenkorbs widerzuspiegeln, wird das GridView-Steuerelement auf der Warenkorbseite aktualisiert, indem die DataBind -Methode für GridView aufgerufen wird. Außerdem wird der Gesamtbetrag der Bestellung auf der Warenkorbseite aktualisiert, um die aktualisierte Liste der Artikel widerzuspiegeln.
Aktualisieren und Entfernen von Warenkorbelementen
Auf der Seite ShoppingCart.aspx können Sie sehen, dass Steuerelemente hinzugefügt wurden, um die Menge eines Elements zu aktualisieren und ein Element zu entfernen. Fügen Sie nun den Code hinzu, mit dem diese Steuerelemente funktionieren.
Öffnen Sie in Projektmappen-Explorer die Datei ShoppingCartActions.cs im Ordner Logic.
Fügen Sie der Klassendatei ShoppingCartActions.cs den folgenden gelb hervorgehobenen Code hinzu:
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; } } }
Die UpdateShoppingCartDatabase Methode, die von der UpdateCartItems -Methode auf der Seite ShoppingCart.aspx.cs aufgerufen wird, enthält die Logik zum Aktualisieren oder Entfernen von Elementen aus dem Warenkorb. Die UpdateShoppingCartDatabase -Methode durchläuft alle Zeilen in der Warenkorbliste. Wenn ein Warenkorbelement als entfernt markiert wurde oder die Menge kleiner als eins ist, wird die RemoveItem -Methode aufgerufen. Andernfalls wird das Warenkorbelement auf Updates überprüft, wenn die UpdateItem -Methode aufgerufen wird. Nachdem das Warenkorbelement entfernt oder aktualisiert wurde, werden die Datenbankänderungen gespeichert.
Die ShoppingCartUpdates -Struktur wird verwendet, um alle Warenkorbelemente aufzunehmen. Die UpdateShoppingCartDatabase -Methode verwendet die ShoppingCartUpdates -Struktur, um zu bestimmen, ob eines der Elemente aktualisiert oder entfernt werden muss.
Im nächsten Tutorial verwenden Sie die EmptyCart -Methode, um den Warenkorb nach dem Kauf von Produkten zu löschen. Vorerst verwenden Sie jedoch die GetCount -Methode, die Sie gerade der Datei ShoppingCartActions.cs hinzugefügt haben, um zu bestimmen, wie viele Elemente sich im Warenkorb befinden.
Hinzufügen eines Warenkorbzählers
Damit der Benutzer die Gesamtzahl der Artikel im Warenkorb anzeigen kann, fügen Sie der Seite Site.Master einen Zähler hinzu. Dieser Indikator fungiert auch als Link zum Warenkorb.
Öffnen Sie in Projektmappen-Explorer die Seite Site.Master.
Ändern Sie das Markup, indem Sie dem Navigationsabschnitt den Link für den Einkaufswagenzähler wie in gelb dargestellt hinzufügen, sodass er wie folgt angezeigt wird:
<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>Aktualisieren Sie als Nächstes den CodeBehind der Datei Site.Master.cs , indem Sie den gelb hervorgehobenen Code wie folgt hinzufügen:
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(); } } }
Bevor die Seite als HTML gerendert wird, wird das Page_PreRender -Ereignis ausgelöst. Page_PreRender Im Handler wird die Gesamtanzahl des Warenkorbs durch Aufrufen der GetCount -Methode bestimmt. Der zurückgegebene Wert wird der cartCount Spanne hinzugefügt, die im Markup der Seite Site.Master enthalten ist. Mit <span> den Tags können die inneren Elemente ordnungsgemäß gerendert werden. Wenn eine Seite der Website angezeigt wird, wird die Warenkorbsumme angezeigt. Der Benutzer kann auch auf die Warenkorbsumme klicken, um den Warenkorb anzuzeigen.
Testen des abgeschlossenen Einkaufswagens
Sie können die Anwendung jetzt ausführen, um zu sehen, wie Sie Elemente im Warenkorb hinzufügen, löschen und aktualisieren können. Die Warenkorbsumme spiegelt die Gesamtkosten aller Artikel im Warenkorb wider.
Drücken Sie F5, um die Anwendung auszuführen.
Der Browser wird geöffnet und zeigt die Seite Default.aspx an.Wählen Sie im Navigationsmenü der Kategorie Die Option Autos aus.
Klicken Sie neben dem ersten Produkt auf den Link In den Warenkorb hinzufügen .
Die Seite ShoppingCart.aspx wird mit der Bestellsumme angezeigt.Wählen Sie im Navigationsmenü der Kategorie die Option Ebenen aus.
Klicken Sie neben dem ersten Produkt auf den Link In den Warenkorb hinzufügen .
Legen Sie die Menge des ersten Artikels im Warenkorb auf 3 fest, und aktivieren Sie das Kontrollkästchen Artikel entfernen des zweiten Artikels.
Klicken Sie auf die Schaltfläche Aktualisieren , um die Warenkorbseite zu aktualisieren und die neue Bestellsumme anzuzeigen.
Zusammenfassung
In diesem Tutorial haben Sie einen Warenkorb für die Wingtip Toys Web Forms Beispielanwendung erstellt. In diesem Tutorial haben Sie Entity Framework Code First, Datenanmerkungen, stark typisierte Datensteuerelemente und Modellbindung verwendet.
Der Warenkorb unterstützt das Hinzufügen, Löschen und Aktualisieren von Elementen, die der Benutzer zum Kauf ausgewählt hat. Zusätzlich zur Implementierung der Warenkorbfunktion haben Sie gelernt, wie Sie Warenkorbelemente in einem GridView-Steuerelement anzeigen und die Bestellsumme berechnen.
Um zu verstehen, wie die beschriebene Funktionalität in einer echten Geschäftsanwendung funktioniert, können Sie sich das Beispiel von nopCommerce ansehen – ASP.NET basierend Open Source eCommerce-Einkaufswagen. Ursprünglich wurde es auf Web Forms gebaut und im Laufe der Jahre wurde es zu MVC und jetzt zu ASP.NET Core.
Zusatzinformationen
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für