ASP.NET 2.0 Everyday Apps For Dummies (2006)

Chapter 5: Building a Product Catalog Application 127

</asp:SqlDataSource> <br /><br />

Please select a category:

<asp:DropDownList ID=”ddlCategory” runat=”server” AutoPostBack=”True” DataSourceID=”SqlDataSource2” DataTextField=”name”

DataValueField=”catid”

Width=”127px”> </asp:DropDownList><br /> <asp:SqlDataSource ID=”SqlDataSource2”

runat=”server”

ConnectionString=

“<%$ ConnectionStrings:ConnectionString %>” SelectCommand=”SELECT catid,

name,

[desc]

FROM Categories ORDER BY name”> </asp:SqlDataSource>

<br />

<asp:GridView ID=”GridView1” runat=”server” AutoGenerateColumns=”False” BorderStyle=”None” DataKeyNames=”productid” DataSourceID=”SqlDataSource3” OnSelectedIndexChanged=

“GridView1_SelectedIndexChanged” AllowPaging=”True”>

<Columns>

<asp:ImageField

DataImageUrlField=”thumbnail”

DataImageUrlFormatString=”~\Images\{0}”>

</asp:ImageField> <asp:BoundField DataField=”name”

HeaderText=”Product” /> <asp:BoundField DataField=”shorttext”

HeaderText=”Description” /> <asp:BoundField DataField=”price” DataFormatString=”{0:c}”

HeaderText=”Price” /> <asp:CommandField SelectText=”View”

ShowSelectButton=”True” /> <asp:BoundField DataField=”SalePrice”

DataFormatString=”On sale {0:c}!” SortExpression=”SalePrice”> <HeaderStyle BorderStyle=”None” /> <ItemStyle BorderStyle=”None”

Font-Bold=”True” /> </asp:BoundField>

11

12

13

14

15

16

17

18

19

(continued)

128 Part III: Building E-Commerce Applications

Listing 5-3 (continued)

</Columns>
<PagerSettings Mode=”NextPrevious” />	20
</asp:GridView>
<asp:SqlDataSource ID=”SqlDataSource3”	21
runat=”server”
ConnectionString=
“<%$ ConnectionStrings:ConnectionString %>”
SelectCommand=”SELECT Products.productid,
Products.catid,
Products.name,
Products.shorttext,
Products.longtext,
Products.price,
Products.image,
Products.thumbnail,
FeaturedProducts.saleprice
FROM Products
LEFT OUTER JOIN FeaturedProducts
ON Products.productid =
FeaturedProducts.productid
WHERE (Products.catid = @catid)”>
<SelectParameters>	22
<asp:ControlParameter Name=”catid”
ControlID=”ddlCategory”

PropertyName=”SelectedValue” Type=”String” />

</SelectParameters>

</asp:SqlDataSource>

</asp:Content>

The following paragraphs describe the key parts of the Product List page:

1 The Page directive uses the MasterPageFile attribute to specify the name of the Master Page, ~/MasterPage.master.

2 The <Content> element identifies the content for the Product List page.

3 The DataList control displays the featured products. As you can see, its data source is SqlDataSource1. In addition, a method

named DataList1_SelectedIndexChanged is called if the user selects one of the items in this DataList.

4 The DataList control renders one instance of the ItemTemplate for each row in the data source.

5 The NameLabel label displays the name from the data source. It uses ASP.NET 2.0’s simplified binding syntax, which uses the Eval method to specify the data source column you want to display.

6 The FeatureTextLabel label uses the simplified binding syntax to display the featuretext column from the data source.

Chapter 5: Building a Product Catalog Application 129

7 The PriceLabel label uses the simplified binding syntax to display the price column from the data source. Note that in this case, I used a version of the Eval method that accepts a format string as a second parameter. Here the format string formats the price as currency and adds the word Regularly before the price value.

8 Similarly, the SalePriceLabel uses a format string to format the sale price as currency and adds some peppy text to highlight the sale price. Note also that this label is bracketed by <b> and </b> tags to display the sale price in boldface.

9 The LinkButton control provides a link button the user can click to display additional information about a featured product. Here, the CommandName attribute specifies Select as the button’s command name. As a result, the row will be selected when the user clicks this button. Selecting the row causes the SelectedIndexChanged event to fire, which then causes the

