Der Einkaufswagen sind sehr wichtig und können oft der schrecklichste Teil beim Aufbau einer E-Commerce-Website sein. Dieses Tutorial zeigt, wie einfach es sein kann, einen Warenkorb mit ASP.NET zu realisieren. Es gibt auch einige grundlegende Erklärungen, die den Anfängern von ASP.NET-Programmierern das Verständnis dieses wunderbaren Frameworks zu erleichtern.

Kurzübersicht über ASP.NET

Da ASP.NET in NETTUTS nicht zu ausführlich behandelt wurde, und ich denke, es wäre gut, einen kurzen Überblick über einige der Dinge zu geben, die es von anderen Sprachen unterscheiden.

1. Code wird kompiliert. Wenn zum ersten Mal eine ASP.NET-Seite über das Web angefordert wird, wird der Code in eine oder mehrere DLL-Dateien auf dem Server kompiliert. Das gibt Ihnen die Möglichkeit, Code einfach auf den Server zu kopieren, und bietet Ihnen den Geschwindigkeitsvorteil von kompiliertem Code.
2. ASP.NET ist ein objektorientiertes Framework. Jede Funktion, Eigenschaft und Seite ist Teil einer Klasse. Beispielsweise ist jede Webseite eine eigene Klasse, die die Page-Klasse erweitert. Die Page-Klasse verfügt über ein Ereignis, das beim Laden der Webseite ausgelöst wird und als "Page Load Event" bezeichnet wird. Sie können eine Funktion schreiben, die dieses Ereignis abonniert und aufgerufen wird. Das gleiche Prinzip gilt für andere Ereignisse wie das Klicken auf die Schaltfläche und "drop-down"-Ereignisse "select index changed".
3. Die Logik ist vom Design und Inhalt getrennt. Sie interagieren miteinander, befinden sich jedoch an unterschiedlichen Orten. Im Allgemeinen kann ein Designer so entwerfen, ohne sich um die Funktion kümmern zu müssen, und der Programmierer kann sich auf die Funktion konzentrieren, ohne das Design zu betrachten. Sie haben die Wahl, beide in dieselbe Datei oder in verschiedene Dateien zu legen. Dies ähnelt dem Modellansicht-Controller-Modell.

Wenn Sie ASP.NET noch nicht kennen (und Windows haben), können Sie es kostenlos ausprobieren. Sie können Visual Studio Express herunterladen, indem Sie die ASP.NET-Website besuchen. Wenn Sie eine Website lokal auf Ihrem Computer erstellen, können Sie die Website jederzeit ausführen, und Visual Studio startet schnell einen Server auf Ihrem Computer und ruft Ihre Website in Ihrem Standardbrowser auf.

Schritt 1: Erstellen Sie die ShoppingCart-Klasse

Wir brauchen einen Platz zum Speichern der Artikel im Warenkorb sowie Funktionen zum Bearbeiten der Artikel. Wir werden dafür eine ShoppingCart-Klasse erstellen. Diese Klasse verwaltet auch den Sitzungsspeicher.

Zuerst müssen wir den Ordner App_Code erstellen. Gehen Sie dazu zum Menü "Website", dann zu "ASP.NET-Ordner hinzufügen" und wählen Sie "App_Code". Hier platzieren wir alle unsere benutzerdefinierten Klassen. Auf diese Klassen kann automatisch über den Code auf einer unserer Seiten zugegriffen werden (wir müssen nicht mit etwas ähnlichem wie "include" oder etwas anderem darauf verweisen). Anschließend können wir diesem Ordner eine Klasse hinzufügen, indem Sie mit der rechten Maustaste auf den Ordner klicken und "Add New Item" auswählen.

Kurztipp: Regionen in ASP.NET lassen sich sehr gut organisieren und Code gruppieren. Das Schönste an ihnen ist, dass Sie Regionen öffnen und schließen können, um die Menge an Code, die Sie betrachten, zu minimieren oder sich schnell in einer Datei zurechtzufinden.

1

using System.Collections.Generic;

2

using System.Web;

3

4

/**

5

 * The ShoppingCart class

6

 * 

7

 * Holds the items that are in the cart and provides methods for their manipulation

8

 */

9

public class ShoppingCart {

10

    #region Properties

11

12

    public List<CartItem> Items { get; private set; }

13

14

    #endregion

15

16

    #region Singleton Implementation

17

18

19

20

    // Readonly properties can only be set in initialization or in a constructor

21

    public static readonly ShoppingCart Instance;

22

23

    // The static constructor is called as soon as the class is loaded into memory

24

    static ShoppingCart() {

25

        // If the cart is not in the session, create one and put it there

26

        // Otherwise, get it from the session

27

        if (HttpContext.Current.Session["ASPNETShoppingCart"] == null) {

28

            Instance = new ShoppingCart();

29

            Instance.Items = new List<CartItem>();

30

            HttpContext.Current.Session["ASPNETShoppingCart"] = Instance;

31

        } else {

32

            Instance = (ShoppingCart)HttpContext.Current.Session["ASPNETShoppingCart"];

33

        }

34

    }

35

36

    // A protected constructor ensures that an object can't be created from outside

37

    protected ShoppingCart() { }

38

39

    #endregion

40

41

    #region Item Modification Methods

42

    /**

43

     * AddItem() - Adds an item to the shopping 

44

     */

45

    public void AddItem(int productId) {

46

        // Create a new item to add to the cart

47

        CartItem newItem = new CartItem(productId);

48

49

        // If this item already exists in our list of items, increase the quantity

50

        // Otherwise, add the new item to the list

51

        if (Items.Contains(newItem)) {

52

            foreach (CartItem item in Items) {

53

                if (item.Equals(newItem)) {

54

                    item.Quantity++;

55

                    return;

56

                }

57

            }

58

        } else {

59

            newItem.Quantity = 1;

60

            Items.Add(newItem);

61

        }

62

    }

63

64

    /**

65

     * SetItemQuantity() - Changes the quantity of an item in the cart

66

     */

67

    public void SetItemQuantity(int productId, int quantity) {

68

        // If we are setting the quantity to 0, remove the item entirely

69

        if (quantity == 0) {

70

            RemoveItem(productId);

71

            return;

72

        }

73

74

        // Find the item and update the quantity

75

        CartItem updatedItem = new CartItem(productId);

76

77

        foreach (CartItem item in Items) {

78

            if (item.Equals(updatedItem)) {

79

                item.Quantity = quantity;

80

                return;

81

            }

82

        }

83

    }

84

85

    /**

86

     * RemoveItem() - Removes an item from the shopping cart

87

     */

88

    public void RemoveItem(int productId) {

89

        CartItem removedItem = new CartItem(productId);

90

        Items.Remove(removedItem);

91

    }

92

    #endregion

93

94

    #region Reporting Methods

95

    /**

96

     * GetSubTotal() - returns the total price of all of the items

97

     *                 before tax, shipping, etc.

98

     */

99

    public decimal GetSubTotal() {

100

        decimal subTotal = 0;

101

        foreach (CartItem item in Items)

102

            subTotal += item.TotalPrice;

103

104

        return subTotal;

105

    }

106

    #endregion

107

}

Schritt 2: Die CartItem- und Produktklassen

Mit einem Platz zum Speichern unserer Warenkorbartikel müssen wir in der Lage sein, Informationen zu jedem Artikel zu speichern. Wir erstellen eine CartItem-Klasse, die dies erledigt. Wir werden auch eine einfache Produktklasse erstellen, die eine Möglichkeit simuliert, Daten über die von uns verkauften Produkte abzurufen.

Die CartItem-Klasse:

1

using System;

2

3

/**

4

 * The CartItem Class

5

 * 

6

 * Basically a structure for holding item data

7

 */

8

public class CartItem : IEquatable<CartItem> {

9

    #region Properties

10

11

    // A place to store the quantity in the cart

12

    // This property has an implicit getter and setter.

13

    public int Quantity { get; set; }

14

15

    private int _productId;

16

    public int ProductId {

17

        get { return _productId; }

18

        set {

19

            // To ensure that the Prod object will be re-created

20

            _product = null;

21

            _productId = value;

22

        }

23

    }

24

25

