Most dynamic Web applications are created for the sole purpose of making money on the Web.
Let's face it: why would you go through all the work of creating a dynamic Web application if you don't plan to make money through it? Sure, companies employ dynamic intranet sites and there are still some -- although very few -- free Web applications you can use.
In the real world, however, dynamic Web applications are created in an attempt to make money by allowing site owners to sell merchandise on the Web. Providing users with the capability to add items to a virtual shopping cart as they browse through your Website is still very much a business that commands good money. Companies such as VeriSign, Paypal, WebAssist, and LinkPoint charge to provide developers with the capability to add shopping cart functionality to their own Websites. But why pay $300-$400 for a solution that someone else already built, when you can build one just as easily yourself utilizing new technology in ASP.NET, for free?
This article will allow you to develop and implement your own shopping cart utilizing a Session, a DataGrid, and the
DataTable
class of the
DataSet
object. Through this article, you'll learn to:
- Build a user interface using ASP.NET Web Server Controls
- Dynamically construct a DataTable depending on user interaction
- Bind the dynamically constructed DataTable to a DataGrid
- Allow the user to remove items from the cart freely
- Keep a running cost total of items within the cart
At the end of this article, you'll have a fully functioning shopping cart, and you'll have gained a thorough understanding of DataTables, DataGrids, and Session Variables. Download a complete demonstration of the final product here.
This project is separated into five parts:
- Building the user interface
- Building the DataTable structure
- Adding items to the cart
- Keeping a running total
- Removing items from the cart
Step 1: Building the Shopping Cart User Interface
The user interface or UI for the application is quite simple. In fact, most of the interaction will occur within the DataGrid, but the UI does include some key components that the user will be interacting with:
- A
DropDownList
DropDownList
- A
TextBox
- A
Button
- A
DataGrid
- A
Label
Now that you have an idea of what the UI will display, let's add these components to the body of an HTML page. Using Dreamweaver MX, we'll create a new page and add this code into the
<body>
tag of the page:
<form runat="server">
Product:<br>
<asp:DropDownList id="ddlProducts" runat="server">
<asp:ListItem Value="4.99">Socks</asp:ListItem>
<asp:ListItem Value="34.99">Pants</asp:ListItem>
<asp:ListItem Value="14.99">Shirt</asp:ListItem>
<asp:ListItem Value="12.99">Hat</asp:ListItem>
</asp:DropDownList><br>
Quantity:<br>
<asp:textbox id="txtQuantity" runat="server" /><br><br>
<asp:Button id="btnAdd" runat="server" Text="Add To Cart"
onClick="AddToCart" /><br><br>
<asp:DataGrid id="dg" runat="server" /><br><br>
Total:
<asp:Label id="lblTotal" runat="server" />
</form>
The code is actually quite simple and needs very little explanation. Basically, a hard-coded
DropDownList
control (
ddlProducts
)
is added, with four products. The cost of those products is maintained by associating a decimal value for each specific product.
Second, a
TextBox
control (
txtQuantity
) is added so that the user can modify quantities. Next, a
Button
control (
btnAdd
) is added with the text "Add to Cart". The
onClick
event associated with the Button control will call the
AddToCart()
subroutine, which will be created in the next section.
Next, a
DataGrid
(
dg
) is added which will be used to bind to the dynamically constructed
DataTable
. Remember, the
DataTable
will be constructed in code, and bound to the
DataGrid
for presentation to the user. We'll add a button column to allow the user to remove a specific item if he or she wishes a little later. Finally, we'll add a
Label
control (
lblTotal
), which will be used to display to the user a running total of the items within the cart.
Step 2: Building the DataTable
DataTable
If you're familiar with DataSets
,
then you know that DataTables provide you with a way to dynamically create a purely memory-resident representation of a database table. Typically, you'd fill a DataTable
from an existing database, but you could also create one programmatically, as will be the case here.
In a DataTable, columns are represented by the columns property, and rows are represented by the rows property. Thus, DataTables will be the perfect choice for the creation of our shopping cart. We can build the columns just as we would within a database, using the columns property of the
DataTable, and add rows to the DataTable with the
Rows
property. With the DataTable built, we can then bind the DataTable to a DataGrid to display the results in an intuitive manner.
Because DataTables contain rows and columns, you will be able to effectively mock the structure of a conventional database table. The rows will be added to the DataTable as the user adds items to the cart. For now, we'll need to construct the columns that will serve as the categories for the row items. In order for the cart to function correctly, we'll need to add the following columns with a corresponding data type:
You're probably wondering how data types, auto increment, and uniqueness will be set programmatically. Remember, DataTables contain column and row properties. Some of those properties include the ability to set the above mentioned items, just as you would a traditional database table. You'll also notice that the
DataTable
contains a column for ID. Technically, this column has nothing to do with the shopping cart, but it will have a lot to do with keeping the items in the cart unique, and will allow us to establish a primary key if we ever want to create a relationship with another DataTable.
For now we just want the structure of the DataTable built when the page loads for the first time. We don't want to actually start to define rows until the user selects an item to add to the cart.
To begin building the cart's structure, add this code into the head of your page:
<script runat="server">
Dim objDT As System.Data.DataTable
Dim objDR As System.Data.DataRow
Private Sub Page_Load(s As Object, e As EventArgs)
If Not IsPostBack Then
makeCart()
End If
End Sub
Function makeCart()
objDT = New System.Data.DataTable("Cart")
objDT.Columns.Add("ID", GetType(Integer))
objDT.Columns("ID").AutoIncrement = True
objDT.Columns("ID").AutoIncrementSeed = 1
objDT.Columns.Add("Quantity", GetType(Integer))
objDT.Columns.Add("Product", GetType(String))
objDT.Columns.Add("Cost", GetType(Decimal))
Session("Cart") = objDT
End Function
</script>
Looking at the code, you can see, that the
makeCart()
function is called only when the page is loaded for the first time. This is the reason for the IsPostBack check.
Within the
makeCart()
function, we'll add the code that defines the actual structure for the DataTable and its columns. First, we add a column to the DataTable named
ID
, assigning it the data type for integer. We assign the property for
AutoIncrement
to
True
, and begin the seed at 1.
Next, add three more columns to the DataTable for
Quantity
,
Product
, and
Cost
, assigning them the data types for integer, string, and decimal respectively. Finally, the DataTable is added into a
Session
conveniently named "
Cart
", for storage.
That's it! If you think about the structure of a database table and then consider the structure and code for the DataTable, they begin to resemble each other conceptually. The next step involves adding items to the cart, which is no harder than defining new rows for the DataTable.
Step 3: Building the Add to Cart Functionality
Now that the structure of the DataTable has been completely built, we'll want to begin to add to the cart the specific items that the user selects from the drop down menu. Again, to do this, we simply construct new rows and add them to the appropriate position within the
DataTable
cart. To construct the Add to Cart functionality, add the code below:
Sub AddToCart(s As Object, e As EventArgs)
objDT = Session("Cart")
Dim Product = ddlProducts.SelectedItem.Text
objDR = objDT.NewRow
objDR("Quantity") = txtQuantity.Text
objDR("Product") = ddlProducts.SelectedItem.Text
objDR("Cost") = Decimal.Parse(ddlProducts.SelectedItem.Value)
objDT.Rows.Add(objDR)
Session("Cart") = objDT
dg.DataSource = objDT
dg.DataBind()
End Sub
You'll remember that the Button control had the
onClick
event that called the
AddToCart()
subroutine. This subroutine contains all the code that's necessary to retrieve an existing cart from the
Session
object if it exists, add new items to the cart, place the cart back into the session, and finally, bind to the DataGrid.
As I mentioned, the first two lines of code retrieve the cart from the session if it exists, and retrieve the product selected from the drop down menu. As you have already created a new instance of the
DataRow
class, you can create the new rows for the specific columns within the DataTable.
You'll notice that we set the
Quantity
column equal to the value of the quantity text box control, and set the
Product
column equal to the text value of the drop down menu selection. We then convert the value of the drop down menu, which is cost, into a decimal value for the cost column. Finally, we add the new row to the DataTable, add the DataTable to the Session, or overwrite it if it already exists, and bind the DataTable to the DataGrid.
Test what you have so far in the browser. It should work fine, except for one problem. You'll see that if you select an item, add it to the cart, and then select the same item again, rather than adding the sum of the old quantity with the new quantity, it just creates a new row. You can fix this problem by modifying the
AddToCart()
subroutine. Just below the code where you retrieve the item from the drop down menu, add the following loop to check within the DataTable for an existing product:
Dim blnMatch As Boolean = False
For Each objDR In objDT.Rows
If objDR("Product") = Product Then
objDR("Quantity") += txtQuantity.Text
blnMatch = True
Exit For
End If
Next
Now wrap the new code that adds a new row within a conditional statement.
If Not blnMatch Then
objDR = objDT.NewRow
objDR("Quantity") = Int32.Parse(txtQuantity.Text)
objDR("Product") = ddlProducts.SelectedItem.Text
objDR("Cost") = Decimal.Parse(ddlProducts.SelectedItem.Value)
objDT.Rows.Add(objDR)
End If
Basically, a new row will only be created if the product is not found within the cart. If it is found, however, it will simply adjust the quantity by whatever the user places into the quantity textbox control.
Step 4: Keeping the Order Total
The next step will be to build the function that keeps a running total of the cost of the items within the cart. This will be used to present the user with a working total as they add and remove items in the cart. You can add this functionality using the code below:
Function GetItemTotal() As Decimal
Dim intCounter As Integer
Dim decRunningTotal As Decimal
For intCounter = 0 To objDT.Rows.Count -- 1
objDR = objDT.Rows(intCounter)
decRunningTotal += (objDR("Cost") * objDR("Quantity"))
Next
Return decRunningTotal
End Function
You can see that this function simply loops through the rows in the DataTable, multiplies the quantity column by the cost column, and returns the result. The first step involves defining the functon. As you want to return a decimal value, make sure you define the function as a decimal. Next, we'll create two new variables: one as an integer and one as a decimal. Next, you loop through the rows within the DataTable and multiply the cost column for a specific row by the quantity for that row, and store it within the
decRunningTotal
variable. Finally, we'll return the value.
The last step will be to write the value of the function into the label control. Add the following line to the end of the
btnAddToCart
subroutine -- this effectively writes the cost into the label control:
lblTotal.Text = "$" & GetItemTotal()
Save your work and run it in a browser. This time, as you add items to the cart, a total is presented within the label control. Fantastic! Now, the last part we'll discuss involves removing items from the cart.
Step 5: Removing Items from the Cart
Now that a working model of the shopping cart has been constructed, we'll want to add the next bit of functionality: removing items from the cart. Obviously you can see the importance of this: you want users to be able to add and remove any and all items to or from the shopping cart as required. Add the functionality for removing items from the cart using the following subroutine:
Sub Delete_Item(s As Object, e As DataGridCommandEventArgs)
objDT = Session("Cart")
objDT.Rows(e.Item.ItemIndex).Delete()
Session("Cart") = objDT
dg.DataSource = objDT
dg.DataBind()
lblTotal.Text = "$" & GetItemTotal()
End Sub
This subroutine, which we'll associate with the DataGrid in a minute, simply dumps the contents of the session into a new
DataTable
object, deletes the specific row that a user clicked, and then places the revised DataTable back into the
Session
variable for storage. Finally we re-bind to the DataGrid and update the total by calling the
GetItemTotal()
function.
You'll want to note that one of the parameters being passed into the subroutine is that of the
DataGridCommandEventArgs
. Without this parameter, we wouldn't be able to determine which item within the DataGrid the user selected.
The last step will be to modify the DataGrid. You will need to add a new
button
column, as well as a new event, to call the
Delete_Item
subroutine. The new DataGrid should resemble the following code:
<asp:DataGrid id=dg runat="server" ondeletecommand="Delete_Item">
<columns>
<asp:buttoncolumn buttontype="LinkButton"
commandname="Delete" text="Remove Item" />
</columns>
</asp:DataGrid>
Save your work and run it in the browser. This time you can add products and remove them freely!
![http/https--Cookie與Sessionhttp/https–Cookie與Sessioncookie與session的差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)