Hot File

Create Build a Shopping Cart in ASP.NET

View: 1032    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: ASP.NET Framework   Fields: Other

9 point/2 review File has been tested

We need a place to store the items in the shopping cart as well as functions to manipulate the items.

Introduction

We need a place to store the items in the shopping cart as well as functions to manipulate the items. We'll create a ShoppingCart class for this. This class will also manage session storage.

First, we have to create the App_Code folder. To do this, go to the "Website" menu, then "Add ASP.NET Folder", and choose "App_Code." This is where we'll put all of our custom classes. These classes will automatically be accessible from the code in any of our pages (we don't need to reference it using something similar to "include" or anything). Then we can add a class to that folder by right-clicking on the folder and choosing "Add New Item."

Quick Tip: Regions in ASP.NET are really nice to organize and group code together. The nicest thing about them is that you can open and close regions to minimize the amount of code that you are looking at or quickly find your way around a file.

using System.Collections.Generic;
using System.Web;
 
/**
 * The ShoppingCart class
 * 
 * Holds the items that are in the cart and provides methods for their manipulation
 */
public class ShoppingCart {
    #region Properties
     
    public List<CartItem> Items { get; private set; }
     
    #endregion
 
    #region Singleton Implementation
 
    // Readonly properties can only be set in initialization or in a constructor
    public static readonly ShoppingCart Instance;
 
    // The static constructor is called as soon as the class is loaded into memory
    static ShoppingCart() {
        // If the cart is not in the session, create one and put it there
        // Otherwise, get it from the session
        if (HttpContext.Current.Session["ASPNETShoppingCart"] == null) {
            Instance = new ShoppingCart();
            Instance.Items = new List<CartItem>();
            HttpContext.Current.Session["ASPNETShoppingCart"] = Instance;
        } else {
            Instance = (ShoppingCart)HttpContext.Current.Session["ASPNETShoppingCart"];
        }
    }
 
    // A protected constructor ensures that an object can't be created from outside
    protected ShoppingCart() { }
 
    #endregion
 
    #region Item Modification Methods
    /**
     * AddItem() - Adds an item to the shopping 
     */
    public void AddItem(int productId) {
        // Create a new item to add to the cart
        CartItem newItem = new CartItem(productId);
 
        // If this item already exists in our list of items, increase the quantity
        // Otherwise, add the new item to the list
        if (Items.Contains(newItem)) {
            foreach (CartItem item in Items) {
                if (item.Equals(newItem)) {
                    item.Quantity++;
                    return;
                }
            }
        } else {
            newItem.Quantity = 1;
            Items.Add(newItem);
        }
    }
 
    /**
     * SetItemQuantity() - Changes the quantity of an item in the cart
     */
    public void SetItemQuantity(int productId, int quantity) {
        // If we are setting the quantity to 0, remove the item entirely
        if (quantity == 0) {
            RemoveItem(productId);
            return;
        }
 
        // Find the item and update the quantity
        CartItem updatedItem = new CartItem(productId);
 
        foreach (CartItem item in Items) {
            if (item.Equals(updatedItem)) {
                item.Quantity = quantity;
                return;
            }
        }
    }
 
    /**
     * RemoveItem() - Removes an item from the shopping cart
     */
    public void RemoveItem(int productId) {
        CartItem removedItem = new CartItem(productId);
        Items.Remove(removedItem);
    }
    #endregion
 
    #region Reporting Methods
    /**
     * GetSubTotal() - returns the total price of all of the items
     *                 before tax, shipping, etc.
     */
    public decimal GetSubTotal() {
        decimal subTotal = 0;
        foreach (CartItem item in Items)
            subTotal += item.TotalPrice;
 
        return subTotal;
    }
    #endregion
}

With a place to store our shopping cart items, we need to be able to store information about each item. We'll create a CartItem class that will do this. We'll also create a simple Product class that will simulate a way to grab data about the products we're selling.

The CartItem class:

using System;
 
/**
 * The CartItem Class
 * 
 * Basically a structure for holding item data
 */
public class CartItem : IEquatable<CartItem> {
    #region Properties
 