    private Product _product = null;

26

    public Product Prod {

27

        get {

28

            // Lazy initialization - the object won't be created until it is needed

29

            if (_product == null) {

30

                _product = new Product(ProductId);

31

            }

32

            return _product;

33

        }

34

    }

35

36

    public string Description {

37

        get { return Prod.Description; }

38

    }

39

40

    public decimal UnitPrice {

41

        get { return Prod.Price; }

42

    }

43

44

    public decimal TotalPrice {

45

        get { return UnitPrice * Quantity; }

46

    }

47

48

    #endregion

49

50

    // CartItem constructor just needs a productId

51

    public CartItem(int productId) {

52

        this.ProductId = productId;

53

    }

54

55

    /**

56

     * Equals() - Needed to implement the IEquatable interface

57

     *    Tests whether or not this item is equal to the parameter

58

     *    This method is called by the Contains() method in the List class

59

     *    We used this Contains() method in the ShoppingCart AddItem() method

60

     */

61

    public bool Equals(CartItem item) {

62

        return item.ProductId == this.ProductId;

63

    }

64

}

Die Produktklasse:

1

/**

2

 * The Product class

3

 * 

4

 * This is just to simulate some way of accessing data about  our products

5

 */

6

public class Product

7

{

8

9

    public int Id { get; set; }

10

    public decimal Price { get; set; }

11

    public string Description { get; set; }

12

13

    public Product(int id)

14

    {

15

        this.Id = id;

16

        switch (id) {

17

            case 1:

18

                this.Price = 19.95m;

19

                this.Description = "Shoes";

20

                break;

21

            case 2:

22

                this.Price = 9.95m;

23

                this.Description = "Shirt";

24

                break;

25

            case 3:

26

                this.Price = 14.95m;

27

                this.Description = "Pants";

28

                break;

29

        }

30

    }

31

32

}

Definition: Eine "property" in ASP.NET ist eine Variable in einer Klasse, die einen Setter, einen Getter oder beides hat. Dies ähnelt anderen Sprachen, aber in ASP.NET bezieht sich die Worteigenschaft speziell darauf. Ein Beispiel hierfür ist die ProductId-Eigenschaft in der CartItem-Klasse. Es ist nicht einfach eine Variable in einer Klasse mit einer Methode zum Abrufen oder Festlegen. Es wird auf besondere Weise mit get{} und set{} Blöcken deklariert.

Fügen wir Artikel zum Warenkorb hinzu

Nachdem wir unsere Köpfe so lange im Code haben, ist es Zeit, etwas Visuelles zu tun. Diese Seite ist einfach eine Möglichkeit, Artikel in den Warenkorb zu legen. Alles was wir brauchen sind ein paar Artikel mit "Add to Cart" -Links. Lassen Sie uns diesen Code in die Seite Default.aspx einfügen.

1

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

2

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4

5

<html xmlns="http://www.w3.org/1999/xhtml">

6

<head runat="server">

7

    <title>My Store</title>

8

    <link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />

9

</head>

10

<body>

11

12

    <form id="form1" runat="server">

13

14

        <div class="container">

15

            <h1>My Store</h1>

16

17

            <div class="products">

18

                <div>Shoes - <asp:LinkButton runat="server" ID="btnAddShirt" OnClick="btnAddShoes_Click">Add To Cart</asp:LinkButton></div>

19

20

                <div>Shirt - <asp:LinkButton runat="server" ID="btnAddShorts" OnClick="btnAddShirt_Click">Add To Cart</asp:LinkButton></div>

21

                <div>Pants - <asp:LinkButton runat="server" ID="btnAddShoes" OnClick="btnAddPants_Click">Add To Cart</asp:LinkButton></div>

22

            </div>

23

24

25

            <a href="ViewCart.aspx">View Cart</a>

26

        </div>

27

28

    </form>

29

</body>

30

</html>

Wie Sie sehen, passiert hier nur, dass wir einige LinkButtons haben, denen OnClick-Ereignishandler zugeordnet sind.

