ASP.NET —

Other Databound Controls

In addition to the simple bound controls, ASP.NET includes several more complex controls. They work very much like the simple bound controls in that you attach a data source to them and they render automatically. However, these controls differ by displaying the data in more elaborate ways. These controls include the GridView, the FormView, the DetailsView, and the DataList.

The best way to understand the nature of these controls is to work through a couple of examples. Let's start with the GridView.

The GridView

  1. Add a new Web form to the DataBindORama site. Name it UseGridView.

  2. Pick up a GridView from the toolbox (it's under the Data controls). Drop it on the form. Visual Studio will ask you to configure the GridView. Under the Choose Data Source… option, select <New data source…>. Point Visual Studio to the ASPNetStepByStep.mdb under the App_Data directory. When specifying the query, select "*" to query for all the columns. Finally, enable Paging, Sorting, and Selection from the GridView Configuration menu. After configuring the GridView, Visual Studio will show you a representation of the format the query will use when it is rendered to the browser:

    Graphic

  3. Run the program. Try the various options such as paging through the data and sorting to get a feel as to how the GridView works.

    Graphic

  4. Go back to Visual Studio and try formatting the GridView to change its appearance. As with all the other ASP.NET controls, the GridView includes a number of configurable properties such as the foreground and background colors. Some of the other specialized properties within the GridView include the AlternateRowStyle, the PagerSettings, and the PagerStyle.

The GridView is useful for displaying tables in a format where you can see all the rows and columns at once. While the classic DataGrid is still available, the GridView handles tasks such as selecting rows and sorting by column.

Here's a look at another complex control: the FormView.

The FormView

  1. Add a new Web form to the DataBindORama site named UseFormView.

  2. Pick up a FormView from the toolbox (it's under the Data controls). Drop it on the form. Visual Studio will ask you to configure the FormView. Under the Choose Data Source… option, select <New data source…>. Point Visual Studio to the ASPNetStepByStep.mdb under the App_Data directory. When specifying the query, select "*" to query for all the columns.

  3. Select the AutoFormat option from the Configuration menu. Here you have the opportunity to apply a couple of canned styles to the FormView. The example accompanying this text uses the classic style.

  4. Finally, enable paging from the FormView Configuration menu by selecting the Enable Paging check box. Set the HeadingText property to give the FormView a title (perhaps something like ".NET Reference Authors and Titles").

  5. After configuring the FormView, Visual Studio will show you a representation of the format the query will use when it is rendered to the browser:

    Graphic

  6. Run the program. Try the various options such as paging through the data to get a feel for how the FormView works.

    Graphic

The FormView is useful for gathering the information for singular rows in one place. The user navigates between each row, but the focus is always on the current row.

The DetailsView

  1. Add a new Web form to the DataBindORama site named UseDetailsView.

  2. Pick up a DetailView from the toolbox (it's under the Data controls). Drop it on the form. Visual Studio will ask you to configure the DetailsView. Under the Choose Data Source… option, select <New data source…>. Point Visual Studio to the ASPNetStepByStep.mdb under the App_Data directory. When specifying the query, select "*" to select all the columns.

  3. Select the AutoFormat option from the Configuration menu. Here you have the opportunity to apply a couple of canned styles to the DetailsView. The example accompanying this text uses the classic style.

  4. Select the Edit Fields… option from the Configuration menu. Check the Auto-Generate fields check box on the dialog box.

  5. Finally, enable paging from the DetailsView Configuration menu. Set the HeadingText property to give the FormView a title (perhaps something like ".NET Reference Authors and Titles").

  6. After configuring the DetailsView, Visual Studio will show you a representation of the format the query will use when it is rendered to the browser:

    Graphic

  7. Run the program. Try the various options such as paging through the data to get a feel as to how the DetailsView works.

    Graphic

The DataList control was available in ASP.NET 1.x. It's been updated to support declarative databinding. Here's a look at the DataList.

The DataList

  1. Add a new Web form to the DataBindORama site named UseDataList.

  2. Pick up a DataList from the toolbox (it's under the Data controls). Drop it on the form. Visual Studio will ask you to configure the DataList. Under the Choose Data Source… option, select <New data source…>. Point Visual Studio to the ASPNetStepByStep.mdb under the App_Data directory. When specifying the query, select "*" to query for all the columns.

  3. Select the AutoFormat option from the Configuration menu. Here you have the opportunity to apply a couple of canned styles to the DataList. The example accompanying this text uses the slate style.

  4. Select the DataList Properties dialog box from the DataList Configuration menu by selecting Property Builder. Make sure the Show header and the Show footer check boxes are selected.

    Graphic

  5. Set the Caption property to give the DataList a title (perhaps something like: ".NET Reference Authors and Titles").

  6. After configuring the DataList, Visual Studio will show you a representation of the format the query will use when it is rendered to the browser:

    Graphic

  7. Run the program to see how the DataList renders itself.

    Graphic