DataList1_SelectedIndexChanged method to be called.

10 The first SqlDataSource control provides the data source for the DataList. Notice how the connection string is specified:

<%$ ConnectionStrings:ConnectionString %>

This refers to the connection string identified by the name

ConnectionString in the ConnectionStrings section of the web.config file. As a result, the actual connection string is determined at run time by reading the web.config file.

The SelectCommand attribute specifies the SELECT statement used to retrieve data for this data source. In this case, the SELECT statement uses an inner join to retrieve information from both the

FeaturedProducts and Products tables.

11 The drop-down list control lets the user choose which category of products to display. AutoPostBack is set to true so that the page will be posted when the user selects a product. The data source is set to SqlDataSource2. The DataTextField attribute specifies that the name field should be displayed in the drop-down list, and the DataValueField specifies that the catid field should be used as the value for the selected item.

12 The second SqlDataSource control provides the data for the drop-down list. It uses a simple SELECT statement to retrieve all rows from the Categories table.

13 The GridView control displays the product rows that match the category selected by the user via the drop-down list. As you can see, it specifies SqlDataSource3 as its data source. In addition,

the GridView1_SelectedIndexChanged method is called when the user selects a row. Finally, the AllowPaging attribute enables the GridView control’s built-in paging features, which by default display only ten rows at a time.

130 Part III: Building E-Commerce Applications

14 The first column defined for the GridView control is an ImageField that displays the thumbnail image for each product. The DataImageUrlField attribute identifies the name of the data source field that contains the URL of the images to be displayed, and the DataImageUrlFormatString attribute provides a format string that’s applied to the URL. In this case, the data source field contains just the filename of the image file. Then the format string completes the path by adding ~\Images\ to the filename. For example, if the thumbnail field contains the value sword01T.jpg, the complete URL will be ~\Images\sword01T.jpg.

15 This BoundField column displays the name column from the data source. The header text for the column is set to Product.

16 This BoundField column displays the shorttext column

from the data source. The header text for the column is set to

Description.

17 This BoundField column displays the price column from the data source. A format string displays the price in currency format, and the header text is set to Price.

18 A CommandField column displays a Select button with the text

View. When the user clicks this button, the row is selected and the SelectedIndexChanged event is raised for the GridView control. As a result, the GridView1_SelectedIndexChanged method in the code-behind file is executed.

19 The last column in the GridView control is a BoundField column that displays the saleprice column from the data source. A format string is used to add the text On sale and to apply the currency format. Note that nothing is displayed if the saleprice column is null. Notice also that <HeaderStyle> and <ItemStyle> elements are used to display this column without a border.

20 The <PagerSettings> element indicates what type of

paging controls you want to appear on the GridView control. In this example, the Mode attribute specifies NextPrevious, so Next and Previous buttons are displayed. Other options for this attribute are NextPreviousFirstLast, Numeric, and NumericFirstLast. Besides the Mode attribute, the

<PagerSettings> element enables you to use other attributes that affect various aspects of the paging controls — such as the text or image displayed for each pager button.

21 The third SqlDataSource control provides the data that’s displayed by the GridView control. Notice that the SELECT statement refers to a parameter named catid to indicate which products to select.

Chapter 5: Building a Product Catalog Application 131

22 The <SelectParameters> element defines the parameters used by a data source. In this example, only one parameter, named catid, is required. To define the catid parameter, a <ControlParameter> element is used. The

<ControlParameter> element defines a parameter whose value is taken from another control on the page. In this case, the control is the drop-down list (ddlCategory), and the parameter value will be taken from the SelectedValue property of the control.

The GridView Control

The GridView control, new with ASP.NET 2.0, is designed to replace the old DataGrid control. Like the DataGrid control, the GridView control is designed to present data from a data source in a tabular format. However, the GridView control has several features that weren’t available in the DataGrid control, such as automatic paging and sorting. And it’s designed to work with the new ASP.NET 2.0 data sources.

Here are the attributes you’ll use most often on the

<GridView> element to define a GridView control:

ID: Provides a name used to identify the

GridView control.

