Step 1: Implement Header Control for Page Navigation

Article
11/12/2009

In the step you will configure project files for the entire lab and create a header control for navigation throughout your Web site. The header control will automatically configure itself based upon AuthManager information that checks the authentication status of a user on your Web site.

In this step you will do the following:

Using Orders in Business Desk, you will also create a shipping method, which is required to complete the user check-out process.
Copy Commerce Server 2002 pipeline components.
Create a pipeline logging directory.
Edit the Web.Config file to enable Commerce Server 2002 pipelines.
Create the control and input the *.ASCX HTML code.
Enter Commerce Server namespace information.
Insert class-wide variable declarations.
Update the _header.ascx.cs file.
Add a stylesheet to the Web site.
Add the stylesheet throughout the entire Web site.
Add the header control to the pages throughout the Web site.

To create a shipping method

To edit the Web.Config file

To create the control in the *.ASCX HTML code

To insert the Commerce Server classes

To insert class-wide variable declarations

To update the _header.ascx.cs file

To add the stylesheet to the site

To add the stylesheet throughout the site

To add the header to all of the pages on the site

To create a shipping method

Open the NorthwindTraders Business Desk.
In Orders, click Shipping Methods.
In the Shipping Methods screen, click on the toolbar, and then select Charge by Subtotal from the drop-down list.
In the Charge by Subtotal - New screen, in the Shipping Method Properties section, do the following:

Use this To do this

Language Select English – United States from the drop-down list.

Name Type Flat Fee Express.

Enabled Select this check box to enable the shipping method.
In the Rates section, and then do the following:

Use this To do this

Price, up to Select over 0, and then click Edit.

Shipping Rate Type 15.
Click Accept.
To save the shipping method and return to the Shipping Methods screen, click on the toolbar.

Use this	To do this
Language	Select English – United States from the drop-down list.
Name	Type Flat Fee Express.
Enabled	Select this check box to enable the shipping method.

Use this	To do this
Price, up to	Select over 0, and then click Edit.
Shipping Rate	Type 15.

The charge by subtotal shipping method is saved.

To edit the Web.Config file

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, double-click Web.config.

In the NorthwindTraders – Microsoft Visual C# .NET [design] – Web.config window, locate the <pipelines> tag, press ENTER to insert a new line, and then enter the following code:

            <pipeline
                name="basket"
                path="pipelines\basket.pcf"
                transacted="false"
                type="OrderPipeline"
                loggingEnabled="true" />

            <pipeline
                name="checkout"
                path="pipelines\checkout.pcf"
                transacted="true"
                type="OrderPipeline"
                loggingEnabled="true" />

            <pipeline
                name="total"
                path="pipelines\total.pcf"
                transacted="false"
                type="OrderPipeline"
                loggingEnabled="true" />

            <pipeline
                name="advertising"
                path="pipelines\advertising.pcf"
                transacted="false"
                type="CSFPipeline" />

            <pipeline
                name="discounts"
                path="pipelines\discounts.pcf"
                transacted="false"
                type="CSFPipeline" />

            <pipeline
                name="recordevent"
                path="pipelines\recordevent.pcf"
                transacted="false"
                type="CSFPipeline" />

Remove comment tags around the <caches> record to enable caches that will be used with the pipeline components.

To create the control in the *.ASCX HTML code

In the NorthwindTraders – Microsoft Visual C# .NET [design] – Web.config window, in the Solution Explorer - NorthwindTraders window, right-click NorthwindTraders, point to Add, and then click Add Web User Control.
In the Add new Item - NorthwindTraders dialog box, in the Name box, type _header.ascx, and then click Open.

In the NorthwindTraders – Microsoft Visual C# .NET [design] – _header.ascx window, in the lower-left corner, click HTML, and then add the following code:

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="_header.ascx.cs" Inherits="NorthwindTraders.__header" TargetSchema="https://schemas.microsoft.com/intellisense/ie5"%>
   <meta name="vs_showGrid" content="True">
<table width="650" cellpadding="0" cellspacing="0" border="0" background="image/header_back.jpg" style="WIDTH: 650px; HEIGHT: 110px">
   <tr>
      <td height="110" width="650" valign="top" style="WIDTH: 650px">
         <img src="image/header_banner.gif" width="208" height="110" border="0">
         <asp:HyperLink id="homeLink" ></asp:HyperLink>&nbsp;&nbsp;
         <asp:HyperLink id="loginLink" ></asp:HyperLink>&nbsp;&nbsp;
         <asp:HyperLink id="basketLink" ></asp:HyperLink>&nbsp;&nbsp;
         <asp:HyperLink id="userRegLink" ></asp:HyperLink>
      </td>
      <td height="110" width="30"></td>
      <td><IMG height="110" src="image/right.gif" width="30" border="0"></td>
   </tr>
</table>

Right-click the _header.ascx page, select View Design, and then click save on the toolbar.

To insert Commerce Server classes

In the NorthwindTraders – Microsoft Visual C# .NET [design] – _header.ascx window, in the Solution Explorer - NorthwindTraders window, click View Code.
In the NorthwindTraders – Microsoft Visual C# .NET [design] – _header.ascx.aspx.cs window, in the using section, add the following code:
```
using Microsoft.CommerceServer.Runtime;
using Microsoft.CommerceServer.Runtime.Orders;
```

To insert class-wide variable declarations

Ee825876.note(en-US,CS.20).gif Notes

Visual Studio .NET automatically inserts these declarations when the HyperLink control is placed onto the form.
The Project Creation Wizard creates container controls with matching names (case-sensitive) including the IDs of the <asp:HyperLink> controls.
You can also manually link HTML elements to their Visual Studio .NET container variants and process them programmatically (the runat=”server” tag must be added to the HTML element).

To update the _header.ascx.cs file

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

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

         homeLink.Text = "Home";
         homeLink.href = "default.aspx";


         if (CommerceContext.Current.AuthenticationInfo.IsAuthenticated())
         {
            loginLink.Text = "Logoff";
            loginLink.href = "logoff.aspx";
            userRegLink.Visible = false;
            basketLink.Visible=true;
            basketLink.Text = "Basket";
            basketLink.href = "Basket.aspx";
         }
         else
         {
            loginLink.Text = "Login";
            loginLink.href = "login.aspx";
            userRegLink.Text = "Registration";
            userRegLink.href = "UserRegistration.aspx";
            userRegLink.Visible = true;
            basketLink.Visible = false;
         }

To add the stylesheet to the site

In the **NorthwindTraders – Microsoft Visual C# .NET [design] – header.ascx.aspx.cs****window, in the Solution Explorer - NorthwindTraders window, right-click NorthwindTraders, point to Add, and then click Add HTML Page.
In the Add New Item – NorthwindTraders dialog box, do the following:

Use this To do this

Templates Select Style Sheet from the list.

Name Type stylesheet.css.
Click Open.

Use this	To do this
Templates	Select Style Sheet from the list.
Name	Type stylesheet.css.

In the **NorthwindTraders – Microsoft Visual C# .NET [design] – StyleSeet.css****window, at the end of document (after the Body element and the curly brackets), add the following code:

.nrmText
{
    COLOR: #000000;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    FONT-SIZE: 11px;
    FONT-WEIGHT: normal;
    LINE-HEIGHT: normal;
    MARGIN-TOP: 5px
}
A
{
    COLOR: #3c7144;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    FONT-SIZE: 11px;
    FONT-WEIGHT: normal;
    TEXT-DECORATION: none
}
A:hover
{
    COLOR: #ff7e00;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    FONT-SIZE: 11px;
    FONT-WEIGHT: normal;
    TEXT-DECORATION: underline
}
.indentText
{
    COLOR: #ffffff;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    FONT-SIZE: 11px;
    FONT-WEIGHT: normal;
    PADDING-LEFT: 10px;
    PADDING-TOP: 5px
}
.bodyText
{
    COLOR: #3c7144;
    FONT-FAMILY: Verdana;
    FONT-SIZE: 11px;
    FONT-WEIGHT: normal;
    PADDING-LEFT: 10px;
    PADDING-RIGHT: 10px
}
.smallText
{
    COLOR: #3c7144;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    FONT-SIZE: 9px;
    FONT-WEIGHT: normal
}

To add the stylesheet throughout the site

In the **NorthwindTraders – Microsoft Visual C# .NET [design] – header.ascx.cs****window, in the Solution Explorer - NorthwindTraders window, double-click the Default.aspx file.
In the NorthwindTraders – Microsoft Visual C# .NET [design] – default.aspx window, in the lower-left corner, click HTML, and then add the following code between the <HEAD> and </HEAD> tags:
```
<link rel="stylesheet" type="text/css" href="stylesheet.css">
```
Repeat steps 1 and 2 for the following files: (Some of the files will be created later in the tutorial, and you must add the stylesheet after the files are created).
- Login.aspx
- Logoff.aspx
- UserRegistration.aspx
- ProductList.aspx
- ProductDetail.aspx
- Basket.aspx
- Checkout.aspx
- ConfirmOrder.aspx

To add the header to all of the pages on the site

In the NorthwindTraders – Microsoft Visual C# .NET [design] – default.ascx window, in the Solution Explorer - NorthwindTraders window, double-click the Default.aspx file.
In the NorthwindTraders – Microsoft Visual C# .NET [design] – default.ascx window, in the lower-left corner, click HTML, and then add the following code at the very top of the page:
```
<%@ Register TagPrefix="ucx" TagName="header" Src="_header.ascx" %>
```
Add the following code in the fist line after the <BODY> tag:
```
<ucx:header id=header1 ></ucx:header>
```
Repeat steps 1 through 3 for the following files: (Some of the files will be created later in the tutorial, and you must add the header after the files are created).
- Login.aspx
- Logoff.aspx
- UserRegistration.aspx
- ProductList.aspx
- ProductDetail.aspx
- Basket.aspx
- Checkout.aspx
- ConfirmOrder.aspx

Step 1: Implement Header Control for Page Navigation

Additional resources