Step 4: Implement the Checkout.aspx Page

  • Article

The Checkout.aspx page processes orders and sets shipping and billing information for orders to be successfully post processed on the confirmation page.

In this step you will implement the Checkout.aspx page by doing the following:

  1. Create the Checkout.aspx page.
  2. Insert controls on the Checkout.aspx page.
  3. Insert class-wide variables.
  4. Add code to the Page_Load event handler.
  5. Add code to the Checkout_Click button handler.

To create the Checkout.asp page

To insert controls on the Checkout.aspx page

To insert class-wide variables

To add code to the Page_Load() event handler

To add code to the Checkout_Click() button handler

To create the Checkout.asp page

  1. Click Start, point to Programs, point to Microsoft Visual Studio .NET, and then click Microsoft Visual Studio .NET.

  2. In the Microsoft Development Environment [design] – Start Page screen, click Open Project.

  3. In the Open Project dialog box, select the NorthwindTraders project, and then click Open.

  4. In the NorthwindTraders – Microsoft Visual C# .NET [design] – Default.aspx window, in the Solution Explorer window, right-click NorthwindTraders, point to Add, and then click Add Web Form.

  5. In the Add new Item - NorthwindTraders dialog box, in the Name box, type Checkout.aspx, and then click Open.

  6. In the Solution Explorer window, click View Code.

  7. Add the following references in the using section:

    using Microsoft.CommerceServer.Runtime;
using Microsoft.CommerceServer.Runtime.Profiles;
using Microsoft.CommerceServer.Runtime.Orders;
using Microsoft.CommerceServer.Runtime.Pipelines;
using Microsoft.CommerceServer.Runtime.Catalog;
using Microsoft.CommerceServer.Runtime.Diagnostics;
using Microsoft.CommerceServer.Runtime.Caching;

To insert controls on the Checkout.aspx page

  1. In the Solution Explorer window, click View Designer.

  2. Click View on the toolbar, and then click Toolbox.

  3. In the Toolbox window, in the Web Forms section, drag and drop another Label control onto the form.

  4. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type Header.
    Text Type Address Name.

  5. In the Toolbox window, in the Web Forms section, drag and drop another Label control onto the form.

  6. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type FirstNameHeader.
    Text Type First Name.

  7. In the Toolbox window, in the Web Forms section, drag and drop another Label control onto the form.

  8. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type LastNameHeader.
    Text Type Last Name.

  9. In the Toolbox window, in the Web Forms section, drag and drop another Label control onto the form.

  10. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type LineOneHeader.
    Text Type Line One.

  11. In the Toolbox window, in the Web Forms section, drag and drop another Label control onto the form.

  12. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type LineTwoHeader.
    Text Type Line Two.

  13. In the Toolbox window, in the Web Forms section, drag and drop another Label control onto the form.

  14. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type CityHeader.
    Text Type City.

  15. In the Toolbox window, in the Web Forms section, drag and drop another Label control onto the form.

  16. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type StateHeader.
    Text Type State.

  17. In the Toolbox window, in the Web Forms section, drag and drop another Label control onto the form.

  18. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type ZipcodeHeader.
    Text Type Zip Code.

  19. In the Toolbox window, in the Web Forms section, drag and drop another Label control onto the form.

  20. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type CardNameLable.
    Text Type Card Name.

  21. In the Toolbox window, in the Web Forms section, drag and drop another Label control onto the form.

  22. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type CardTypeLabel.
    Text Type Card Type.

  23. In the Toolbox window, in the Web Forms section, drag and drop another Label control onto the form.

  24. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type CardNumberLabel.
    Text Type Card Number.

  25. In the Toolbox window, in the Web Forms section, drag and drop another Label control onto the form.

  26. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type ExpiryMonthLabel.
    Text Type Exp Month.

  27. In the Toolbox window, in the Web Forms section, drag and drop another Label control onto the form.

  28. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type ExpiryYearLabel.
    Text Type Exp Year.

  29. In the Toolbox window, in the Web Forms section, drag and drop another Label control onto the form.

  30. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type ShippingMethodLabel.
    Text Type Shipping Method.

    Ee824715.note(en-US,CS.20).gifNote

    • Add the following TextBox controls next to their corresponding Label controls.

  31. In the Toolbox window, in the Web Forms section, drag and drop a TextBox control onto the form.

  32. In the Properties window, make sure that the control that you just created is selected, and then in the ID box, type AddressName.

  33. In the Toolbox window, in the Web Forms section, drag and drop another TextBox control onto the form.

  34. In the Properties window, make sure that the control that you just created is selected, and then in the ID box, type FirstName.

  35. In the Toolbox window, in the Web Forms section, drag and drop another TextBox control onto the form.

  36. In the Properties window, make sure that the control that you just created is selected, and then in the ID box, type LastName.

  37. In the Toolbox window, in the Web Forms section, drag and drop another TextBox control onto the form.

  38. In the Properties window, make sure that the control that you just created is selected, and then in the ID box, type LineOne.

  39. In the Toolbox window, in the Web Forms section, drag and drop another TextBox control onto the form.

  40. In the Properties window, make sure that the control that you just created is selected, and then in the ID box, type LineTwo.

  41. In the Toolbox window, in the Web Forms section, drag and drop another TextBox control onto the form.

  42. In the Properties window, make sure that the control that you just created is selected, and then in the ID box, type City.

  43. In the Toolbox window, in the Web Forms section, drag and drop another TextBox control onto the form.

  44. In the Properties window, make sure that the control that you just created is selected, and then in the ID box, type State.

  45. In the Toolbox window, in the Web Forms section, drag and drop another TextBox control onto the form.

  46. In the Properties window, make sure that the control that you just created is selected, and then in the ID box, type Zipcode.

  47. In the Toolbox window, in the Web Forms section, drag and drop another TextBox control onto the form.

  48. In the Properties window, make sure that the control that you just created is selected, and then in the ID box, type CardName.

  49. In the Toolbox window, in the Web Forms section, drag and drop another TextBox control onto the form.

  50. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type CardNumber.
    Text Type 4111-1111-1111-1111.

  51. In the Toolbox window, in the Web Forms section, drag and drop another TextBox control onto the form.

  52. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type ExpiryMonth.
    Text Type 10.

  53. In the Toolbox window, in the Web Forms section, drag and drop another TextBox control onto the form.

  54. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type ExpiryYear.
    Text Type 2005.

  55. In the Toolbox window, in the Web Forms section, drag and drop a DropDownList control onto the form.

  56. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type CardList.
    Items Click […].

  57. In the ListItem Collection Editor dialog box, click Add.

  58. In the ListItem Properties section, do the following:

    Use this To do this
    Selected Select True from the drop-down list.
    Text Type Visa.
    Value Type visa.

  59. Click OK.

  60. In the Toolbox window, in the Web Forms section, drag and drop another DropDownList control onto the form.

  61. In the Properties window, make sure the control that you just created is selected, and then in the ID box, type shippingMethodList. (the values for this drop-down list will be populated programmatically using the site terms for shipping).

  62. In the Toolbox window, in the Web Forms section, drag and drop a Button control onto the form.

  63. In the Properties window, make sure the control that you just created is selected, and then do the following:

    Use this To do this
    ID Type CheckoutBtn.
    Text Type Checkout.

To insert class-wide variables

  1. In the Solution Explorer window, click View Code.

  2. In the public class section, add the following code:

    OrderContext    ordersys = CommerceContext.Current.OrderSystem;
Microsoft.CommerceServer.Runtime.Orders.Basket basket = null;

