Macromedia Dreamweaver 8 UNLEASHED [Electronic resources]

Zak Ruvalcaba

نسخه متنی -صفحه : 236/ 179
نمايش فراداده

Building the Employee Store Using ASP.NET

If you're reading this section, it's safe to say that you're either curious about learning how to develop .NET applications in Dreamweaver or you're simply broadening your knowledge of the extensive functionality available in Dreamweaver.

When I first starting using UltraDev years back, I was amazed at the simplicity between the program and the various server models that existed at the time. When I first started beta testing Visual Studio.NET and ASP.NET in 2000, I wondered whether Macromedia would ever include the power of DataSets, DataGrids, and DataLists into its newest version of Dreamweaverand if they did, how they would go about doing it. As it turns out, Macromedia answered my questions by incorporating the easy-to-use functionality of the ASP, ColdFusion, and PHP server models with the power of the ASP.NET server model.

If you've read the previous sections, most of this will be a review. What this section covers differently however, is an overview of the power exposed via DataSets, DataLists, DataGrids, and the ASP.NET application development capabilities using Dreamweaver. Specifically, this section covers the following topics:

  • DataSets

  • Paging

  • Dynamic text (object binding)

  • Region repeaters

  • Showing specific regions (conditionals)

  • DataGrids

  • DataLists

Creating a New DataSet

If you are familiar with traditional data storage and retrieval models in ASP, you are familiar with the recordset. The recordset acts as a virtual table to store information retrieved from the database. In Dreamweaver, DataSets are similar to recordsets.

NOTE

Dreamweaver uses DataSets as the storage mechanism for your data when working with ASP.NET. It's important to note that, unlike a recordset in ASP which only represents one table (even if you've created joins, one virtual table is still represented in the recordset) from your data source, a DataSet can contain multiple tables, known as DataTables. DataReaderswhich are not covered within the context of this bookare similar in nature to traditional recordsets in that they support only one table from your data source.

To better understand DataSets is to better understand ADO.NET. ADO.NET is a set of namespaces and classes that provide access to data stores. Three layers make up ADO.NET:

  • The Data Store : The data store represents the physical location of your data. This can be a relational database (Access/MSDE/SQL Server 2000) or an XML file.

  • The Data Provider : The data provider connects the data store and the DataSet, filling the DataSet with data from the data store and synchronizing changes made to the DataSet with the data store.

  • The DataSet : The DataSet is the container for your data and the relationships that make up your data.

Now that you know the basic makeup of ADO.NET, you can begin to plug in all the different aspects that make up your application. Your data store consists of an OLE DB database in Access. Earlier in this chapter, you learned how to create a connection using the ASP.NET server model. Now let's jump into creating the commands and working with DataSets. To begin creating a DataSet, follow these steps:

1.

Begin by opening the employeestore.aspx file located in your Site Files list.

2.

To create a DataSet, select the DataSet (Query) option from the Add (+) menu in the Bindings panel. The DataSet dialog appears.

3.

In the DataSet dialog, enter the name

dsEmployeeStore in the Name text box.

4.

Select the connDorknozzle option from the Connection drop-down menu.

5.

Choose the EmployeeStore table from the Table drop-down menu.

6.

Make sure that the All radio button is selected in the Columns radio button group. When you finish making your changes, the dialog should resemble Figure 25.40.

Figure 25.40. Configure options for your DataSet in the DataSet dialog.

[View full size image]

7.

Test the DataSet by clicking the Test button. Figure 25.41 displays the results that you should also be seeing.

Figure 25.41. Testing the DataSet returns the complete list of items.

[View full size image]

8.

Click OK to close the Test SQL Statement dialog.

9.

Click OK to close the DataSet dialog. The new DataSet is created.

You can view all the fields in the DataSet by expanding the dsEmployeeStore DataSet from the Bindings panel. Figure 25.42 shows the results of expanding the DataSet nodes.