    // A place to store the quantity in the cart
    // This property has an implicit getter and setter.
    public int Quantity { get; set; }
 
    private int _productId;
    public int ProductId {
        get { return _productId; }
        set {
            // To ensure that the Prod object will be re-created
            _product = null;
            _productId = value;
        }
    }
 
    private Product _product = null;
    public Product Prod {
        get {
            // Lazy initialization - the object won't be created until it is needed
            if (_product == null) {
                _product = new Product(ProductId);
            }
            return _product;
        }
    }
 
    public string Description {
        get { return Prod.Description; }
    }
 
    public decimal UnitPrice {
        get { return Prod.Price; }
    }
 
    public decimal TotalPrice {
        get { return UnitPrice * Quantity; }
    }
 
    #endregion
 
    // CartItem constructor just needs a productId
    public CartItem(int productId) {
        this.ProductId = productId;
    }
 
    /**
     * Equals() - Needed to implement the IEquatable interface
     *    Tests whether or not this item is equal to the parameter
     *    This method is called by the Contains() method in the List class
     *    We used this Contains() method in the ShoppingCart AddItem() method
     */
    public bool Equals(CartItem item) {
        return item.ProductId == this.ProductId;
    }
}

The Product class:

/**
 * The Product class
 * 
 * This is just to simulate some way of accessing data about  our products
 */
public class Product
{
 
    public int Id { get; set; }
    public decimal Price { get; set; }
    public string Description { get; set; }
 
    public Product(int id)
    {
        this.Id = id;
        switch (id) {
            case 1:
                this.Price = 19.95m;
                this.Description = "Shoes";
                break;
            case 2:
                this.Price = 9.95m;
                this.Description = "Shirt";
                break;
            case 3:
                this.Price = 14.95m;
                this.Description = "Pants";
                break;
        }
    }
 
}

Definition: A "property" in ASP.NET is a variable in a class that has a setter, a getter, or both. This is similar to other languages, but in ASP.NET, the word property refers specifically to this. An example of this is the ProductId property in the CartItem class. It is not simply a variable in a class with a method to get or set it. It is declared in a special way with get{} and set{} blocks.

After having our heads in the code for so long, it's time we do something visual. This page will simply be a way to add items to the cart. All we need is a few items with "Add to Cart" links. Let's put this code in the Default.aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>My Store</title>
    <link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
    <form id="form1" runat="server">
         
        <div class="container">
            <h1>My Store</h1>
             
            <div class="products">
                <div>Shoes - <asp:LinkButton runat="server" ID="btnAddShirt" OnClick="btnAddShoes_Click">Add To Cart</asp:LinkButton></div>
 
                <div>Shirt - <asp:LinkButton runat="server" ID="btnAddShorts" OnClick="btnAddShirt_Click">Add To Cart</asp:LinkButton></div>
                <div>Pants - <asp:LinkButton runat="server" ID="btnAddShoes" OnClick="btnAddPants_Click">Add To Cart</asp:LinkButton></div>
            </div>
 
             
            <a href="ViewCart.aspx">View Cart</a>
        </div>
         
    </form>
</body>
</html>

As you can see, the only thing happening here is that we have a few LinkButtons that have OnClick event handlers associated to them.

In the code-behind page, we have 4 event handlers. We have one for each LinkButton that just adds an item to the shopping cart and redirects the user to view their cart. We also have a Page_Load event handler which is created by the IDE by default that we didn't need to use.

using System;
 
public partial class _Default : System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
 
    }
 
    protected void btnAddShoes_Click(object sender, EventArgs e) {
        // Add product 1 to the shopping cart
        ShoppingCart.Instance.AddItem(1);
 
        // Redirect the user to view their shopping cart
        Response.Redirect("ViewCart.aspx");
    }
 
    protected void btnAddShirt_Click(object sender, EventArgs e) {
        ShoppingCart.Instance.AddItem(2);
        Response.Redirect("ViewCart.aspx");
    }
 
    protected void btnAddPants_Click(object sender, EventArgs e) {
        ShoppingCart.Instance.AddItem(3);
        Response.Redirect("ViewCart.aspx");
    }
 
}

