Creating aSimpleShoppingCart Application
In this section, you'll modify your DataGridWebApplication you created earlier to turn it
into a simpleshopping cart. You'll store the shoppingcart in a Session object.
N
ote As mentioned in the previous section, in a real application you'll probably want to
store the shoppingcart in the database rather than in a Session object.
Figure 15.24
shows the final running form that you'll build. You use the Buy button to
add a product to the shoppingcart shown on the right of the form. As you can see from
Figure 15.24
, I've added three products to the shoppingcart by pressing the Buy button
for each product in the grid on the left.
Figure 15.24: The running form
You can either follow the steps shown in the following sections to add the Buy button
and the shoppingcart to your form, or you can replace the ASP.NET code in your form
with the code in the WebForm1.aspx file contained in the VS .NET
Projects\DataGridWebApplication directory. You replace the code in your form by
selecting and deleting the existing code in your form and pasting in the code from the
WebForm1.aspx file. You'll also need to replace the code behind your form with the code
in the WebForm1.aspx.cs file contained in the VS .NET
Projects\DataGridWebApplication directory.
Adding the Buy Button
In this section, you'll add the Buy button to the DataGrid1 object of the
DataGridWebApplication. Perform the following steps:
1. Open DataGridWebApplication by selecting File ➣ Open ➣ Project, double-click
the Data-GridWebApplication folder, and double-click the
DataGridWebApplication.sln file.
2. Open the WebForm1.aspx file in Design mode by double-clicking this file in the
Solution Explorer window. Click on the DataGrid1 control in the form. Figure
15.25 shows the properties for DataGrid1.
Figure 15.25: DataGrid1 properties
3. Next, click the Property Builder link near the bottom of the Properties window. Do
the following to add the Buy button:
1. Click Columns on the left of the DataGrid1 Properties dialog box.
2. Expand the Button Column node of the Available Columns section.
3. Add a Select button to the Selected Columns area.
4. Set Text to Buy. This is the text that is shown on the button.
5. Set Command Name to AddToCart. This is the method that is called when
the button is pressed. (You'll create this method later.)
6. Set Button Type to PushButton.
Figure 15.26
shows the final properties of the Buy button.
Figure 15.26: Buy button properties
4. Click OK to add the button to DataGrid1. Figure 15.27
shows DataGrid1 with the
newly added Buy button.
Figure 15.27: DataGrid1 with Buy button
Adding the ShoppingCart
In this section, you'll add a DataGrid to store the shopping cart. Drag a DataGrid control
from the Toolbox to the right of DataGrid1 on your form. Set the ID of this new DataGrid
to ShoppingCart, as shown in Figure 15.28
.
Figure 15.28: ShoppingCart DataGrid
N
ote You might have to close all windows except the form designer so that you have
enough screen space to add the new DataGrid to your form.
Adding Code to the WebForm1.aspx.cs File
Your next task is to add some additional code to the WebForm1.aspx.cs file to support
the shopping cart. As mentioned earlier, either you can follow the steps shown in this
section or you can replace the code behind your form with the code in the
WebForm1.aspx.cs file contained in the VS .NET Projects\DataGridWebApplication
directory. You replace the code in your form by selecting and deleting the existing code
in your form and pasting in the code from the WebForm1.aspx.cs file.
Perform the following steps if you want to modify the code yourself:
1. Select View ➣ Code, or press F7 on your keyboard to view the code. Add a
DataTable object named Cart and a DataView object named CartView to the
WebForm1 class, as shown in the following code:
2. public class WebForm1 : System.Web.UI.Page
3. {
4. protected DataTable Cart;
5. protected DataView CartView;
6.
Your Cart object is used to store the shoppingcart and will be populated with the
products selected using the Buy button. Your CartView object is used to view the
shopping cart.
7. Next, set your Page_Load() method to the following code; notice that this method
creates a DataTable to store the shopping cart, and that this DataTable is stored in
the Session object:
8. private void Page_Load(object sender, System.EventArgs e)
9. {
10. // Put user code to initialize the page here
11.
12. // populate the Session object with the shoppingcart
13. if (Session["ShoppingCart"] == null)
14. {
15. Cart = new DataTable();
16. Cart.Columns.Add(new DataColumn("Product Name", typeof(string)));
17. Cart.Columns.Add(new DataColumn("Unit Price", typeof(string)));
18. Session["ShoppingCart"] = Cart;
19. }
20. else
21. {
22. Cart = (DataTable) Session["ShoppingCart"];
23. }
24. CartView = new DataView(Cart);
25. ShoppingCart.DataSource = CartView;
26. ShoppingCart.DataBind();
27.
28. if (!this.IsPostBack)
29. {
30. // populate dataSet11 with the rows from the Products DataTable
31. sqlDataAdapter1.Fill(dataSet11, "Products");
32. this.DataBind();
33. }
34. }
35. Next, you need to add the following AddToCart() method to your WebForm1
class. This method is called when the user presses the Buy button. Notice this
method creates a DataRow object and populates it with TableCell objects to store
the product name and unit price in the Shopping-Cart DataTable that you
previously added to your form.
36. protected void AddToCart(Object sender, DataGridCommandEventArgs e)
37. {
38.
39. DataRow product = Cart.NewRow();
40.
41. // e.Item is the row of the table where the command is raised.
42. // For bound columns the value is stored in the Text property of TableCell
43. TableCell productNameCell = e.Item.Cells[1];
44. TableCell unitPriceCell = e.Item.Cells[3];
45. string productName = productNameCell.Text;
46. string unitPrice = unitPriceCell.Text;
47.
48. if (((Button)e.CommandSource).CommandName == "AddToCart")
49. {
50. product[0] = productName;
51. product[1] = unitPrice;
52. Cart.Rows.Add(product);
53. }
54. ShoppingCart.DataBind();
55. }
56. The only thing left to do is to run your form. To do this, select Debug ➣ Start
Without Debugging, or press Ctrl+F5 on your keyboard.
Click the Buy button for different products in the grid to add them to your shopping cart.
.
Creating a Simple Shopping Cart Application
In this section, you'll modify your DataGridWebApplication you created earlier to turn it
into a simple. Session["ShoppingCart"] = Cart;
19. }
20. else
21. {
22. Cart = (DataTable) Session["ShoppingCart"];
23. }
24. CartView = new DataView (Cart) ;