Figure 25.42. Expanding the DataSet enables you to see all the fields it contains.

Creating a Recordset from a View," earlier in this chapter.

Working with Dynamic Elements

Now that you have a DataSet clearly defined, your next step is to get the information out of the DataSet and into your application. Dreamweaver's Server Behavior and Binding panels provide the functionality you need to get started producing dynamic elements that are centralized within the database but exposed by the application. Let's get started!

Dynamic Text

The first step to creating dynamic applications is to make all your text as dynamic as possible. That is, to allow all your company's valuable information to reside in the database and then pull it out onto dynamic pages as needed. To start creating dynamic text, begin by creating a table that organizes the data output. You can accomplish this by following these steps:

1.

Replace the text

INSERT TEXT HERE in the employeestore.aspx page with a new table by selecting Insert, Table. This table should have one row, two columns, a width of 460, and 0 for border thickness, cell padding, and cell spacing. Click OK after you have entered these values.

2.

Insert a nested table in the cell on the right. Give this nested table 3 rows, 1 column, a width of 300, and 0 for border thickness, cell padding, and cell spacing.

3.

Add the text

Name, Description , and

Cost in the three rows for the table you just created. You might decide to make the text bold so that it stands out to the user. The result appears similar to Figure 25.43.

Figure 25.43. Place static text in the three fields to caption the dynamic text.

[View full size image]

4.

Expand the dsEmployeeStore DataSet in the Bindings panel to reveal all the fields in the DataSet.

5.

Manually click, hold, and drag the ItemName field from the dsEmployeeStore DataSet in the Bindings panel into the cell for the table you just created, making sure that you drop the field just next to the

Name caption.

6.

Repeat step 5 to drag the ItemDescription and Cost fields into their proper cells next to the

Description and

Cost captions. The result resembles Figure 25.44.

Figure 25.44. Drag the remaining fields into their respective locations.

[View full size image]

Save the page and display it in the browser by pressing F12. You're probably noticing that the browser is giving you an error. The problem here is two fold: First, Dreamweaver stores connection information in a file known as Web.Config (you've probably noticed this file in the root of your directory). Under the ASP.NET server model, Web.Config files are used for global application settings (such as storing connection strings). In this case, because we have a Web.Config file in the root directory, the browser throws an error expecting the directory to be defined as an application within IIS, which at this point it's not. Second, Dreamweaver uses a precompiled assembly called DreamweaverCtrls.dll for implementing features such as DataSets.

For our page to run under ASP.NET, the DreamweaverCtrls.dll file must be deployed into a Bin folder in the root of our application. At this point, the DreamweaverCtrls.dll file hasn't been deployed so let's do it now:

1.

Switch to the Components tab (the fourth tab in the Application panel group).

2.

Click the small Deploy icon (represented by the Up arrow). Dreamweaver presents the Deploy Supporting Files to Testing Server dialog.

3.

Type the path to the Bin folder as follows:

C:\Inetpub\wwwroot\DorknozzleASPX\Bin . Alternatively, click the folder icon to browser for the specific folder. If the Bin folder doesn't exist in the DorknozzleASPX folder, you must create it now.

4.

Click the Deploy button.

5.

An alert message indicating that the file has been deployed is shown. Click OK.

Next, we'll need to convert the project into an application within IIS. To do this, follow these steps:

1.

Open IIS by choosing Start, Settings, Control Panel, Administrative Tools, Internet Information Services.

2.

Expand all the tree nodes until all your sites are listed under the Default Web Site node.

3.

Right-click the DorknozzleASPX folder and select the Properties option from the context menu. The DorknozzleASPX Properties dialog appears.

4.

Click the Create button in the Directory tab. That's it! You've just turned your project into an application in IIS, and you've successfully deployed the necessary files to work with ASP.NET. Fortunately, this is the last time you'll have to run through this process.

5.

Click OK to close the dialog.

6.

Close IIS and return to Dreamweaver.

