Step 3: Implement the Basket.aspx Page

Article
11/12/2009

The Basket.aspx page implements a custom Repeater that iterates through the rows in the basket to display them on the screen.

In this step, you will implement a basket page to display the products in a user's basket, and provide the functionality of deleting individual product items.

In this step you will do the following:

Create the Basket.aspx page and insert the header information.
Add a table to the page to organize the data displayed to the user.
Insert a Repeater control onto the form and create an item template for it.
Insert Commerce Server external reference information.
Add variable declarations for to the HTML file.
Add code to the Page_Load() handler.
Add command handler for the remove method.

To create the Basket.aspx page and insert header information

To add a table to the Basket.aspx page

To insert the Repeater control

To insert the Commerce Server classes

To add variable declarations for elements added to the HTML file

To add code to the Page_Load() event handler

To add a command handler for the remove method

To create the Basket.aspx page and insert header information

Click Start, point to Programs, point to Microsoft Visual Studio .NET, and then click Microsoft Visual Studio .NET.
In the Microsoft Development Environment [design] – Start Page screen, click Open Project.
In the Open Project dialog box, select the NorthwindTraders project, and then click Open.
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.
In the Add new Item - NorthwindTraders dialog box, in the Name box, type Basket.aspx, and then click Open.
In the NorthwindTraders – Microsoft Visual C# .NET [design] – Basket.aspx window, in the lower-left corner, click HTML, and then add the following code at the very top of the page, below the <%@ Page> but before the <!DOCTYPE> tags:
```
<%@ Import Namespace="Microsoft.CommerceServer.Runtime" %>
<%@ Import Namespace="Microsoft.CommerceServer.Runtime.Orders" %>
```

To add a table to the Basket.aspx page

Add the following HTML code to the page between the <form> and </form> tags:

   <asp:Label id="PageSubTitle" />
   <table width="80%" cellpadding="1" cellspacing="0" border="0">
      <tr valign="top" bgcolor="#000000">
         <td align="center" id="Quantity" width="10%" 
            style="COLOR: #ffffff"></td>
         <td align="center" id="Name" width="60%"  
            style="COLOR: #ffffff"></td>
         <td align="center" id="Price" width="10%"  
            style="COLOR: #ffffff"></td>
         <td align="center" id="DiscountedPrice" width="10%"  
            style="COLOR: #ffffff"></td>                  
         <td >&nbsp;<br></td>
      </tr>
   </table>

To insert the Repeater control

In the NorthwindTraders – Microsoft Visual C# .NET [design] – Basket.aspx window, in the lower-left corner, click Design.
Click View on the toolbar, and then click Toolbox.
In the Toolbox window, in the Web Forms box, drag and drop a Repeater control onto the form.
In the Properties window, make sure you the control that you just created is selected, and then in the ID box, type OrderListing.
In the NorthwindTraders – Microsoft Visual C# .NET [design] – Basket.aspx window, in the lower-left corner, click HTML.
Move the <asp:Repeater> and </asp:Repeater> tags between the </tr> and </table> tags.

Insert the following code (as a sub-element) between the <asp:Repeater> and </asp:Repeater> tags:

            <ItemTemplate>
               <tr>
               <td colspan=5>
                  <%# DataBinder.Eval(Container.DataItem, "Name") %>
               </td>
               </tr>                  
               <asp:Repeater id="BasketListing" DataSource='<%#DataBinder.Eval(Container.DataItem, "LineItems")%>' OnItemCommand="BasketListing_ItemCommand" >
                  <ItemTemplate>
                  <tr>
                  <td align="left" width="10%"  ID="Td1">
                     <asp:Label ID="QuantityContent" Runat="server">
                           <%# ((LineItem)Container.DataItem)["Quantity"] %>
                     </asp:Label>
                  </td>
                  <td align="left" width="60%"  ID="Td2">
                     <asp:Label ID="ProductName" Runat="server">
                        <%# ((LineItem)Container.DataItem)["_product_Name"] %>
                     </asp:Label>
                     <br />
                     <asp:Label ID="Description" Runat="server">
                        <%# ((LineItem)Container.DataItem)["_product_Description"] %>
                     </asp:Label>
                  </td>
                  <td valign="right" width="10%"  ID="Td3">
                     <asp:Label ID="PriceContent" Font-Name="verdana" Runat="server">
                        <%# Decimal.Parse(((LineItem)Container.DataItem)["_product_cy_list_price"].ToString()).ToString("c") %>
                     </asp:Label>
                  </td>
                  <td valign="right" width="10%"  ID="Td4">
                     <asp:Label ID="DiscountedPriceContent" Font-Name="verdana" Runat="server">
                        <%# Decimal.Parse(((LineItem)Container.DataItem)["_cy_oadjust_adjustedprice"].ToString()).ToString("c") %>
                     </asp:Label>
                  </td>
                  <td valign="center">
                     <asp:LinkButton id="RemoveBtn" CommandName='<%# ((LineItem)Container.DataItem)["product_id"].ToString() %>' 
CommandArgument='<%# ((LineItem)Container.DataItem)["product_variant_id"].ToString() %>' >
                           Remove
                     </asp:LinkButton>
                  </td>   
                  </tr>
                  </ItemTemplate>
                  <SeparatorTemplate>
                  <tr>
                  <td colspan="5">
                     <hr noshade  ID="Hr1"/>
                  </td>
                  </tr>
                  </SeparatorTemplate>
               </asp:Repeater>
               </ItemTemplate>   
               <FooterTemplate>
                  <tr>
                  <td colspan="5" align="right">
                     <a href='checkout.aspx'>
                     Checkout
                     </a>
                  </td>
                  </tr>                        
               </FooterTemplate>

You can disregard any error messages that appear after you perform this step.

To insert the Commerce Server classes

In the NorthwindTraders – Microsoft Visual C# .NET [design] – Basket.aspx window, in the Solution Explorer window, click View Code.

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 add variable declarations for elements added to the HTML file

Ee824716.note(en-US,CS.20).gif Note

The variables you declare here provide access to the controls added to the HTML view in one of the previous steps.

In the NorthwindTraders – Microsoft Visual C# .NET [design] – Basket.aspx.cs window, in the public class section, add the following code:

protected System.Web.UI.WebControls.Repeater BasketListing;

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

To add code to the Page_Load() event handler

In the NorthwindTraders – Microsoft Visual C# .NET [design] – Basket.aspx.cs window, in the Page_Load() event handler, add the following code:

         // Render the basket 
         // Validate login and redirect if user is not logged in
         if(!IsPostBack) 
         {
            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);
            basket.RunPipeline(info);   

            string orderFormName = "default";
            if(null != basket.OrderForms[orderFormName] 
               && 0 < basket.OrderForms[orderFormName].LineItems.Count) 
            {
               OrderListing.DataSource = basket.OrderForms;
               OrderListing.DataBind();
            }
            basket.Save();
         }

To add a command handler for the remove method

Ee824716.note(en-US,CS.20).gif Note

These steps add parameters for the remove command call inserted earlier in the HTML view (for the BasketListing Repeater OnItemCommand="BasketListing_ItemCommand" in the opening and the <asp:LinkButton id="RemoveBtn"> tags).

In the NorthwindTraders – Microsoft Visual C# .NET [design] – Basket.aspx.cs window, add the following code after the Page Load () event handler:

public void BasketListing_ItemCommand(object source, RepeaterCommandEventArgs args) 
{
   string orderFormName = "default";
   string product_variant_id = (args.CommandArgument).ToString();
   string product_id = (args.CommandName).ToString();
   int index;

   basket = ordersys.GetBasket(new Guid(CommerceContext.Current.UserID));
   if ((product_variant_id != null) && (product_variant_id != ""))
   {
      index = basket.OrderForms[orderFormName].LineItems.IndexOf("BuildingMaterials1033", product_id, product_variant_id);
   }
   else
   {
      index = basket.OrderForms[orderFormName].LineItems.IndexOf("BuildingMaterials1033", product_id, null);
   }
   basket.OrderForms[orderFormName].LineItems.Remove(index);
   basket.Save();

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

Step 3: Implement the Basket.aspx Page

Additional resources