Visual Web Developer™ 2005 Express Edition For Dummies - Alan Simpson

290 Part III: Personalization and Databases

You can also size the control by clicking it and dragging any sizing handle that appears in its border. (The widths of the columns in Design view don’t accurately match how things will look in the browser, but don’t let that bug you.) In Figure 12-31, for example, I’ve made the DetailsView control much wider than it was originally.

Figure 12-31:

The

Details

View control, widened.

Of course, you never really know how a control will look in real life until you view its page in a browser. Figure 12-32, for example, shows how the control from the previous example looks in Internet Explorer. The little numbers at the bottom represent other records in the same table. (They appear because I chose Enable Paging in the control’s Common Tasks menu.)

Figure 12-32:

Details

View control in Internet Explorer.

At the bottom of the control are the Edit, Delete, and New options. Clicking any one of those lets you (respectively) edit, delete, or change the record currently displayed in the control.

Chapter 12: Using Data in Web Pages 291

Creating Master-Details Forms

You can combine DropDownList, GridView, and DetailsView controls on a single page to create a Master-Details form. The DropDownList and GridView controls are used to zero in on a specific record. The DetailsView control then allows you to edit one record. Such a scenario is useful when the database contains a lot of records and finding specific records isn’t always easy.

Figure 12-33 shows an example where choosing a user’s name from the DropDownList control displays detailed information about all transactions made by that user in the GridView control to the right. Clicking Select at the left side of the GridView then displays the actual record from the Transactions table that represents that transaction. The DetailsView control contains Edit and Delete options, allowing you to change or delete that one record in the

Transactions table.

Figure 12-33:

Sample

MasterDetails page for editing transactions.

Before we get into specifics, let me point out that I started by adding a table with two columns and three rows to a blank page. The text you see on the page, like 1. Choose a user is just text typed right into the table cell. The text and DropDownList control are in the top-left cell. The text and GridView control are in the cell to the right of that one.

The second row in the table I left empty to put a little empty space above the third row. The left column of the third row contains the text 3. Edit or Delete transaction, and the last table cell contains the DetailsView control.

292 Part III: Personalization and Databases

That’s just how I organized the text and controls on the page. What makes all the controls work together is the way in which the GridView control is filtered to show only transactions for the user name selected in the dropdown list, and the way the DetailsView control is filtered to show only the record associated with the selected row in the GridView control.

Master-Details DropDownList control

Let’s start with the DropDownList control, which is named DropDownList1. To show user names, that control is bound to the UsersAndItemsView view from Chapter 11. From that view, only UserId and UserName are selected. Its Return Only Unique Rows option is selected to show only unique user names. I set its ORDER BY option to sort the records by UserName, so the names will be in alphabetical order by name. Figure 12-34 shows the Configure the Select Statement page for that DropDownList control.

Figure 12-34:

The

Configure

the Select

Statement

page for

Master-

Details

DropDown

List1.

On the Choose a Data Source page of the Data Source Configuration wizard, I set UserName as the value to display in the control, and set UserId as the value of the control, as shown in Figure 12-35. That means that the control will show user names. But, once the user makes a selection, the value of the control will actually be that user’s UserId — the GUID that’s automatically assigned to each new user account. We need the drop-down list’s value to be that UserId, because that’s the value that provides the link to transactions.

The Enable Postback option for the DropDownList control’s Common Tasks menu must be selected for the page to work. Because that postback (combined with some filtering you’ll see in a moment) is what allows the GridView control to show only transaction information for the user whose name is selected in the control.

Chapter 12: Using Data in Web Pages 293

Figure 12-35:

Data source for the

DropDown

List control in MasterDetails.

To customize the appearance of the DropDownList control, first click the control to select it. Then use its Properties sheet to refine the control’s font and width.

Master-Details GridView control

The GridView control, named GridView1 in the Master-Details example, is bound to the DetailedUsersItemsView view created back in Chapter 11. It uses a few fields from that view to make it easy for the user to locate a specific transaction, as shown in Figure 12-36.

Figure 12-36:

Selected view and columns used for the MasterDetails

GridView

1 control.

The critical factor in getting the GridView control to show only records for the user whose name appears in the DropDownList control is in the WHERE clause. After clicking the WHERE button in Figure 12-36, I set up the condition as shown in Figure 12-37. Recall that the value of the DropDownList1 control will be one person’s UserId. Therefore, the condition specified in Figure 12-37 is for the GridView to show only records where the UserId field in the view matches the UserId that’s in the DropDownList1 control.

