Tài liệu Creating a Simple Shopping Cart Application ppt

You'll store the shopping cart in a Session object.. Note As mentioned in the previous section, in a real application you'll probably want to store the shopping cart in the database rath

Creating a Simple Shopping Cart Application

In this section, you'll modify your DataGridWebApplication you created earlier to turn it into a simple shopping cart You'll store the shopping cart in a Session object

Note As mentioned in the previous section, in a real application you'll probably want to

store the shopping cart in the database rather than in a Session object

add a product to the shopping cart shown on the right of the form As you can see from

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 shopping cart 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

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: 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 Shopping Cart

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

Note 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 shopping cart 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 shopping cart

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