ASP.NET Tutorial

<asp:ImageField> Control

A GridView can be coded in its default format for automatic generation of rows and columns matching the records and fields defined by the data source control to which it is bound. Alternately, you can define various BoundField columns to explicitly choose and format columns of data for display. Use of bound columns, however, is limited to displaying text and numeric data stored in the database. You may have need to display other types of information associated with the database records.

Graphic images can be displayed in a GridView column by coding an <asp:ImageField> control in the <Columns> section. A URL link to the image is provided to display the associated picture. The general format for coding an ImageField control is shown in Figure 7-6.

<asp:GridView id="id" Runat="Server"
  AutoGenerateColumns="False"
  ... >
	
  <Columns>
	
    <asp:ImageField
      AlternateText="string"
      DataAlternateTextField="field"
      DataAlternateTextFormatString="{string}"
      DataImageUrlField="field"
      DataImageUrlFormatString="{string}"
      FooterText="string"
      HeaderText="string"
      NullDisplayText="string"
      NullImageUrl="string"
      SortExpression="field"
			
      HeaderStyle-property="value"...
      ItemStyle-property="value"...
      FooterStyle-property="value"...
    />
    ...
    
  </Columns>
  
</asp:GridView>

Figure 7-6. General format for <asp:ImageField> control of <asp:GridView> control.

The URL of a standard image file in GIF or JPG format is provided in one of two ways. If one of the fields in the database contains the image URL, then the DataImageUrlField property points to that field. Otherwise, the URL is hard coded as the DataImageUrlFormatString, using a DataField value to compose the URL if necessary. Missing pictures are replaced by the text string coded in the NullDisplayText property. Alternate text is given by a static message applicable to all images (AlternateText), by the contents of a database field (DataAlternateTextField), or by a text string that includes a database field (DataAlternateTextFormatString). Sorting can be perform on this column by supplying a sort field in the SortExpression property. GridView sorting is taken up in a later topic.

Storing Images

It is usually not a good idea to store graphic images in databases. They can take up a lot of room and require continual updating when changes are made to the original images. A better practice is to store image files in their own directory on the server and to link to them through a URL. The URL for an image can be stored in the database and referenced for access to its associated image; alternately, an image URL can be composed from a field in the database. This latter technique is used to access images for books in the example BooksDB.mdb database for display in a GridView table.

Book images have files names based on the book's BookID field. That is, image file names are in the format "DB111.jpg," "DB222.jpg," "DB333.jpg," and so forth, using the BookID value with the ".jpg" extension attached. This naming convention makes it easy to locate the picture associated with a particular book. Since pictures are stored on the directory path c:\eCommerce\BookPictures\ and Web pages appear on the path c:\eCommerce\WebSite\, the relative path from a page to the picture directory is "../BookPictures/". A URL for a picture, then, can be composed by concatenating the relative path from the Web page with a BookID, and appending the string ".jpg". That is, the URL for a picture is given by the concatenation "../BookPictures/" & BookID & ".jpg".

Displaying GridView Images

A GridView that displays book images associated with the BooksDB.mdb database is shown below. The picture column is defined by an <asp:ImageField> control, with image URLs derived from the BookID column. When using the ImageField control, images cannot be resized. Therefore, you may wish to create a set of thumbnail images for display within the table. Through other column types, described later, images can be resized during display.

ID	Title	Photo
GR111	Adobe Photoshop CS2
GR222	Learning Web Design
GR333	Macromedia Flash Professional
GR444	Digital Photographer Handbook
GR555	Creating Motion Graphics

Figure 7-7. Using an ImageField column in a GridView.

<asp:AccessDataSource id="BookSource" Runat="Server"
  DataFile="../Databases/BooksDB.mdb"
  SelectCommand="SELECT BookID, BookTitle FROM Books 
                 WHERE BookType='Graphics' ORDER BY BookID"/>
	
<asp:GridView id="BookGrid" DataSourceID="BookSource" Runat="Server"
  AutoGenerateColumns="False"
  CellPadding="3"
    HeaderStyle-BackColor="#707070"
    HeaderStyle-ForeColor="#FFFFFF">

  <Columns>
	
  <asp:BoundField
    DataField="BookID"
    HeaderText="ID"/>
	
  <asp:BoundField
    DataField="BookTitle"
    HeaderText="Title"/>

  <asp:ImageField
    HeaderText="Photo"
    DataImageUrlField="BookID"
    DataImageUrlFormatString="../BookPictures/{0}.jpg"
    DataAlternateTextField="BookID"
    DataAlternateTextFormatString="Photo of {0}"/>
	
  </Columns>

</asp:GridView>

Listing 7-5. Code for GridView with ImageField column.

The URL for an image is given in the DataImageUrlFormatString property. Of course, different URL's are needed for the different pictures, although they share the same path. Therefore, the format string is composed from the same static text intermixed with different file name references.

The format string "{0}" appearing in the DataImageUrlFormatString serves as a placeholder for binding to a database field value given by the DataImageUrlField, in this case the BookID field. Thus, for each display line in the GridView, the BookID is inserted into the DataImageUrlFormatString, giving the unique URL for the picture file. For example, the derived URL for the first of the above books becomes

and the corresponding picture is retrieved through this path. Although shown here as a relative path, the URL can be an absolute path starting with "http://".

A DataAlternateTextFormatString is used to display alternate text when the mouse is moved on top of an image. This string is formatted with a "{0}" placeholder for insertion of the DataAlternateTextField value, in this case the same value of the BookID field for the book displayed in the row.

As mentioned, images displayed through an ImageField control cannot be resized with Width or Height property settings as can an <asp:Image> control. Later, you learn how to embed an Image control in a GridView that does permit resizing of images.