Silverlight Knowledge Base

Other DataBound Controls

• How To Set Up Your Own Power Station In Your Back Yard

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 . First, the GridView.

Using the GridView

1. Add a new Web Form to the DataBindORama site . Type in UseGridView for the name .

2. Drag a GridView from the Toolbox (it's under the Data controls) onto the form. Visual Studio will ask you to configure the GridView. Under the Choose Data Source option, select New Data Source . Choose a SQL Server database from the options and click OK (it'll use the default name of SqlDataSourcel). Visual Studio will ask you to specify a connection string. You can use the connection string created in the last exercise (it's in the configuration file) . This creates a SqlDataSource and puts it on the page for you.

When specifying the query, choose the DotNetReferences table and select the asterisk (*) to query for all the columns . Finally, enable paging, sorting, and selection on the GridView Configuration menu. After configuring the GridView, Visual Studio will show you a design-time representation of the format the query will use when it is rendered to the browser:

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

G http://IocaIhost:13183/UseGridView.aspK - Windows Internet Ewplorer

^ i.^ » I jgj http://localhost: 13183/UseGridView.aspx ■¿j Favorites | ■¿J Suggested Sites Wet. Slice Gallery -

$ http://localhost: 13183/UseGridView, aspx a [t>7

^ i.^ » I jgj http://localhost: 13183/UseGridView.aspx ■¿j Favorites | ■¿J Suggested Sites Wet. Slice Gallery -

$ http://localhost: 13183/UseGridView, aspx

	ID	Title	Autho rL astName	Auth orFirstName	Topic	Publisher
Select	2	MFC Internals	Shepherd	George	Desktop applications using Ca	Addis on-Wesley Longman
Select	C++ .NET	Shepherd	George	using Visual C++ during the era of managed code	Microsoft Press
Select	9	ASP.NET Step By Step 4	Shepherd	George	TJse the .NET framework to aandle HTTP requests	Microsoft Press
Select	56	.NET Assembly Programming	Holt	Holly	What's below IL?	Laser Printer press
Select	57	Integrating Turbo Pascal with .NET	Arts	Ties	Old school to the max	Landbor Press
Select	Developers	Baily	Josh	An alternative database approach	Tonash Press
Select	59	IL Programmer	Bam	Ed	All about the midwestern .NET movement	ILPress Books and Tapes
Select	60	IM Programming	Jaffe	Jon	Programming a chat application	IMProgramming Press
Select	61	Programming Without a .NET	Krout	Kelly	What it was like before th runtime	Pressed Books Press
Select	63	It's Is and 0s All the Way Down	Corets	Eva	History of.NET	BooksBooksBooks

^ Internet | Protected Mode: On

^ Internet | Protected Mode: On

4. Go back to Visual Studio and try formatting the GridViewto 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 in the GridView include AlternateRowStyle, PagerSettings, and PagerStyle. You can, if you like, choose to apply an auto-formatted style, which some ASP.NET controls (including GridView) provide for. The following graphic illustrates the UseGridView.aspx page with the Classic formatting style applied:

The GridView is useful for displaying tables in a format in which you can see all the rows and columns at once. Although 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.

Using the FormView

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

2. Drag a FormView from the Toolbox (it's under the Data controls) onto the form. Visual Studio will ask you to configure the FormView. Under the Choose Data Source option, select New Data Source, make it an SQL database, and click OK. Use the connection that's already available (it'll be listed as "ConnectionString" in the drop-down list) and click Next . When specifying the query, select the asterisk (*) from the DotNetReferences table to query for all the columns . Click Next to accept the query and Finish when asked to test the query

3. Select the AutoFormat option on the Configuration menu. Here you have the opportunity to apply a couple of predefined styles to the FormView. The example accompanying this text uses the Classic formatting style .

4. Enable paging by selecting Enable Paging on the FormView Configuration menu. Set the HeaderText property (in the Visual Studio Properties pane) 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:

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

|Done | [ | Internet | Protected Mode: On ■ \ 100% ■ ^

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.

A similar ASP.NET control is the DetailsView control. The DetailsView control allows you to present row data in a tabular format rather than using the more customizable format that FormView allows .

Using the DetailsView

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

2. Drag a DetailView from the Toolbox (it's under the Data controls) onto the form. Visual Studio will ask you to configure the DetailsView. Under the Choose Data Source option, select New Data Source and configure it similarly to the previous pages . For example, use the same connection string created earlier by Visual Studio . When specifying the query, select the asterisk (*) to select all the columns from the DotNetReferences table.

3. Select the AutoFormat option on the Configuration menu. As with the previous controls, you have the same opportunity here to apply a couple of predefined styles to the DetailsView. The example accompanying this text uses the Classic formatting style . In addition, use the HeaderText property to give the control a title (I used the header ".NET References") .

4. Select the Edit Fields option in the DetailsView Tasks pane. Select Auto-Generate Fields in the dialog box if it isn't already selected.

5. Enable paging in the DetailsView Tasks pane.

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:

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

Now for the DataList. The DataList control has been available since ASP.NET 1 .x It's been updated with later versions of ASP.NET to support declarative data binding. Here's a look at the DataList. Like the DetailsView, the DataList renders the data in a tabular form. Unlike DetailsView, DataList has no built-in paging capability.

Using the DataList

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

2. Drag a DataList from the Toolbox (it's under the Data controls) onto the form. Visual Studio will ask you to configure the DataList. Under the Choose Data Source option, select New Data Source and prepare the data source as in the previous exercises . Use the same connection string created earlier by Visual Studio . When specifying the query, select the asterisk (*) to select all the columns from the DotNetReferences table.

3. Select the AutoFormat option in the DataList Tasks pane . As with the other examples, here you also have the opportunity to apply a couple of predefined styles to the DataList. The example accompanying this text uses the Slate formatting style .

4. Open the DataList Properties dialog box in the DataList Tasks pane by selecting Property Builder. If they are not already selected, make sure the Show Header and the Show Footer check boxes are selected:

Set the Caption property to give the DataList a title (perhaps ".NET References and Titles") .

something like

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:

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

Although the classic data access technologies are here to stay, .NET version 3. 0 and later bring a new way to access and manage data—Language Integrated Query. The following section takes a look

0 0