Looking at the GridView s and DetailsView s Fields
Looking at the GridView's and DetailsView's FieldsHours 15, "Displaying Data with the Data Web Controls," and 16, "Deleting, Inserting, and Editing Data," concentrated on displaying and modifying database data using the GridView and DetailsView controls. To work with data on an ASP.NET page, we first added a SqlDataSource control and configured it to retrieve the appropriate data. Next, we added the needed data Web control and specified that it should use the data source control just added. Both the GridView and DetailsView are composed of fields. The fields in a GridView or DetailsView can serve one of two purposes:
When a GridView or DetailsView control is initially bound to a data source control through its smart tag, for each column in the data source control a BoundField is automatically added to the GridView or DetailsView. The BoundField is one type of field that falls into the first category of fields; it simply displays the value of the associated column as plain text when the data Web control is not being edited or inserted. When data is being edited or inserted, the BoundField renders as a TextBox Web control whose Text property is set to the value of the column. The CommandField, which we've seen in the past few hours, is a field designed for providing an interface for the end user into the GridView's or DetailsView's functionality. Enabling inserting, editing, selecting, or deleting adds a CommandField to the data Web control. The CommandField can show any combination of insert, edit, select, and delete buttons; you can indicate which of these you want present through the ShowInsertButton, ShowEditButton, ShowSelectButton, and ShowDeleteButton properties. When you use the GridView or DetailsView's smart tag to turn on support for inserting, editing, selecting, or deleting, a CommandField is automatically added with the appropriate properties' values set accordingly. In total the GridView and DetailsView have seven fields that we can use. We can view and edit the fields that make up these controls by going to the controls' smart tags and clicking the Edit Columns link. As we have seen in past hours, this brings up the Fields dialog box (see Figure 18.1). The bottom-left corner of the Fields dialog box lists the current fields of the control; the upper-left corner lists the field types that can be added. Table 18.1 lists the seven field types along with a brief description of each. Figure 18.1. The Fields dialog box lists the fields in the data Web control, along with the field types that can be added.
We've already looked at using the BoundField, CommandField, and TemplateField. Over the next few sections we'll examine the CheckBoxField, HyperLinkField, and ImageField. Looking at How Bit Columns Are DisplayedAs we discussed in Hour 13, a database table is composed of a number of columns, each of which has a data type. The data type of a column indicates what types of values can be stored in the column. The Title column in the Books table, for example, has an nvarchar(150) data type, meaning that it can store strings with up to 150 characters; the LastReadOn column has a datetime data type, meaning it can store date and time values. One database column data type that we've yet to use in the Books table is the bit data type. A column that has a data type of bit can store one of two values: 0 or 1. Typically, a bit column is used to store a Yes/No or True/False type value. Let's take a minute to add a bit column to our Books table. Go to the Database Explorer in Visual Web Developer, drill down to the Books table, right-click on the Books table name, and choose the Open Table Definition option. This will bring up the list of columns that make up the table. Next, add a new column named Recommended and choose a Data Type value of bit. Because the table contains existing data, this column either must allow Nulls or we must provide a default value. Let's use the latter approach. First, uncheck the Allow Nulls check box. Next, we need to specify a default value for this column. In the Column Properties pane, search for the property titled Default Value or Binding in the General section. Then put in the default value there. Let's use a default of 0. Take a minute to ensure that your screen looks similar to Figure 18.2 and then save the table changes. Figure 18.2. The Recommended column has been added; it's a bit column with a default value of 0. Now that we've added this new column, take a minute to create an ASP.NET page that displays all rows and all columns in an editable GridView. As soon as you bind the GridView to the SqlDataSource control through the GridView's smart tag, the Recommended field in the GridView is shown as a series of check boxes. That is, the smart tag is smart enough to note that a particular column being bound to the GridView is a bit column. For such columns, the smart tag automatically uses a CheckBoxField instead of the standard BoundField (see Figure 18.3). Figure 18.3. The Recommended field is displayed as a series of check boxes. To see that the Recommended field is indeed a CheckBoxField, go to the GridView's smart tag and click on the Edit Columns link, bringing up the Fields dialog box. As Figure 18.4 shows, from the bottom-left corner listing of the fields in the GridView, the Recommended field is a CheckBoxField. Selecting the Recommended field loads its properties on the right. As with the BoundField, you can customize the CheckBoxField's appearance through the properties in the Styles section. Figure 18.4. The GridView automatically uses a CheckBoxField for the Recommended field. Take a moment to test this ASP.NET page through a browser. When you visit the page, each row in the Recommended field is displayed as a disabled check box. When a particular row is edited, the editable row's check box is enabled, allowing the end user to change the check box's value. This functionality is made possible thanks to the CheckBoxField.
Displaying Hyperlinks with the HyperLinkFieldWith the addition of a Recommended field to the Books table, users visiting your site can see both what books are in your bookshelf and what books you heartily recommend. A visitor who notes that the books you read and like are similar to the books he reads and likes might be interesting in buying some of the books you recommend that he has yet to read. To help streamline this process, you could add a link titled "Buy" in each book row that, when clicked, would whisk the user to some online bookstore, displaying the details of that particular book. Adding such functionality through the GridView (or DetailsView) is possible and quite simple thanks to the HyperLinkField. As its name implies, the HyperLinkField displays a field of HyperLink Web controls, which render as the standard hyperlinks that, when clicked, take the visitor to some specified URL. With the HyperLinkField field, we can set the Text and NavigateUrl properties of the HyperLink control based on database values. That is, the text and URL of the rendered link for each row in the GridView can be based on the values of the columns of the database record that was bound to that row. If this isn't yet clear, don't worry; an example should help. Because we want to add a "Buy" link to each row in a GridView that, when clicked, sends the visitor to an online bookstore, our first order of business is to determine what online bookstore to use and what the URL for viewing the details for a particular book on that site looks like. For this exercise, let's use Amazon.com as the online bookstore. With Amazon.com, the URL http://www.amazon.com/exec/obidos/ASIN/ISBN/ displays the details for the book with the specified ISBN value.
To provide such a link, we need to store the ISBN for each of the books in the Books table; therefore, we need to add an ISBN column to the table. Because a book's ISBN can be up to 13 characters, create the ISBN column using the nvarchar(13) data type. We don't want to allow Nulls, but since there's already data in the Books table, we'll initially need to allow Nulls for this new column until we have a chance to provide values for the ISBN column for the existing rows. Take a moment to add this new column. After adding the ISBN column, edit the table's data (right-click on the Books table in the Database Explorer and choose Show Table Data). Enter an ISBN for each of the books, omitting any hyphens (see Figure 18.5). The ISBN for the five books in the Books table are as follows:
Figure 18.5. The ISBN values for the five books have been added. After you've supplied the ISBN values for all of the records in the Books table, return to editing the table's definition and uncheck the Allow Nulls check box for the ISBN column. Create an ASP.NET page with a SqlDataSource that retrieves all of the columns and rows from the Books table. Next, add a GridView control and bind it to the SqlDataSource. At this point the GridView will be displaying the value of the ISBN column using a BoundField, showing the text of the ISBN. We want to replace this BoundField with a HyperLinkField. To accomplish this, go to the Fields dialog box by bringing up the GridView's smart tag and clicking on the Edit Columns link. The lower-left corner of the Fields dialog box lists the fields currently being used by the GridView, one of which is an ISBN BoundField. Remove this field from the GridView by selecting it and clicking the Delete icon to the immediate right of this list, as shown in Figure 18.6. Figure 18.6. Select the ISBN BoundField and delete it. You can also delete any other BoundFields that you aren't interested in displaying. For this ASP.NET page, let's not bother showing the BookID, YearPublished, or LastReadOn BoundFields.
We're now ready to add the "Buy" HyperLinkField. From the Available Fields list in the upper-left corner, scroll down and select the HyperLinkField option and then click the Add button. This will add a HyperLinkField to bottom of the list of fields in the lower-left corner. Take a moment to move this HyperLinkField to the top of the list so that it's displayed in the far left of the GridView. We now need to set the HyperLinkField's properties, indicating what the rendered link's text and URL values should be. The HyperLinkField's text and URL values can be static or dynamic. A dynamic value differs for each row in the GridView based on the data bound to that particular row; a static value is the same among all GridView rows. For our task we want a static text value"Buy"and a dynamic URL value, varying on each book's ISBN. If you want to set the text or URL values to static values, use the Text or NavigateUrl properties. The Text property can be found in the Appearance section of the properties list; NavigateUrl is located in the Behavior section. Because we want the link's text to be "Buy" for all rows, set the Text property of the HyperLinkColumn to Buy. To specify a dynamic value for the text or URL values, we need to use two properties. For the text, there are the DataTextField and DataTextFormatString properties; for the URL, there are the DataNavigateUrlFields and DataNavigateUrlFormatString properties. These four properties are found in the Data section of the HyperLinkField's properties. The properties work in tandem in the following manner: the DataTextField or DataNavigateUrlFields properties specify what database column values are used in the text or URL of the rendered link; the DataTextFormatString or DataNavigateUrlFormatString properties can be used to surround the database value with static text. With the DataTextFormatString and DataNavigateUrlFormatString properties, the string {0} is used to inject the dynamic value. For our example, we want the URL to be dynamic based on the book's ISBN; therefore, set the DataNavigateUrlFields property to ISBN. Because we want the URL to be http://www.amazon.com/exec/obidos/ASIN/ISBN/, use the value http://www.amazon.com/exec/obidos/ASIN/{0}/ as the value for the DataNavigateUrlFormatString property. This value instructs the HyperLinkColumn to inject the current row's ISBN value at the {0} position, resulting in a properly formatted hyperlink. After you set these properties and click the OK button in the Fields dialog box, your screen should look similar to Figure 18.7. Note that the GridView now has a "Buy" HyperLinkField at its far left and that the BookID, YearPublished, and LastReadOn BoundFields have been removed. Figure 18.7. A HyperLinkField has been added to the GridView. View the ASP.NET page in a browser. Each row in the rendered GridView will contain a "Buy" link that, when clicked, will whisk you to Amazon.com. For example, clicking the "Buy" link for Create Your Own Website will take you to http://www.amazon.com/exec/obidos/ASIN/0672328267/. Notice how the ISBN value for this book0672328267is injected into the URL of the link precisely where the {0} string was placed in the HyperLinkField's DataNavigateUrlFormatString property.
Displaying Images with the ImageFieldIn the last three hours of this book, we will be building, from the ground up, a photo album web application that allows a visitor to upload her pictures to the website. After these pictures have been uploaded, other visitors can come by and check them out and leave comments on a picture-by-picture basis. For this application, when a user uploads an image to the website, the image will be saved on the web server's file system in a particular directory. There will also be a database table called Pictures that has a record for each photo in the system. This table will have columns that capture the title of the photograph, a description, the user who uploaded the photo, and the path to the photo, among others. Because the uploaded pictures are stored on the web server's file system and only a path to the file is stored in the database, if we use a BoundField in a GridView to display the contents of the Pictures table, the path to the photo will just appear as text. To make this concept more clear, imagine that a user uploads a picture of her dog, and the system stores the picture on the web server's file system as Pictures/MyDog.jpg. Adding this picture will add a new record to the database table that has a Title column value of, say, "My Dog," a Description value of "This is a picture of my dog; he's so cute!" and a PhotoPath value of Pictures/MyDog.jpg. If we display a GridView with a BoundField for each of the Picture columns, we'll see in the PhotoPath field the text Pictures/MyDog.jpg. What we want to see, though, is the image stored in the path Pictures/MyDog.jpg. The BoundField, whose sole purpose is to display the corresponding database column's value as text, is not suited for displaying an image based on a text path.
The ImageField is designed to display an image whose URL is based on a database value. The ImageField injects an Image Web control, which renders as an HTML <img> element. Like the HyperLinkField, the ImageField has a pair of properties that can be used to specify a database column and a format string: DataImageUrlField and DataImageUrlFieldString. The URL of the image can either be a local imageone that's stored on the web serveror on a remote web server. Amazon.com has thumbnails of all of the books it sells at the URL http://images.amazon.com/images/P/ISBN.01.THUMBZZZ.jpg, where ISBN is the ISBN of the book. Therefore, we can use an ImageField whose DataImageUrlField property is set to ISBN and whose DataImageUrlFieldString property is set to http://images.amazon.com/images/P/{0}.01.THUMBZZZ.jpg. As we did with the CheckBoxField example in the previous section, add an ImageField using the following steps:
After step 6, your Fields dialog box should look similar to the one in Figure 18.8. After verifying this, click the OK button and then view the ASP.NET page through a browser. You should see the thumbnail images for each of the book's covers, as shown in Figure 18.9. Figure 18.8. Set the properties of the ImageField through the Fields dialog box. Figure 18.9. A thumbnail image of the cover is shown for each book.
|
EAN: 2147483647
Pages: 233