Auf der CodeBehind-Seite haben wir 4 Ereignishandler. Wir haben einen für jeden LinkButton, der nur einen Artikel zum Warenkorb hinzufügt und den Benutzer weiterleitet, seinen Warenkorb anzuzeigen. Wir haben auch einen Page_Load-Ereignishandler, der standardmäßig von der IDE erstellt wird und den wir nicht benötigen.

1

using System;

2

3

public partial class _Default : System.Web.UI.Page {

4

    protected void Page_Load(object sender, EventArgs e) {

5

6

    }

7

8

    protected void btnAddShoes_Click(object sender, EventArgs e) {

9

        // Add product 1 to the shopping cart

10

        ShoppingCart.Instance.AddItem(1);

11

12

        // Redirect the user to view their shopping cart

13

        Response.Redirect("ViewCart.aspx");

14

    }

15

16

    protected void btnAddShirt_Click(object sender, EventArgs e) {

17

        ShoppingCart.Instance.AddItem(2);

18

        Response.Redirect("ViewCart.aspx");

19

    }

20

21

    protected void btnAddPants_Click(object sender, EventArgs e) {

22

        ShoppingCart.Instance.AddItem(3);

23

        Response.Redirect("ViewCart.aspx");

24

    }

25

26

}

Erstellen Sie die Warenkorbseite

Endlich, was wir die ganze Zeit vorbereitet haben - der Einkaufswagen! Schauen wir uns zuerst ViewCart.aspx an und ich werde es danach erklären.

1

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

2

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4

5

<html xmlns="http://www.w3.org/1999/xhtml">

6

<head runat="server">

7

    <title>Shopping Cart</title>

8

    <link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />

9

</head>

10

<body>

11

12

    <form id="form1" runat="server">

13

        <div class="container">

14

            <h1>Shopping Cart</h1>

15

            <a href="Default.aspx">< Back to Products</a>

16

17

            <br /><br />

18

            <asp:GridView runat="server" ID="gvShoppingCart" AutoGenerateColumns="false" EmptyDataText="There is nothing in your shopping cart." GridLines="None" Width="100%" CellPadding="5" ShowFooter="true" DataKeyNames="ProductId" OnRowDataBound="gvShoppingCart_RowDataBound" OnRowCommand="gvShoppingCart_RowCommand">

19

                <HeaderStyle HorizontalAlign="Left" BackColor="#3D7169" ForeColor="#FFFFFF" />

20

                <FooterStyle HorizontalAlign="Right" BackColor="#6C6B66" ForeColor="#FFFFFF" />

21

                <AlternatingRowStyle BackColor="#F8F8F8" />

22

                <Columns>

23

24

                    <asp:BoundField DataField="Description" HeaderText="Description" />

25

                    <asp:TemplateField HeaderText="Quantity">

26

                        <ItemTemplate>

27

                            <asp:TextBox runat="server" ID="txtQuantity" Columns="5" Text='<%# Eval("Quantity") %>'></asp:TextBox><br />

28

                            <asp:LinkButton runat="server" ID="btnRemove" Text="Remove" CommandName="Remove" CommandArgument='<%# Eval("ProductId") %>' style="font-size:12px;"></asp:LinkButton>

29

30

                        </ItemTemplate>

31

                    </asp:TemplateField>

32

                    <asp:BoundField DataField="UnitPrice" HeaderText="Price" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" DataFormatString="{0:C}" />

33

                    <asp:BoundField DataField="TotalPrice" HeaderText="Total" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" DataFormatString="{0:C}" />

34

                </Columns>

35

            </asp:GridView>

36

37

            <br />

38

            <asp:Button runat="server" ID="btnUpdateCart" Text="Update Cart" OnClick="btnUpdateCart_Click" />

39

        </div>

40

    </form>

41

</body>

42

</html>

Das GridView-Steuer -element ist ein leistungsstarkes Steuerelement, das auf den ersten Blick kompliziert erscheinen kann. Ich werde die Stilelemente nicht diskutieren, da sie selbsterklärend sind. (Es gibt hier einige Prinzipien, die ich nicht ausführlich erläutern werde. Ich werde nur versuchen, die Hauptidee zu vermitteln.) Lassen Sie es uns zusammenfassen.

