Determining What Data Web Control to Use

Once you are familiar with the differences between the data Web controls, choosing which control to use in a given situation should be relatively straightforward. Let's examine a few real-world scenarios and discuss which control (or controls) we might want to choose. Don't worry if you are having difficulty deciding what control would be best for each given situation as your experience with these controls increases, you'll be able to quickly determine which control would be best for a given situation.

For these real-world scenarios, imagine that you are employed by a company that has an online store. The various scenarios listed here are actual tasks an employee of an e-commerce company might face.

An Online Shopping Cart

One task required for every online store is creating a shopping cart, which records what items your customer has currently "checked out." The customer should be able to view a list of items in her cart, remove any items, and view more details about any item.

Assume that we have already completed the business logic necessary to populate the shopping cart, provide detailed information about each order, remove an item from the cart, and so on, and only need to decide what data Web control to use to display the data in the shopping cart. The design team has decided that the shopping cart data should be displayed in an HTML table, with each row of the table corresponding to an item in the user's cart. For each row, there will be multiple columns, such as the product name, price, and buttons to remove an item from the cart and to retrieve more information about a particular item in the cart.

As with most real-world scenarios, any of the three data Web controls could be used, but which one(s) would be the best fit, requiring the least amount of additional work? The Repeater is clearly not the best choice while you could add buttons to the ItemTemplate, it seems like a lot of unnecessary work; furthermore, you would need to emit the code to produce an HTML table, something the DataList and DataGrid can do for us free of charge.

In my opinion, the best bet would be the DataGrid. To provide the More Details and Remove from Cart buttons, you could simply add a ButtonColumn control for each. Because you would not likely need to use templates (you could just use a BoundColumn control for each field in the shopping cart DataSource), I find it hard to justify using the DataList, where you would need to use the template syntax. (Although the template syntax provides a high degree of layout and presentation customization, you'll hopefully agree that its mix of HTML markup and data binding syntax is messier than using column controls via the DataGrid.)

A Small 2x2 Grid Containing Pictures of the Store's Current Specials

You want to display a 2x2 grid with small pictures of the day's current specials on the front page of your company's Web site. Under each picture you want to have a short description of the product, the price, and a hyperlink that will take the customer to the order page for that particular item. Assume that the product specials are stored in a database table with columns like ProductName, ProductPrice, ProductID, PictureURL, and so on, with one row for each of the special items.

Using the DataGrid for such an assignment would be difficult at best. Because the DataGrid emits one HTML table row per row in the DataSource, it would be quite difficult to tweak the DataGrid to emit a 2x2 HTML table. Although the Repeater control could be used, it would require some tricky template syntax to get the 2x2 grid to appear correctly.

The optimal choice here is the DataList, which is a natural candidate because of its RepeatColumns property. As we saw in Listing 1.7 and Figure 1.4, by setting the RepeatColumns property to a value of n, one can easily transform the DataList into an nxm grid, where m is the number of rows in the DataSource divided by n.

As we'll see in Chapter 3, one can easily convert the ProductURL field into an img tag to display the product on the Web page by using some relatively straightforward template markup. Additionally, a hyperlink can be easily added that takes the user to a product information page for the particular item by passing the item's ProductID to the product information Web page via the QueryString.

Listing the Features for a Particular Product

Each item sold in your company's online store has a number of features. For example, a computer system for sale might have features specifying the processor speed, the amount of RAM, the video card manufacturer, what peripherals are included, and so on. This data is stored in a database table called ProductFeatures, which has a ProductID as a foreign key. So, to see the features of Product 1001, one could simply issue a query for all rows in the ProductFeatures table whose foreign key value equals 1001.

You have been asked to display this information on the Product Details Web page. Specifically, this information is to be displayed as a bulleted list. What control would be the best fit here?

As with our first example, any of the controls could fit the bill. For example, you could use a DataGrid or DataList by simply specifying that the contents for each row begin with an li tag. The user could then surround the actual control with a ul tag, as shown in Listing 1.10.

Listing 1.10 Using a DataList to Display a Bulleted List

 1: <ul>  2: <asp:DataList  runat="server">  3:   <ItemTemplate>  4:     <li><%# DataBinder.Eval(Container.DataItem, "Feature") %></li>  5:   </ItemTemplate>  6: </asp:DataList>  7: </ul> 

Using a DataGrid would be similar, except you would use a TemplateColumn in the Columns tag, an exercise we're saving to examine until Chapter 3. Although the code in Listing 1.10 will produce the desired effect, it needlessly encapsulates the list of features within an HTML table (recall that the DataGrid and DataList render as HTML tables).

CAUTION

Although most browsers will render the HTML produced by Listing 1.10 as a bulleted list, realize that the HTML would be invalid by HTML 3.2 standard specifications. The HTML produced by Listing 1.10 places a table tag within a ul tag, which is not allowed according to the W3C's HTML 3.2 standards.

A better option, in my opinion, would be to use a Repeater control. In the HeaderTemplate, you could add an opening ul tag; the ItemTemplate would be identical to the ItemTemplate in Listing 1.10 (lines 3 5); and the FooterTemplate would contain a closing ul tag. Essentially, the code for the Repeater control would be identical to that in Listing 1.9, replacing the ol tags in lines 3 and 12 with ul tags.