Now try running the page again by pressing the F12 key. As you can see from Figure 25.45, the first item in our EmployeeStore table is shown on the page.

Figure 25.45. The first item "Dorknozzle Shirt" is dynamically shown on the page.

[View full size image]

Congratulations! You've just taken your first step to working with dynamic web pages in ASP.NET! As the ASP.NET sections unfold, you'll learn to add dynamic images, repeating regions, pagination functionality, and more. This is just the tip of the iceberg.

Dynamic Images

Now that you've created dynamic text within your ASP.NET application, you're ready to begin adding dynamic images. The images we will add here are not the typical static images we have used throughout the book; instead, they will be dynamic images. Recall that we added the path to the image associated with each item to the EmployeeStore table. What we want to do now is dynamically show the image, based on the path outlined within the ImageURL field, on our dynamic employeestore.aspx web page. To do this, follow these steps:

1.

Place your cursor in the cell designated for the image (the left most cell) and vertically align the cursor to the top of the cell by choosing the Top option from the Vert menu in the Properties Inspector.

2.

Select the Image option from the Insert menu. The Select Image Source dialog will appear.

3.

Near the top of the Select Image Source dialog box, you have options for selecting the image from the File system (static) or you can choose the Data sources option (dynamic). Select the Data sources option. The Select Image Source dialog box's interface will immediately change to allow you to select an image path from the DataSet. Select the ImageURL field shown in Figure 25.46.

Figure 25.46. Insert an image dynamically by adding it from a data source rather than from the file system.

[View full size image]

4.

Select OK. The dynamic image placeholder will appear within the cell.

Save your work and test the results in the browser by choosing the F12 key. The image for the Dorknozzle T-Shirt should now appear as shown in Figure 25.47.

Figure 25.47. The image is dynamically placed based on the path within the database.

[View full size image]

DataSet Paging

Now that you've seen just how easy it is to place dynamic content on the page, you'll probably want to begin adding features such as paging that allow users to interact with the content. Paging exposes all records (or certain sets of records) within a pagination system, not unlike those of a book. For every press of a button, your user can advance to the next set of records or, conversely, return to a previous set of records. Dreamweaver's pagination behaviors include the following:

  • Move to First Page : Returns the user to the first page in the DataSet.

  • Move to Previous Page : Returns the user back one page.

  • Move to Next Page : Advances the user one page forward.

  • Move to Last Page : Advances the user to the last page in the DataSet.

To begin adding pagination features to your site, follow these steps:

1.

Place your cursor just below the table that includes the dynamic data.

2.

From the DataSet Paging submenu, available by clicking the Add (+) button in the Server Behaviors panel, select Move to Previous Page.

3.

The Move To Previous Page dialog appears, similar to Figure 25.48. Select the Create New Link: "Previous" option from the Link menu and make sure that the dsEmployeeStore DataSet is selected from the DataSet menu. Click OK. A new dynamic

Previous hyperlink is created.

Figure 25.48. Confirm the settings from the Move To Previous Record dialog.

4.

Add a space after the

Previous hyperlink and repeat steps 2 and 3, this time selecting the Move to Next Page option from the DataSet Paging submenu. When you're finished adding the complete pagination functionality, two hyperlinks, one identified as

Previous and one as

Next should appear underneath the table similar to Figure 25.49.

Figure 25.49. Dynamic Previous and Next hyperlinks will appear under the table that contains the dynamic image and text.

[View full size image]

Save your work. If you've tested the results in the browser you might be wondering why the paging widgets aren't working. Like the ColdFusion model, the ASP.NET server model expects the Repeat Region server behavior to be added before the Paging behavior will work. Let's do that next.

Using Repeat Region