• Wenn Sie der GridView eine ID geben, können wir mit dieser ID vom CodeBehind aus auf die GridView zugreifen.

  1	ID="gvShoppingCart"

• Die GridView generiert automatisch Spalten und Spaltennamen aus den von uns bereitgestellten Daten, sofern wir dies nicht ausdrücklich anweisen.

  1	AutoGenerateColumns="false"

• Wir können dem GridView mitteilen, was angezeigt werden soll, falls wir es ohne Daten liefern.

  1	EmptyDataText="There is nothing in your shopping cart."

• Wir möchten die Fußzeile anzeigen, damit wir den Gesamtpreis anzeigen können.

  1	ShowFooter="true"

• Es ist schön, wenn wir ein Array von ProductIds nach dem Zeilenindex indizieren, wenn wir die Menge eines Warenkorbartikels im CodeBehind aktualisieren. Dies wird das für uns tun:

  1	DataKeyNames="ProductId"

• Wir benötigen Ereignisse, um auf zwei Ereignisse zu reagieren: RowDataBound und RowCommand. Grundsätzlich wird RowDataBound ausgelöst, wenn GridView eine Zeile unserer Daten nimmt und sie der Tabelle hinzufügt. Wir verwenden dieses Ereignis nur, um auf die gebundene Fußzeile zu reagieren, damit wir anpassen können, was dort angezeigt werden soll. RowCommand wird ausgelöst, wenn in der GridView auf einen Link oder eine Schaltfläche geklickt wird. In diesem Fall handelt es sich um den Link "Remove".

  1	OnRowDataBound="gvShoppingCart_RowDataBound" OnRowCommand="gvShoppingCart_RowCommand"

Lassen Sie uns nun über die Spalten sprechen. Wir definieren die Spalten hier und die GridView nimmt jede Zeile in den von uns bereitgestellten Daten und ordnet die Daten in dieser Zeile der Spalte zu, in der sie angezeigt werden soll. Die einfachste Spalte ist das BoundField. In unserem Fall wird in unserem CartItem-Objekt nach einer "Description" -Eigenschaft gesucht und in der ersten Spalte angezeigt. In der Kopfzeile dieser Spalte wird auch "Description" angezeigt.

Wir brauchten die Menge, um sie in einem Textfeld anzuzeigen, anstatt sie nur als Text anzuzeigen. Deshalb haben wir ein TemplateField verwendet. Mit dem TemplateField können Sie alles, was Sie wollen, in diese Spalte einfügen. Wenn Sie Daten aus der Zeile benötigen, fügen Sie einfach <% #Eval("PropertyName") %> ein. Der LinkButton, den wir in unser TemplateField einfügen, hat einen CommandName und ein CommandArgument, die beide an den RowCommand-Ereignishandler unseres GridView übergeben werden.

Das letzte, was hier erwähnt werden sollte, ist, dass für die letzten beiden BoundFields ein DataFormatString angegeben wurde. Dies ist nur eine der vielen Formatzeichenfolgen, die ASP.NET bereitstellt. Dieser formatiert die Nummer als Währung. Weitere Formatzeichenfolgen finden Sie in der Microsoft-Dokumentation.

Jetzt können wir uns die CodeBehind-Seite ansehen. Ich habe hier viele Kommentare abgegeben, um zu beschreiben, was passiert.

Das Endergebnis:

Jetzt haben wir einen gut funktionierenden Einkaufswagen!

Sie könnten auch mögen...

Wie man eine Website mit ASP.NET 3.5 - Screencast suchen kann

Der 1. Oktober in Screencasts von Jeffrey Way

56

Ich freue mich sagen zu können, dass wir heute unseren ersten Artikel auf ASP.NET veröffentlichen. In diesem Screencast zeige ich Ihnen, wie Sie eine einfache Suchfunktion in Ihre persönliche Website implementieren. Wir werden viele der neuen Funktionen in ASP.NET 3.5 erläutern, z. B. LINQ und viele der AJAX-Steuerelemente, die im Lieferumfang von Visual Studio/Web Developer enthalten sind.

Weiterlesen

• Abonnieren Sie den NETTUTS RSS Feed für weitere tägliche Webentwicklungs-Tuts und Artikel.