Runat: As with all ASP.NET controls, you must specify runat=server.

DataSourceID: The ID of the data source.

DataKeyNames: The names of the key fields. If the data source has more than one key field, the names should be separated by commas.

AutoGenerateColumns: You’ll usually specify False for this attribute to prevent the GridView control from automatically generating columns for each field in the data source. Then you can use a <Columns> child element to manually define the columns.

AllowPaging: Specify True to enable paging for the GridView control.

AllowSorting: Specify True to enable sorting for the GridView control.

The columns are defined by creating a <Columns> child element, and then adding one of the following child elements for each column you want to create:

BoundField: Creates a column that’s bound to a field in the data source.

ButtonField: Creates a column that contains a button.

CheckBoxField: Creates a column with a check box that’s bound to a Boolean value.

CommandField: Creates a column with one or more command buttons (command buttons include Select, Edit, and Delete).

HyperLinkField: Creates a column that displays a field from the data source as a hyperlink.

ImageField: Creates a column that displays an image. The URL for the image is obtained from a field in the data source.

TemplateField: Creates a field that uses a template to specify the field’s contents.

132 Part III: Building E-Commerce Applications

The code-behind file for the Default.aspx page (C# version)

The Default.aspx page requires a code-behind file to handle the PageLoad event and the SelectedIndexChanged event for the DataList and the GridView controls. The C# version of this code-behind file is shown in Listing 5-4. If you’re working in Visual Basic, you can skip this section and use the VB version of the code-behind file presented in the next section instead.

Listing 5-4: The code-behind file for the Default.aspx page (C#)

using System; using System.Data;

using System.Configuration; using System.Collections; using System.Web;

using System.Web.Security; using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

string CatID = Request.QueryString[“cat”]; if (CatID != null)

{

ddlCategory.SelectedValue = CatID;

}

}

}

protected void DataList1_ SelectedIndexChanged (object sender, EventArgs e)

{

string ProductID = DataList1.SelectedValue.ToString().Trim();

string CatID = ddlCategory.SelectedValue; Response.Redirect(“Product.aspx?prod=”

+ProductID

+“&cat=”

+CatID);

}

1

2

Chapter 5: Building a Product Catalog Application 133

protected void GridView1_ SelectedIndexChanged

3

(object sender, EventArgs e)

{

string ProductID = GridView1.SelectedValue.ToString().Trim();

string CatID = ddlCategory.SelectedValue;

Response.Redirect(“Product.aspx?prod=”

+ProductID

+“&cat=”

+CatID);

}

}

Here’s a closer look at each of the methods in this code-behind file:

1 Page_Load: This method is called each time the page is loaded. Its purpose is to set the drop-down list’s selection to the category indicated by the cat query string field. Note that the query string field is used only when IsPostBack is false. That’s because the query string field should be used only when the Default.aspx page is posted from another page, such as the Product.aspx page. If the query string field were used when the Default.aspx page posts back from itself, then any selection made by the user would be replaced by the query string field’s value — which isn’t what you want. Note also that the code checks to make sure that the cat field exists before using its value.

2 DataList1_SelectedIndexChanged: This method is called whenever the user selects an item in the DataList control, which lists the currently featured products. It uses the SelectedValue property of the DataList control to extract the ID of the selected product and the SelectedValue property of the drop-down list to extract the ID of the selected category. Then

it calls the Response.Redirect method to redirect to the Product.aspx page, with the prod and cat query strings set to the appropriate values.

3 GridView1_SelectedIndexChanged: This method is called when-

ever the user selects an item in the GridView control, which lists the products for the currently selected category. It works pretty much the same as the DataList1_SelectedIndexChanged method, but the product ID is extracted from the GridView control instead of the DataList control.

134 Part III: Building E-Commerce Applications

The code-behind file for the Default.aspx page (Visual Basic version)

The Visual Basic version of this code-behind file is shown in Listing 5-5. If you’re working in C#, you can skip this section and use the C# version (presented in the previous section) instead.

To use the Visual Basic version, you must change the Language specification in the Page directive of the Default.aspx file from C# to VB — and change the name of the code-behind file from Default.aspx.cs to

Default.aspx.vb.

