Select Page

Assignment Objectives
Use current tools to create an e-commerce site 

ASSIGNMENT DETAILS
In Unit 2, you expanded on your site, adding more pages and creating the navigation experience. You also collected data and images, and you created the database containing your products. In Unit 3, you will use that database to create the shopping experience for your users. This will consist of a catalog that displays the products that users can purchase.
This assignment consists of 2 parts, as follows:

Querying the database for the products you entered in Unit 2
Configuring a control to display the items that are returned in the query

The control will need to be customized to display the images and an Add to Cart button.

ITSD 325 Unit 3 Individual Submission Instructional Guide

Building the Catalog

Complete the following steps:

1. Open the page Catalog.aspx, which you created in Unit 2, and switch to Design view (this button is
located below-left of the central editing window).

2. From the Data section of the Toolbox, drag a DataList control onto the page at the desired location.
3. From the Task menu that pops out to the right of the DataList control, under Choose Data Source,

select . This will launch the Data Source Configuration Wizard.
4. Select SQL Database (the default) and change the ID to CatalogDataSource, then click OK.
5. On the Choose Your Data Connection screen, in the popup, select the database you created in Unit

2, which should be called ITSD325, then click Next.
6. On the Save the Connection String to the Application Configuration File screen, leave the box

checked that says “Yes, save this connection as”, and click Next.
7. On the Configure the Select Statement screen, use the default settings and click Next.
8. On the Test Query screen, click Finish. (Optionally, you can click Test Query to see the data that will

be returned from this query.)

At this point, if you are in Design view, the DataList will display false data on the page preview within Visual
Studio. The display does not yet look very much like a catalog, so it must be modified to better suit your
goals. Below are some tips that you can explore that will allow you to manipulate the appearance of the
DataList control so that it looks more like a typical e-commerce catalog display.

– With the DataList selected in the editing window, look in the Properties window for the
RepeatDirection property, and set it to Horizontal. This will cause the control to display several
items to the right until it runs out of room, then display more items on the next row down.

– Look for the RepeatColumns property and try a value of 3, adjusting as desired. This allows you to
specify the number of items in each row of a horizontal DataList (instead of it just repeating until it
runs out of room). (You may want to try different values here after you configure the DataList to
display your product images, which is explained below.)

Follow these steps to display the image instead of the image’s filename:

1. Make a folder in Solution Explorer called “images”, and add your collection of product images to this
folder.

2. Open the DataList Tasks menu for the DataList (the small arrow that appears on the upper-right
edge of the control when you select it in the editing window).

3. Click Edit Templates
4. Locate the Label control that is currently displaying the image filename and delete it.
5. Add an Image control from the Standard section of the Toolbox in the same location of the

template.
6. On the Image control’s Tasks menu, click “Edit Databindings…”
7. In the Field binding, open the Bound to popup and select the entry for the image field from the

table.
8. In Format, select “General – {0}”
9. Edit the entry, changing it from “General – {0}” to “images/{0}” (without the quotes)

Note 1: This may present images that are too large, interfering with the overall catalog display. You can
control this by clicking on the image control and adjusting its size within the ItemTemplate of the DataList
control.

Note 2: The adjustment in Note 1 above will cause all images in the catalog to have the same size and
shape, which may not be optimal for your products. This is fine for the current assignment (it’s okay if
they’re a bit distorted), but if you wish to address the problem, either find images that are similar in size, or
adjust them in an image editing program.

Experiment with these options until you have a display that resembles and e-commerce catalog and meets
your personal expectations.

Add to Cart Button

Your product catalog is just about finished, but you need an Add to Cart button for each product so that the
user can add the item to their order. (We will not be addressing quantity in this project.) Use the following
steps to accomplish this:

1. Select the DataList control in the editing window, then open the DataList Tasks menu in the upper-
right corner of the control

2. Click Edit Templates
3. In the ItemTemplate, make some room below the existing controls using your keyboard (click below

or to the right of the last control, then hit Enter)
4. Drag a Button control from the Standard section of the Toolbox into this location in the

ItemTemplate
5. Using the Properties window, change the Text of the button to read “Add to Cart”
6. In the DataList Tasks menu, click End Template Editing.

Note: Optionally, you may use the ImageButton control instead of the Button control, which will allow you
to use an image from your Images folder to make the Add to Cart button more engaging and match the
style of your site.