Although DataSet paging is the ideal model to strive for, at times you might want to display all the records (or groups of records) in the database at once. The Repeat Region behavior enables you to create a pattern of repeatable instances within your application. For instance, in the EmployeeStore example, a table was created to display the content for the image, name, description, and cost. Using the Repeat Region server behavior, you are able to maintain that structure while repeating the contents for every record contained within the dsEmployeeStore DataSet throughout the page. To create a repeatable region, follow these steps:

1.

Select the table for which you want the content to repeat for. Your selection should resemble Figure 25.50.

Figure 25.50. Select the table that you want to create the repeatable region for.

[View full size image]

2.

Select the Repeat Region option by clicking the Add (+) button within the Server Behaviors panel. The Repeat Region dialog box will appear similar to Figure 25.51.

Figure 25.51. Display five records at a time from the dsEmployeeStore DataSet in the Repeat Region dialog.

3.

The Repeat Region dialog box enables you to enter choices regarding which DataSet to create the repeat region for as well as how many results to display. Make sure the dsEmployeeStore option is selected from within the DataSet menu. Additionally, make sure 5 Records at a Time is selected. Click OK to apply the server behavior to the selected table.

Save your work and test the results within the browser by selecting the F12 key. Notice how you can scroll down the page to view five Dorknozzle products at a time. More importantly, try clicking the Next hyperlink. As you can see, the paging server behaviors now work.

Display Record Count

As you allow users to cycle through your records, you might find that eventually you'll want to display some sort of message letting the user know what record they are currently viewing. This can be accomplished by simply displaying a numerical value for the record they've cycled to somewhere on the page. Dreamweaver includes a set of behaviors that enable you to do just that; they are known as the Display Record Count server behaviors, and there are four of them:

  • Display Starting Record Number : Displays the first record number of the DataSet.

  • Display Ending Record Number : Displays the last record number of the DataSet.

  • Display Total Records : Displays all the records of the DataSet.

  • Display Current Page Number : Displays the current page number in the DataSet. This number changes as the user pages through the records.

Like all the other behaviors you have been working with, the Display Record Count behaviors can be inserted into your application very easily. To insert the Display Current Page Number behavior into the employeestore.aspx page, follow these steps:

1.

Place your cursor somewhere on the page where the user is most likely to look for a record count. A good place is somewhere near the paging navigation bar at the bottom of the page.

2.

Type the text

Page Number: .

3.

Select the Display Current Page Number behavior from the Display Record Count submenu in the Add (+) menu in the Server Behaviors panel. The Display Current Page Number dialog appears.

4.

Select the dsEmployeeStore option from the DataSet menu and click OK. A Dynamic Current Page element appears next to the paging navigation menu.

Save your work and test the results in the browser by pressing the F12 key. Click the Next and Previous links to page through the records, watching the counter update dynamically (see Figure 25.52).

Figure 25.52. The current page number appears near the bottom of the page.

[View full size image]

Showing Specific Regions

Now that you've added the capability to cycle to the end of the DataSet and back, consider the following problem: Users click Next until they get to the last record and then they're abruptly stopped. They keep clicking the Next button but nothing happens. The problem is that the user has reached the end of the DataSet and they can't go any further because there's no data left in the DataSet. Unfortunately, the user doesn't know that. Instead, it might serve you and your users better if you alerted them of the fact that they've reached the end of the DataSet. To accomplish this, Dreamweaver provides functionality in the form of a group of Show Region behaviors that alerts users that they have reached the end of the DataSet. The complete list of Show Region behaviors are as follows:

  • Show if DataSet Is Empty : This behavior can be useful to alert a user that an empty result was returned from the database.

  • Show if DataSet Is Not Empty : Use this behavior when you want to alert the user that results were indeed returned from the database.

  • Show if First Page : If the user is on the first page, you can show a message.

  • Show if Not First Page : If the user is on anything but the first page, you can show a message.

  • Show if Last Page : If the user is on the last page, you can provide a message.

  • Show if Not Last Page : As the user cycles through the pages, you can provide a message. When the user is on the last page, a message can be displayed.

To add a Show Region behavior to your application, follow these steps:

1.

Place the text "No more items to view" just below the paging server behaviors.

2.

With the text highlighted, select the Show If Last Page server behavior from the Show Region submenu by clicking the Add (+) button in the Server Behaviors panel. The Show If Last Page dialog box will appear, similar to Figure 25.53.

Figure 25.53. Add the Show Region behavior to the text message you want displayed.

3.

Now choose the dsEmployeeStore option from the DataSet menu and click OK. A grey visual aid will enclose your custom text.

Save the page and test the results in the browser. You'll notice that the message will only appear when you reach the last page of records in the DataSet.

Working with DataGrids

One of the most important and feature-rich controls included with Dreamweaver's ASP.NET integration is the DataGrid control. The DataGrid control, similar to the Repeat Region behavior and the DataSet Paging behaviors, enables you to display numerous records on the page while allowing pagination functionality. For instance, you could display every five records within the DataSet while allowing paging to the next set of five records. In a footer on the page, you could display a list of numbers that correspond with every group of five records to display. As the user selects a new number, a new group of records is displayed. The DataGrid's flexibility does not end there; DataGrids also allow for column sorting, editing, and even custom commands. Some of the column types available with the DataGrid control are listed here:

  • Simple Data Field : The Simple Data Field is also known as the

    Bound Column in ASP.NET. This column enables you to specify which data source field will be displayed and the data format that the field will use.

  • Free Form : The Free Form column is also known as the

    Template Column in ASP.NET. The Free Form column lets you inser230 text and server controls to create true custom designs.

  • Hyperlink : The Hyperlink column lets you insert text that will be hyperlinked. The typical use for this column is to show users basic information and then allow them to link within a column to view more detailed information on a separate page.

  • Edit, Update, Cancel Buttons : In ASP.NET, this column is called the

    Edit Command column . The Edit, Update, and Cancel buttons enable you to perform in-place edits of your text without redirecting a user to another page. When this page is rendered, the Edit button is visible. When the user clicks the Edit button, it is replaced by an editable control along with Update and Cancel buttons to update the text to the database.

  • Delete Button : The Delete button enables users to delete the row they select.

Now that you know what a DataGrid is, let's create a simple DataGrid for the EmployeeStore Web page. To add the DataGrid, follow these steps:

1.

Open the employeestore_datagrid.aspx page.

2.

Replace the text

INSERT GRID HERE with a new DataGrid by choosing the DataGrid behavior from the Add (+) menu in the Server Behaviors panel. The DataGrid dialog appears.

3.

Give your DataGrid the name

dgProducts by typing that value in the ID text box.

4.

Choose the dsEmployeeStore option from the DataSet drop-down menu.

5.

Rather than showing all records at once, enter the value

5 in the Number of Records text box in the Show radio group.

6.

Choose the Numbered Links to Every Page option from the Navigation drop-down menu. This option automatically adds the pagination functionality.

7.

Let's be selective in the data that we show in the DataGrid. Select the ItemID, ItemDescription, and ImageURL fields from the Columns list box and click the Remove () button. When you finish configuring the DataGrid, the results appear similar to Figure 25.54.

Figure 25.54. Enter all the information for the DataGrid.

[View full size image]

8.

Click OK to close the DataGrid dialog. The DataGrid is inserted into your page.

Now save your work and test the result in the browser by pressing the F12 key. Figure 25.55 shows the results of what the DataGrid will look like after it is complete. Notice that paging functionality is automatically added for you in the footer of the DataGrid.

Figure 25.55. The browser shows the result of the DataGrid.

[View full size image]

Also notice that the column headers, alternating rows, and backgrounds have prespecified colors. Although the color scheme Macromedia chooses to use as a default is fairly tasteful, it does not match the color scheme of the Dorknozzle site. To change the color scheme of the DataGrid, follow these steps:

1.

