How the 3 Data Web Controls display their data ASP.NET 2.0 ships with 3 new data web controls that make displaying data from a datasource such as a SQL Server or Access database relatively easy. The 3 data web controls are the: Gridview Datalist Repeater This article isn’t concerned with the list of capabilities or properties of each particular control but with how the controls render in your browser. The built in capabilities of each control such as paging and sorting is for another future article.

Article contributed by Imar Spaanjaars author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004.

The Gridview is the most popular and also the most rigid in appearance of the 3 web controls. For each record returned by the datasource a HTML table row is rendered, and each column field returned is displayed in a table cell. The Gridview offers plenty of options to customize the look of the table. Figure 1 shows a Gridview in action returning 2 records from a datasource, including the product image, its name, quantity, price and overall price.

Figure 1

Directly below is the browser's source code for the Gridview. Notice the HTML table, table rows and cells that the Gridview outputs.

The Datalist control is not as rigid as the Gridview. By default the Datalist displays it data in a HTML table though with the repeatcolumns property you can set how many datasource records should appear per HTML table row in a table cell.

Figure 2 below shows an example of how the Datalist control can work. The screenshot shows a shopping cart solution that conventionally needs to display 3 records per row. The Datalist’s repeatcolumns property is set to 3 and the repeatlayout property set to horizontal.

Figure 2

The Repeater control is the most flexible of the data controls as it doesn’t add any HTML tags other than those you hard code in the templates it provides. When you need to control the exact HTML that is rendered then this maybe is the control to go for.

An example of where you might use the Repeater is to create a navigation menu using the unordered list <ul> and listitem <li> HTML tags.

For instance the screenshot in Figure 2 below shows a navigation menu for our shopping cart solution. The categories retrieved for watches such as 'Baume and Mercier' are displayed as the anchor text links.

Figure 2

The code below shows how templates are used to control the layout. The HeaderTemplate opens the UL tag and the footer template closes it </ul>. The ItemTemplate creates a listitem <li> and hyperlink to 'shopcategories.aspx' passing a querystring, namely the ID of the category. The ItemTemplate code will be repeated for each record returned by our datasource. Don't worry if it's all double dutch we're more concerned with the control's basic display layout capabilities than the actual code and templates.

In our browser the code above would render as the standard HTML below.

Hopefully the tutorial has given you a basis as to how gridviews, datalists and repeaters render and display datasource records in a browser.

Site developed by Michael Wall - Web Design Belfast N.Ireland.
Copyright © 2000-2008. All rights reserved.