Build a Shopping Cart in ASP.NET


This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.

Shopping carts are very important and can many times be the most intimidating part of building an e-commerce site. This tutorial will show how easy it can be to implement a shopping cart using ASP.NET. Additionally, several basic explanations will be provided to help beginning ASP.NET programmers understand this wonderful framework.

Quick Overview of ASP.NET

Since ASP.NET hasn't been covered too much on NETTUTS, I thought it would be good to include a brief overview of some of the things that distinguish it from other languages.

  1. Code is compiled. The first time an ASP.NET page is requested over the web, the code is compiled into one or more DLL files on the server. This gives you the ability to just copy code out to the server and it gives you the speed benefit of compiled code.
  2. ASP.NET is an object oriented framework. Every function, property and page is part of a class. For example, each web page is its own class that extends the Page class. The Page class has an event that is fired when the webpage is loaded called the "Page Load Event". You can write a function that subscribes to that event and is called on. The same principle applies to other events like the button click and "drop-down" "selected index changed" events.
  3. The logic is separate from the design and content. They interact with each other, but they are in separate places. Generally, this allows a designer to design without worrying about function and it allows the programmer to focus on function without looking at the design. You have the choice of putting them both in the same file or in different files. This is similar to model-view-controller model.

If you are new to ASP.NET (and you have Windows), you can try it out for free You can download Visual Studio Express by visiting the ASP.NET website. Also, when you create a website locally on your machine, you can run the website at any time and Visual Studio will quickly start a server on your computer and pull up your website in your default browser.

Step 1: Create the ShoppingCart Class

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.

Step 2: The CartItem & Product Classes

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:

The Product class:

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.

Let's Add Items to the Cart

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.

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.

Build the Shopping Cart Page

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.

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.
  • The GridView will automatically generate columns and column names from the data that we supply unless we specifically tell it not to.
  • We can tell the GridView what to display in case we supply it with no data.
  • We want to show the footer so that we can display the total price.
  • 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:
  • 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.

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 that ASP.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.

The End Result:

Now we have a nice working shopping cart!

You Also Might Like...


How to Search a Website Using ASP.NET 3.5 - screencast

Oct 1st in Screencasts by Jeffrey Way


I’m happy to say that today, we are posting our very first article on ASP.NET. In this screencast, I’ll show you how to implement a simple search functionality into your personal website. We’ll go over many of the new features in ASP.NET 3.5, such as LINQ and many of the AJAX controls that ship with Visual Studio/Web Developer.

Continue Reading

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.