294 Part III: Personalization and Databases

Figure 12-37:

The WHERE

condition

for Master-

Details

GridView

control.

After finishing the Data Configuration Wizard for the GridView control, you need to choose Enable Select from its Common Tasks menu. Doing so places the Select option to the left of each record. As you’ll see in a moment, the DetailsView control can then be configured to show only the record that’s represented by the selected row in the GridView control.

The Master-Details DetailsView control

The DetailsView control in the Master-Details example needs to be filtered so that it displays only the transaction associated with whatever row is selected in the GridView. Also, that control needs to be bound to a single table that has a primary key. Otherwise, you couldn’t use the control to edit or delete records.

In this example, the Configure the Select Statement page for the DetailsView control looks like Figure 12-38. Note that it’s bound to the Transactions table, and shows all fields from that table (the * is short for “all columns”).

Figure 12-38:

Table and columns bound to the

Details

View control.

To ensure that the DetailsView control shows only data associated with the record that’s selected in the GridView control, click the WHERE button and choose options as shown in Figure 12-39. Those options, in English, say “where the TransactionId in the Transactions table matches the TransactionId in whatever row is currently selected in the GridView.”

Chapter 12: Using Data in Web Pages 295

Figure 12-39:

The WHERE

condition

for the

Details

View1

control.

On the Common Tasks menu for the DetailsView control, choose Enable Edit and Enable Delete to display the Edit and Delete options that allow the user to edit the transaction.

When you first open a page like the Master-Details example, the DetailsView control will not be visible in the Web browser. That’s because it’s filtered to show only the transaction associated with the row that’s selected in the GridView. So when there’s nothing selected in the GridView, there’s nothing for the DetailsView control to show. But as soon as you click Select at the left side of the GridView, your DetailsView control will appear showing the selected transaction record.

As an alternative to showing nothing when the DetailsView control has no record, you can edit its EmptyData Template to show a message. Here’s how:

1.In Design view, open the DetailsView control’s Common Tasks menu using the little triangle button or by right-clicking the control and choosing Show Smart Tag.

2.On the menu, click Edit Templates.

3.In the drop-down list that appears, choose EmptyData Template. A small box appears in which you can type and format text. For example, you might type Select a transaction to see details.

4.Right-click the template you just filled and choose End Template Editing.

From now on, when you first open the page in a Web browser, you’ll see whatever text you typed into the EmptyData Template rather than nothing. As soon as you select a transaction from the GridView control, that text will be replaced by the actual DetailsView control showing the selected transaction.

General GridView and DetailsView considerations

The GridView and DetailsView controls are both new in ASP.NET 2.0, and offer easier, better editing capabilities than the older DetailsView and

296 Part III: Personalization and Databases

FormView controls described later in this chapter. Both GridView and Details View have an Auto Format option on their Common Tasks menu, making it easy to define a general look and feel for the control right off the bat.

Both GridView and DetailsView also have an enormous number of properties you can tweak to get exactly the look and feel you want. There are so many properties that it would take more pages than there are in this book to describe them all. But rather than worry about every single property, a good general strategy might be to use Auto Format to get a general look for the control. Then use Properties to refine details, but only if you want to change something about the format.

Beyond all the properties for the control as a whole, there are many properties for each column in a GridView, and each field in a DetailsView. To get to those properties, you have to choose Edit Columns or Edit Fields from the control’s Common Tasks menu. Then, under Selected Fields in the dialog box that opens, click on a specific field name under Selected Fields. The properties for that one column or field appear in a Properties sheet within the dialog box.

Remember that you can use both GridView and DetailsView either to show data or to allow editing of data in the database. But if you want to use either control to edit data, you must bind the control to a single table that has a primary key. Also, when using the DetailsView control to edit data, you need to remember to click the Advanced button in the Configure Select Statement page, as described under “Binding a DetailsView control” earlier in this chapter.

The DataList and FormView controls described later in this chapter are older ASP.NET controls. Although they hint at offering data-editing capabilities, they are much harder to use for that purpose. Your best bet is to try to use GridView or DetailsView when you know, in advance, that you want to edit data in the underlying database. Use DataList and FormView when you’re just concerned with showing data on a page, without letting users make changes to that data.

Using the DataList Control

The DataList control is ideal for when you want to show data to users as though it were normal text, as opposed to items in a table or on a form. The DataList control’s biggest strength is that it allows you to list data in just about any format imaginable. Using the DataList control is much like using the other Data controls you’ve seen in this chapter. Just follow these steps:

1.Create or open an .aspx page so you’re in Design view.

2.In the Toolbox, expand the Data category of controls.

Chapter 12: Using Data in Web Pages 297

3.Drag a DataList control from the Toolbox onto the page (or Content Placeholder on a page that has a Master Page).

4.From the DataList control’s Common Tasks menu, select Choose Data Source <New data source...>.

5.As usual, choose Database and click OK.

6.Choose your usual connection string, and click Next.

That gets you to the standard Configure the Select Statement page.

7.In the Configure the Select Statement page, choose the table or view from which the control will retrieve data.

As always, you can use the WHERE button to limit the records shown. Use the ORDER BY button to specify a sort order.

Figure 12-40 shows an example where I’ve opted to show all fields except ItemID from the Items table. I also used the ORDER BY button to set the sort order to OurItemID, Ascending order (though the only place you can see that is in the ORDER BY clause at the end of the SELECT statement).

8.Click Next and Finish to return to the page.

Figure 12-40:

Sample field selections for a

DataList

control.

In Design view, the bound DataList control appears as a placeholder of field names with “abc” placeholders for text, and random values like 0 and 0.1 as placeholders for numbers. When you view the page in a Web browser, you get a better idea of how the data will look to a person viewing the page through a Web browser. Figure 12-41 shows how the fields from the Items table look when viewed through an unmodified DataList control.

298 Part III: Personalization and Databases

Figure 12-41:

Fields from Figure 12-40 as displayed by a

DataList

control.

Formatting a DataList control

The real beauty of the DataList control comes into play when you edit its template. To do so, click the DataList control to select it, then click the tiny triangle button near its upper-right corner. Or right-click the DataList control and choose Show Smart Tag. From the Common Tasks menu that appears, choose Edit Templates. The control takes on a completely different look, as shown in Figure 12-42.

Figure 12-42:

A

DataList control Item Template.

The Item Template is like a small page that you can edit using standard word processing techniques and HTML. Text that’s not enclosed in square brackets is just plain text typed right into the control. You can edit, format, or delete

Chapter 12: Using Data in Web Pages 299

that text however you like. For example, you can select a chunk of text and use options on the Formatting toolbar to make it bold, change its font, or whatever.

Items enclosed in square brackets are Label controls that are bound to data in the underlying database table or view. Those you can format in a similar manner. But you don’t drag the mouse pointer through the item as you would with regular text. You just click the item to select it. Then choose options from the Formatting toolbar.

To select multiple Label controls, click one to select it. Then hold down the Ctrl key while clicking others that you want to select.

You can also rearrange things in the ItemTemplate to change how things look on the page. Moving things around can be a little awkward, especially if you’re trying to align controls side-by-side. That’s because the items wordwrap within the template, just as they would in a word processing program. To get things side-by-side, you may need to widen the control. To do so, click the top of the DataList control to select it. Then use the sizing handle on its right border to widen or narrow the control.

To move an item, just drag it to where you want to put it. Or, click the item to select it, press Ctrl+X to cut it, click where you want to put the control, and press Ctrl+V to paste it. If you want a space to appear between items in the page, make sure to insert a blank space between the items within the template.

Figure 12-43 shows an example where I deleted all the text labels, leaving only the bound Label controls. Those I rearranged so that the ItemNameLabel is on the top. The ItemDescriptionLabel, OurItemIdLabel, and

ItemPriceLabel controls are side-by-side on one line, with one space between them.

Blank lines in a DataList control

Though you can’t see them, any extra carriage returns at the bottom of the control will add height to the control, and will also put extra space between each record on the Web page. (A carriage return is an invisible character that gets added every time you press the Enter or Return key.)

To reduce the height of a DataList control, you may need to remove some of those extra

carriage returns. You’ll need to be in the Edit Templates mode, like Figure 12-42, to do that. Click inside the template, then move the cursor to the bottom of the template (press Ctrl+End). From there, each time you press Backspace you’ll remove one carriage return (one blank line). If you go too far and delete a control within the template, press Undo (Ctrl+Z) to undo the deletion.