Select the DataGrid and immediately switch to the split Code/Design view. Notice that the DataGrid is highlighted by default in the Code view.

2.

Navigate down the page until you find the tags for HeaderStyle, ItemStyle, AlternatingItemStyle, FooterStyle, and PagerStyle.

3.

The colors you are interested in modifying are the BackColor and ForeColor attributes of the HeaderStyle tag and the BackColor attribute of the AlternatingItemStyle tag. Locate those attributes and change the colors for the HeaderStyle to #FFFFFF for ForeColor and #003366 for BackColor. For the AlternatingItemStyle tag, change the BackColor to #99CC00. If you are having trouble locating the attributes, reference Figure 25.56.

Figure 25.56. Change the color scheme for the HeaderStyle and AlternatingItemStyle tags.

[View full size image]

Save your work and test the results in the browser by pressing the F12 key. Notice that the new color scheme of the DataGrid matches the color scheme of the Dorknozzle site.

Using Hyperlinked Columns to Create Master/Detail Pages

As mentioned earlier, column types can be changed to different types, depending on what you are trying to accomplish. One of the several column types is that of a hyperlink. A hyperlinked column type allows the items that reside in a column within a DataGrid to be hyperlinked to a different page. A good use for this feature is for creating master/detail pages. Master/detail pages enable you to show brief information for a specific item; when users want to see more detailed information, they select the link for a particular product and are linked to a page that contains more descriptive information for that product. To create a master/detail relationship using a hyperlinked column, follow these steps:

1.

Double-click the DataGrid server behavior in the Server Behaviors panel to open the DataGrid dialog.

2.

Select the ItemName column from the Columns list and choose the Hyperlink option from the Change Column Type button's menu. The Hyperlink Column dialog appears.

3.

The Hyperlink Column dialog enables you to specify the text you want hyperlinked in the column you choose, the page you want that link to navigate to when you click it, and which field of data is going to be passed to the next page. Enter the name

Product in the Title text box.

4.

Select the ItemName option from the Data field drop-down menu. This is the value that will appear hyperlinked in the DataGrid.

5.

Select the ItemID option from the Data field drop-down menu and type the

employeestore_datagrid_details.aspx?ItemID={0} URL in the Format String text box in the Linked Page radio button group. The results of the formatted dialog should appear similar to Figure 25.57.

Figure 25.57. Change the options in the Hyperlink Column dialog.

[View full size image]

TIP

As you can see, the formatted string looks like the following:

employeestore_datagrid_details.aspx?ItemID={0}

This string essentially uses employeestore_datagrid_details.aspx as the page to link to. Also notice the addition of the ItemID parameter along with an array value (the index of the element within the data source) contained within a pair of braces. Because ItemID is the first field in the data source, it is said to be at index 0. The ItemID parameter is passed from the employeestore_datagrid.aspx to employeestore_datagrid_details.aspx, where the appropriate item (determined by the ItemID as part of the query string) is identified and the appropriate information is displayed on the page.

6.

Click OK to close the Hyperlink Column dialog.

7.

Click OK to close the DataGrid dialog.

Save your work and test the results in the browser by pressing the F12 key. The result should look similar to Figure 25.58.

Figure 25.58. All the item names are now linked and ready to navigate to their appropriate page.

[View full size image]

Notice that the names in the ItemName column are now clickable. Roll your cursor over the product name. As you do, look in the status bar to see that the link and correct product ID are displayed. Next, let's create the employeestore_datagrid_details.aspx page:

1.

Initially, you can use the original employeestore.aspx page. You'll want to remove all the dynamic elements on the page (except the DataSet and the three dynamic text elements) so that it resembles Figure 25.59.

Figure 25.59. Open the original employeestore.aspx page and resave it as employeestore_datagrid_details.aspx.

[View full size image]

2.

Save the modified page as employeestore_datagrid_details.aspx.

3.

Type the new caption

Quantity under the