Listing 5-5: The code-behind file for the Default.aspx page (VB)

Partial Class _Default

Inherits System.Web.UI.Page
Protected Sub Page_Load( _	1
ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles Me.Load
If Not IsPostBack Then
Dim CatID As String
CatID = Request.QueryString(“cat”)
If Not CatID = Nothing Then
ddlCategory.SelectedValue = CatID
End If
End If
End Sub
Protected Sub DataList1_SelectedIndexChanged( _	2
ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles DataList1.SelectedIndexChanged
Dim ProductID As String

Dim CatID As String ProductID =

DataList1.SelectedValue.ToString().Trim() CatID = ddlCategory.SelectedValue Response.Redirect(“Product.aspx?prod=” _

+ ProductID + “&cat=” + CatID)

End Sub

Chapter 5: Building a Product Catalog Application 135

Protected Sub GridView1_SelectedIndexChanged( _

3

ByVal sender As Object, _

ByVal e As System.EventArgs) _

Handles GridView1.SelectedIndexChanged

Dim ProductID As String

Dim CatID As String

ProductID =

GridView1.SelectedValue.ToString().Trim() CatID = ddlCategory.SelectedValue Response.Redirect(“Product.aspx?prod=” _

+ ProductID + “&cat=” + CatID)

End Sub End Class

The following paragraphs describe each of the methods in this code-behind file:

1 Page_Load: This method is called each time the page is loaded. Its purpose is to set the drop-down list’s selection to the category indicated by the cat query string field. Note that the query string field is used only when IsPostBack is false. That’s because the query string field should be used only when the Default.aspx page is posted from another page, such as the Product.aspx page. If the query-string field were used when the Default.aspx page posts back from itself, then any selection made by the user would be replaced by the query-string field’s value — which isn’t what you want. Also, the code checks to make sure the cat field exists before using it.

2 DataList1_SelectedIndexChanged: This method is called whenever the user selects an item in the DataList control, which lists the currently featured products. It uses the SelectedValue property of the DataList control to extract the ID of the selected product and the SelectedValue property of the drop-down list to extract the ID of the selected category. Then it calls the Response. Redirect method to redirect to the Product.aspx page, with the prod and cat query strings set to the appropriate values.

3 GridView1_SelectedIndexChanged: This method is called whenever the user selects an item in the GridView control, which lists

the products for the currently selected category. It works pretty much the same as the DataList1_SelectedIndexChanged method, but the product ID is extracted from the GridView control instead of the DataList control.

136 Part III: Building E-Commerce Applications

Building the Product Detail page

The Product Detail page (Product.aspx) displays the data for a specific product selected by the user. This page is displayed when the user selects a product from either the DataList or the GridView control in the Default.aspx page. It uses a DetailsView control (one of the new data controls provided by ASP.NET 2.0) to display the product details.

The Product.aspx file

The Product Details page is defined by the Product.aspx file, which is shown in Listing 5-6.

Listing 5-6: The Product Details Page (Product.aspx)

<%@ Page Language=”C#”	1
MasterPageFile=”~/MasterPage.master”
AutoEventWireup=”true”
CodeFile=”Product.aspx.cs”
Inherits=”Product”
Title=”Acme Pirate Supply” %>
<asp:Content ID=”Content1” Runat=”Server”
ContentPlaceHolderID=”ContentPlaceHolder1” >
<asp:DetailsView ID=”DetailsView1”	2
runat=”server”
AutoGenerateRows=”False”
BorderStyle=”None”
BorderWidth=”0px”
DataKeyNames=”productid”
DataSourceID=”SqlDataSource1”
Height=”50px”
Width=”125px”>
<Fields>
<asp:BoundField DataField=”name”	3
ShowHeader=”False” >
<ItemStyle Font-Size=”Large” />
</asp:BoundField>
<asp:ImageField	4
DataImageUrlField=”image”
DataImageUrlFormatString=”~\Images\{0}”
ShowHeader=”False”>
</asp:ImageField>
<asp:BoundField DataField=”shorttext”	5
ShowHeader=”False” >
<ItemStyle Font-Size=”Medium” />
</asp:BoundField>
<asp:BoundField DataField=”longtext”	6
DataFormatString=”<br />{0}”