Finally, what we've been preparing for the whole time—the shopping cart! Let's just look at ViewCart.aspx first and I'll explain it after that.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ViewCart.aspx.cs" Inherits="ViewCart" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Shopping Cart</title>
    <link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
    <form id="form1" runat="server">
        <div class="container">
            <h1>Shopping Cart</h1>
            <a href="Default.aspx">< Back to Products</a>
 
            <br /><br />
            <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">
                <HeaderStyle HorizontalAlign="Left" BackColor="#3D7169" ForeColor="#FFFFFF" />
                <FooterStyle HorizontalAlign="Right" BackColor="#6C6B66" ForeColor="#FFFFFF" />
                <AlternatingRowStyle BackColor="#F8F8F8" />
                <Columns>
 
                    <asp:BoundField DataField="Description" HeaderText="Description" />
                    <asp:TemplateField HeaderText="Quantity">
                        <ItemTemplate>
                            <asp:TextBox runat="server" ID="txtQuantity" Columns="5" Text='<%# Eval("Quantity") %>'></asp:TextBox><br />
                            <asp:LinkButton runat="server" ID="btnRemove" Text="Remove" CommandName="Remove" CommandArgument='<%# Eval("ProductId") %>' style="font-size:12px;"></asp:LinkButton>
 
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="UnitPrice" HeaderText="Price" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" DataFormatString="{0:C}" />
                    <asp:BoundField DataField="TotalPrice" HeaderText="Total" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" DataFormatString="{0:C}" />
                </Columns>
            </asp:GridView>
 
            <br />
            <asp:Button runat="server" ID="btnUpdateCart" Text="Update Cart" OnClick="btnUpdateCart_Click" />
        </div>
    </form>
</body>
</html>

The GridView control is a powerful control that can seem complicated at first. I won't discuss the style elements because they are self-explanatory. (There are some principles here that I'm not going to explain in depth. I am just going to try to get the main idea across). Let's break it down.

  • Giving the GridView an ID will allow us to access the GridView from the code-behind using that ID.
ID="gvShoppingCart"

The GridView will automatically generate columns and column names from the data that we supply unless we specifically tell it not to.

AutoGenerateColumns="false"

We can tell the GridView what to display in case we supply it with no data.

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

We want to show the footer so that we can display the total price

ShowFooter="true"

It will be nice for us to have an array of ProductIds indexed by the row index when we are updating the quantity of a cart item in the code-behind. This will do that for us:

DataKeyNames="ProductId"

We need events to respond to two events: RowDataBound and RowCommand. Basically, RowDataBound is fired when the GridView takes a row of our data and adds it to the table. We are only using this event to respond to the footer being bound so that we can customize what we want displayed there. RowCommand is fired when a link or a button is clicked from inside the GridView. In this case, it is the "Remove" link.

OnRowDataBound="gvShoppingCart_RowDataBound" OnRowCommand="gvShoppingCart_RowCommand"

Now let's talk about the columns. We define the columns here and the GridView will take every row in the data that we supply and map the data in that row to the column that it should display in. The simplest column is the BoundField. In our case, it is going to look for a "Description" property in our CartItem object and display it in the first column. The header for that column will also display "Description."

We needed the quantity to display inside a textbox rather than just displaying as text, so we used a TemplateField. The TemplateField allows you to put whatever you want in that column. If you need some data from the row, you just insert <%# Eval("PropertyName") %>. The LinkButton that we put in our TemplateField has a CommandName and a CommandArgument, both of which will be passed to our GridView's RowCommand event handler.

The last thing worth mentioning here is that the last two BoundFields have a DataFormatString specified. This is just one of the many format strings thatASP.NET provides. This one formats the number as a currency. See the Microsoft documentation for other format strings.

Now we can look at the code-behind page. I have supplied lots of comments here to describe what is happening.

Now we have a nice working shopping cart!

Create Build a Shopping Cart in ASP.NET

Create Build a Shopping Cart in ASP.NET Posted on 11-01-2016  We need a place to store the items in the shopping cart as well as functions to manipulate the items. 4.5/10 1032

Comment:

To comment you must be logged in members.

Files with category

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd