ASP.NET 2.0 Visual Web Developer 2005 Express Edition Starter Kit (2006)

Chapter 4

6.The MenuItems table contains just the filename of the images for the menu page, and not the full path. The images are, in fact, in a subfolder named images. To get the correct path in the ImageUrl property of each Image control, you must also set the DataImageUrlFormatString property of the new ImageField column to the format string images/{0} (see Figure 4-8). This format string will cause the column value to be set to the text in the string, but with the place-

holder {0} replaced by the value from the column that you specified for the DataImageUrlField property. Therefore, you will get — for example — images/pizza2.gif as the value of the ImageUrl property for the second pizza row.

Figure 4-8: Setting the DataImageUrlFormatString property

7.There are some more properties you should set for the new ImageField column. Set the NullImageUrl property by selecting it and clicking the three dots (...) button that appears. Select the image file blank.gif from the images folder. This is the image that will be displayed if there is no value in the column that normally provides the value for the ImageUrl property and prevents the user seeing a “broken image” in the page in this case. Notice that VWD precedes the file you select with the tilde (~) character. This signifies the root folder of the site and makes sure that the correct path to the image is used, even if you move the page to a subfolder afterwards. Set the ShowHeader property to False, so there is no header displayed for this column. Finally, set the AccessibleHeadertext property to Picture of item. This text will be used as an abbr attribute of the column when the page is displayed, making it possible for users of specialist nonvisual user agents to more easily tell what the column contains.

8.Now go to the “Selected fields” list and use the up arrow button to move the new column to the top of the list so that it is displayed as the first column of the grid (see Figure 4-9).

Figure 4-9: Moving the new column to the top of the list

9.That completes the new ImageField column, so go back to the “Available fields” list and select the HyperlinkField type. Click Add so that a new field of this type is added to the end of the Selected fields” list (see Figure 4-10).

114

Accessing and Displaying Data

Figure 4-10: Adding a new field

10.In the properties for the new HyperlinkField, set the Text property to Search. This is the text to display in this column for every row. If you want the text of a hyperlink to be different in each row, and reflect the data in the underlying data source, you set the DataTextField property to name of the column containing the text for the hyperlink, and optionally the DataTextFormatString property. These properties work in the same way as the DataImageUrlField and DataImageUrlFormatString properties you set for the ImageField column in step 6. Set the Target property to the value blank (from the drop-down list) to force the page that opens from the hyperlink to appear in a new browser window.

11.Set the DataNavigateUrlFields property to the value MenuItemType,ItemName. You can click this property entry and open the String Collection Editor dialog using the three dots (...) button that appears, or simply type the value directly. This property holds a list of the

columns in the source data that will be referenced when building the URL of the hyperlink to be displayed in this column. Then set the DataNavigateUrlFormatString property to the value www.google.com/search?q={0} {1} (see Figure 4-11). This URL will allow users to search the Google Web site for more information about the items on the PPQ menu. The two placeholders in the string are replaced for each row by the values from the two columns specified as the

DataNavigateUrlFields property.

Figure 4-11: Setting the value of the

DataNavigateUrlFormatString property

115

Chapter 4

12.The final change to the columns in the GridView control is to specify the formatting of the ItemPrice column. At present, this just displays as a number, such as 12.9500 (as you saw in Figure 4-2 earlier in this chapter). You can specify a format string for the DataFormatString property of the column to change this, and the obvious choice is currency format using the format string {0:c}, as shown at the bottom of the Fields dialog in Figure 4-12. However, this depends on the regional settings of the server, and you may prefer to be more precise about the actual currency symbol to display by using the format string $ {0:F2}, as shown in Figure 4-12.

Figure 4-12: Changing the DataFormatString property

Chances are that the prices stored in your database are in a specific currency, such as U.S. dollars. In this case, using the {0:c} format string means that the currency symbol and number format depends on the regional settings of the server, whereas the value in the table is always U.S. dollars. Therefore, it is always wise to consider using format strings that specify the currency symbol, and format the remainder of the numeric value with a fixed number of decimal places. The format string $ {0:F2} forces a U.S. dollar currency symbol to appear, with the value formatted to two decimal places.

13.Now you can click OK to close the fields dialog, and run the page to see the results. Figure 4-13 shows that the first column now contains an image of the item in the menu, and the final column contains a Search link. If you hover over this link, you will see the target URL appear in the status bar of the browser, in this case http://www.google.com/search?q=Pizza Hawaiian. Also notice the formatting of the values in the ItemSize column.

116

Accessing and Displaying Data

Figure 4-13: Image inserted into first column and hyperlink in final column

There are plenty of other properties for the columns that you can set to experiment with changing the appearance of the GridView output. For example, you can set or change the header text (or use an image), or apply specific formatting to the contents. However, there are other ways that you can exert even more control over the appearance, as you will see next.

Using Data Display Control Templates

The previous section showed how you can change the way the GridView control displays the data exposed by a data source control. You replaced the standard BoundField control for some of the columns with an ImageField and a HyperlinkField, so that the output contains images and links to other pages. You also changed the format of the text in the result, so that the price displays with the appropriate currency symbol.

However, these are not the only ways to generate custom output in a GridView or other data display controls. You can, instead, replace the BoundField with a TemplateField and generate the entire output you require yourself. A TemplateField allows you to specify the entire content for a column, using other controls and text to create the appearance you require.

117

Chapter 4

1.With the page TestMenu2.aspx still open from the previous example, open the GridView Tasks pane, and click the Edit Columns . . . link to open the Fields dialog. Remove all the columns in the “Selected fields” list except for the GraphicFileName, Description, and Search columns. Then select the Description column and click the link at the bottom right of the Fields dialog to convert this column into a TemplateField (see Figure 4-14).

Figure 4-14: Converting the Description column

2.Click OK to close the Fields dialog, and go back to the GridView Tasks pane. Click the Edit Templates link, as shown in Figure 4-15.

Figure 4-15: Clicking the edit Templates link

118

Accessing and Displaying Data

3.This changes the GridView Tasks pane into template editing mode. The pane now shows a list of the templates that are available for the control, listed by column name. There is only one

TemplateField column in your GridView control — the column named Description at index 1 (the second column in the control because the index starts at zero), as shown in Figure 4-16. Select the ItemTemplate, and the control displays an editing panel that contains a Label control.

Figure 4-16: Selecting ItemTemplate

The Template Editing Mode pane opens showing the ItemTemplate by default. Normally the edit area is empty, but there is a Label here in this case because you converted the existing Description column (which used a Label control to display the contents) into a TemplateField. If you select the EditItemTemplate from the drop-down list, you will see that there is a TextBox in this template. Again, this is because you converted the existing Description column into a TemplateField. Data display controls display the contents of the appropriate template depending on which mode they are in, and so the TextBox displays only in the row that is in edit mode. The remaining rows display the Label control.

4.Close the GridView Tasks pane, and select the Label control. Open the Label Tasks pane using the small arrow icon that appears and click the Edit DataBindings . . . link (see Figure 4-17).

Figure 4-17: Clicking the Edit DataBindings. . . link

5.This opens the Label1 DataBindings dialog. The column itself is not bound to any specific column in the source data, but this dialog allows you to bind the controls you place in the templates for this TemplateField to the columns in the source data. The Label control in the ItemTemplate for this column has its Text property bound to the Description column in the source data, as you can see in Figure 4-18. There is no Format provided, but this feature allows you to specify a format string just like those you used in the previous example to change the way the value is displayed. You can even specify your own custom binding statement for this column if you prefer.

119

Chapter 4

Figure 4-18: Text property bound to the Description column

Usually, you will bind the Text property of a control to the column in the underlying data source. However, you can bind other properties, such as the NavigateUrl of a Hyperlink control, or the AlternateText property of an Image control. Notice that you can display all the properties of a control by setting the checkbox below the “Bindable properties” list.

6.The binding of the Label control’s Text property to the source data, in this example, is a two-way binding (because you converted the BoundColumn to a TemplateColumn). The code expression is Bind(“column-name”). This means that any changes to the value in the control (for example

if it were a TextBox) will be pushed back into the database automatically. As you are just displaying data in this page, you can untick the checkbox in the Field binding section of the dialog to specify one-way binding.

7.Click OK to close the Label1 DataBinding dialog, and close the Label Tasks pane. Now you will add more controls to the ItemTemplate section to specify how the source data will display in this column. Drag a Label control from the Toolbox into the ItemTemplate editing area, and use the Edit DataBindings . . . link on the Label Tasks pane to open the DataBindings dialog

for this control. Select the ItemName column in the “Bound to” drop-down list. Notice that, by default, this is not a two-way binding, and so the code expression is Eval(“column-name”), as shown in Figure 4-19.

120

Accessing and Displaying Data

Figure 4-19: Binding for ItemName column

8.Drag another Label control from the Toolbox onto the ItemTemplate editing area. Bind this control (Label3) to the PizzaToppings column, but this time add a format string by typing the text generously topped with {0} into the Format section of the DataBindings dialog (see Figure 4-20).

Figure 4-20: Entering text into the Format section

121

Chapter 4

9.Continue by adding two more Label controls to the ItemTemplate. Bind one (Label4) to the ItemSize column. Bind the other (Label5) to the ItemPrice column, and type $ {0:F2} into the Format box to ensure that the price is displayed with a dollar symbol and two decimal places (as in the previous example). Then, rearrange the Label controls by dragging them into position in the ItemTemplate, and typing text and carriage returns between them to get the layout shown in Figure 4-21 — you can drag the border of the control to give yourself more room inside the template editing area. Then change the text size, and the color and style, using the controls on the VWD Formatting toolbar if you wish.

Figure 4-21: Arranging Label controls

10.Now, click the End Template Editing link in the GridView Tasks pane, and open the Properties window for the GridView control (right-click on it and select Properties from the context menu). Change the GridLines property to Vertical and the ShowHeader property to False. Then run your page to see the results. As you can see in Figure 4-22, the output is no longer just a table of values, but a page where you have exerted complete control over how the values extracted from the source data appear.

Figure 4-22: Resulting page

122

Accessing and Displaying Data

Look at the list of drinks toward the end of the page, and you will see why we specified a format string for the PizzaToppings column, but typed the other text that you see directly into the ItemTemplate section. Where there is no value (NULL) for a column, the format cannot be applied and the bound control displays nothing. This means that for drinks (which have NULL for the PizzaToppings column), the text “generously topped with . . .” does not appear at all.

The DetailsView and FormView Controls

All of the examples you have seen so far use the GridView control. This is, however, just one of the controls available for displaying the data exposed by a data source control. The GridView control, as you have seen, displays a grid of rows and columns, giving you a view of the data that corresponds directly to the original data table. You can change this by using different column types, or with templates, but the underlying structure of the output is still rows and columns, with one row for each row in the source data.

Two of the other new data display controls in ASP.NET 2.0 display the data one row at a time, with the individual columns laid out like a “form.” They provide links that allow you to move from one page or row to the next one, the previous one, the first one, or the last one. This form-based view of the data often makes it easier to see what a row that has a large number of columns contains. The individual values can be displayed with separate labels for each one, laid out vertically as fields from one row rather than as a series of horizontally arranged columns.

The two controls that provide this type of output are the DetailsView and FormView. The difference between them is that the DetailsView control, like the GridView control, can automatically generate the fields and display the content from the associated data source control. The FormView control, on the other hand, provides no automatic display support other than the navigation between rows, and you must create the entire content of the display form using templates. However, these templates work in just the same way as you saw for the GridView control in the previous section.

Other display controls for rowset data are the DataList and Repeater. The DataList and Repeater controls do not support automatic row selection, editing, paging, or sorting. The DataList control generates an HTML table with one row containing a single cell for each row in the source data. You provide details of the data items from the source data, and how they are to be displayed, for each row. The Repeater control is even simpler. It generates repeated output using a template that you create, without providing any other support for formatting or layout. All it does is output to the browser the contents of the template once for each row in the data source.

Using a DetailsView and FormView Control

You will see most of the data source controls used in the PPQ example site. However, to help you become familiar with the different types, this example demonstrates the use of the DetailsView and FormView controls.

123