To add code to the Page_Load() event handler

  • In the Page_Load() event handler, add the following code:

    if (!IsPostBack)
{
string[] columns= {"shipping_method_id","shipping_method_name"};
   DataSet ds = ordersys.GetShippingMethods(null,null,columns);
   shippingMethodList.DataTextField="shipping_method_name";
   shippingMethodList.DataValueField="shipping_method_id";
   shippingMethodList.DataSource=ds;
   shippingMethodList.DataBind(); 

}

To add code to the Checkout_Click() button handler

  1. In the Solution Explorer window, click View Code.

  2. In the NorthwindTraders – Microsoft Visual C# .NET [design] – Checkout.aspx window, double-click the Checkout button.

  3. In the CheckoutBtn_Click() button handler, add the following code:

       if(IsValid) 
   {
      //Microsoft.CommerceServer.Runtime.Orders.Basket basket;
      CommerceContext ctx = CommerceContext.Current;
      Profile userProfile = null;
      bool isLoggedOn = ctx.AuthenticationInfo.IsAuthenticated();

      // This simple process does not carry the product that the
      // user was attempting to enter.  This would be good to do 
      // in a real site...

      if(!isLoggedOn) 
      {
         Response.Redirect("login.aspx");
      }

      // Extract the userID to get the basket
      ProfileContext profContext = ctx.ProfileSystem;
      string userId = ctx.UserID;

      basket = ordersys.GetBasket(new Guid(userId));

      // If there isn't anything in the basket, then redirect to the
      // default.aspx page.
      if(!(basket.OrderForms.Count > 0)) 
      {
         Response.Redirect("default.aspx");
      }
      //Get the user profile
      userProfile = profContext.GetProfile(ctx.UserID,"UserObject");

      PipelineInfo info = new PipelineInfo("basket");

      info["CacheName"] = "discounts";
      info.Profiles.Add("User", CommerceContext.Current.UserProfile);

      string addrID = "";

      OrderAddress addr = new OrderAddress(AddressName.Text, AddressName.Text);

      addr.ID         = basket.Addresses.Count.ToString();
      addr.Name       = AddressName.Text;
      addr.FirstName  = FirstName.Text;
      addr.LastName   = LastName.Text;
      addr.Line1      = LineOne.Text;
      addr.Line2      = LineTwo.Text;
      addr.City       = City.Text;
      addr.RegionCode = State.Text;
      addr.PostalCode = Zipcode.Text;
      addr.CountryName = "US";
      basket.Addresses.Add(addr);

      // We are only allowing one address, so we
      // are just using the foreach enumerator
      // to crack the addresses collection and find
      // the first (only) address to set our billing
      // & shipping info.
      foreach(OrderAddress addr2 in basket.Addresses)
      {
         basket.SetBillingAddress(addr2.ID);
         basket.SetShippingAddress(addr2.ID);
         addrID = addr2.ID;
         break;
      }
      basket.SetPropertyOnOrderForms("payment_type", "credit_card");
      basket.SetPropertyOnOrderForms("cc_name", CardName.Text);
      basket.SetPropertyOnOrderForms("cc_type",                                     CardList.Items[CardList.SelectedIndex].Value);
            basket.SetPropertyOnOrderForms("_cc_number", CardNumber.Text);
      basket.SetPropertyOnOrderForms("_cc_expmonth", ExpiryMonth.Text);
      basket.SetPropertyOnOrderForms("_cc_expyear", ExpiryYear.Text);

      for (int i=0; i< basket.OrderForms["default"].LineItems.Count; i++) 
      {

         LineItem item = basket.OrderForms["default"].LineItems[i];
         item.ShippingMethodID = "{" + shippingMethodList.SelectedItem.Value + "}";
         item.ShippingMethodName = shippingMethodList.SelectedItem.Text;
         item.ShippingAddress  = addrID;
      }
      basket.Save();      

      Response.Redirect("OrderConfirmation.aspx");
   }

Copyright © 2005 Microsoft Corporation.
All rights reserved.