Cost caption and drag the Quantity field from the DataSet located in the Bindings panel into the cell, next to the new

Quantity caption.

4.

Double-click the DataSet so that it launches the DataSet dialog in Simple mode.

5.

What we have to do now is capture the ItemID being passed in the query string onto this page. We can do that by selecting ItemID from the Filter drop-down menu, choosing the = symbol, choosing URL Parameter, and then typing in the value

ItemID . The result will appear similar to Figure 25.60.

Figure 25.60. Configure the DataSet dialog so that it filters by the ItemID URL parameter.

[View full size image]

6.

Click the Test button. The Test Value dialog appears. Type an existing ItemID (such as

1 ) into the Test Value text box.

7.

Clicking OK reveals only one record (there is only one item with the ItemID 1).

8.

Click OK to close the Test SQL Statement dialog.

9.

Click OK to close the DataSet dialog.

Save your work and test the result in the browser by first opening the employeestore_datagrid.aspx page and then pressing the F12 key. Select one of the Product ItemName links. Immediately, you will be linked to the employeestore_datagrid_details.aspx page, complete with the specific item you selected represented as a numeric ItemID value in the query string. As a result, the page filters by that ItemID and displays the appropriate detailed view similar to Figure 25.61.

Figure 25.61. The detailed product information appears in viewcatalog_itemdetails.aspx.

[View full size image]

Working with DataLists

The DataList behavior functions much like the DataGrid behavior in that it allows for multiple items to be shown at once. The major difference between the DataGrid and DataList controls is that the DataGrid control is row based and functions much like a table, whereas the DataList control is cell based and can be customized to look like a table or a simple repeated list of items. Because there is more flexibility in DataLists, there is also more complexity. The DataGrid was easy to modify in Dreamweaver; the DataList, on the other hand, requires customization using templates. The available templates are as follows:

  • Header : This template contains the text and controls to be rendered at the beginning of the list.

  • Item : This template contains the text and controls to be rendered once for each cell.

  • Alternating Item : Similar to the AlternatingItemStyle tag for the DataGrid behavior, the Alternating Item template changes the background color of every other cell within the DataList.

  • Edit Item : The Edit Item template controls the look of the DataList cell when it is in edit mode. Typically, edit mode consists of controls such as the Text Box control.

  • Select Item : The Select Item template controls the look of the DataList cell when the user selects an item in the DataList.

  • Separator : This template contains the elements to render between each item (the separators).

  • Footer : This template contains the text and controls to be rendered at the end of the list.

To add a DataList to your page, follow these steps:

1.

Open the employeestore_datalist.aspx page by double-clicking it in the Files list.

2.

Place your cursor in the third cell just below the Employee Store subheader image and select DataList from the Server Behaviors Add (+) menu. The DataList dialog appears similar to Figure 25.62. This dialog allows you to customize various options including ID, DataSet, how many records to show at once, various templates to customize, item organization, and more.

Figure 25.62. Set DataList options according to your viewing preferences.

[View full size image]

3.

Type the text

dlProducts in the ID text box.

4.

Choose the dsEmployeeStore option from the DataSet drop-down menu.

5.

Enable the All Records radio button.

6.

Select the Item option from the Templates menu and click the Add data field to contents button. The Add Data Field dialog appears.

7.

Choose the ItemName option from the Data Field menu and click OK. Figure 25.63 shows the code that is inserted into the template.

Figure 25.63. Code is inserted automatically for the Header template.

<br /> tags inserted to create a line break between the captions. Figure 25.64 shows the result.

Figure 25.64. Add the product name, description, and cost to the Item template.

[View full size image]

9.

Choose the Separator template and type the

<hr> (horizontal rule) tag in the Contents text box.

10.

After you have finished modifying the templates, click OK to close the DataList dialog.

Save your work and test the results in the browser by pressing the F12 key. The results are shown in Figure 25.65.

Figure 25.65. The DataList results in a customized list of records.

[View full size image]