HomeDatabase ADO.NET 101: Data Rendering with a DataLis...
ADO.NET 101: Data Rendering with a DataList Control Introduction
This how-to tutorial describes displaying the data from a DataReader using the DataList Iterative data bound control. In an earlier tutorial, how to display data using the data bound RepeaterControl was described. Although this tutorial is self-contained, the reader will find it helpful to review the earlier tutorials covering ADO.NET.
The iterative RAD technique described in this tutorial offers flexible, free form formatting of displayed data. When the controls are bound to a data source, the three controls Repeater, DataList, and DataGrid loop through the data row-by-row, and apply a rendering template (html) on a row by row basis. The free formatting offers a great deal of flexibility, although it requires some effort to configure the control.
For fast retrieval of data from a database, the DataReader is unbeatable. However it is only suited for the Read-only, Forward-only type of data retrieval. The iterative controls can fire specialized events. In this tutorial we are only looking at binding the data to the DataReader and configuring the control.
Iterative Controls
The following picture shows the three controls in the VS 2003 IDE's toolbox. The DataList and DataGrid icons show intuitively that they are related to data.
What makes the DataList such a flexible tool is the large number of properties and methods available for the designer, as seen in the following class view for DataList.
On the DataListExample.aspx page, drop the DataList Control by clicking and dragging it to the design pane of the web page as shown. The properties window is also shown in this picture. By default it will be named DataList1. But it is better to change it to some meaningful name.
When the control is placed on the web form, the following code is added to the web page's HTML between the <form></form> tags as shown here with some default style information.
In the design pane you may right click and add templates, of which the ItemTemplate is a required (must) item. If you right click and pick the Edit Template drop down menu, the various templates on the DataList control can be edited.
IDE related details of DataList Control
In a manner very similar to the RepeaterControl, by just typing in a <, the intellisense's drop down menu will appear with a list of tags that can be inserted as shown here.
The header and footer templates serve the purpose of providing the information that is suggested by their names. For example, these include the column names of a table in the header and some aggregate information, or a date in the footer. The ItemTemplate is where the row after row of data comes in. The Header and Footer templates are rendered only once since they are needed only once. If they are not defined, they are not rendered. The Alternating ItemTemplate is a part of the same ItemTemplate, but helps with optionally rendering the alternate rows of ItemTemplate for better readability of data. Again, it is rendered only if it is defined, not otherwise. The ItemTemplate is mandatory, however.
Configuring the ItemTemplate
This is an important step because ItemTemplate is a required item. This part of the control is what displays the main data from the database.
Getting a DataReader to read data from a table in a SQL 2000 Server database will be considered. The details of reading the data were described in two earlier tutorials and hence will be summarized here. The next picture shows the data link properties of the OleDB Connection. The provider used is the MS OleDB Provider for SQL Server. The Data Link Window is configured for connecting to the pubs database on the server.
The SQLConnection1 on the web form will have the following for its connection string:
Now let's place a SqlCommand1 control on the web page. Set the connection string of this command to the one that was first added. For the CommandText the following query was chosen.
SELECT fname, lname, emp_id, hire_date FROM employee ORDER BY lname
Binding the DataList Control to data
The DataList control is very similar to the DataGrid control. The DataList must be bound to the data source. Since we are using the DataReader as the data source, the DataList must be bound to the DataReader. The following code makes this possible.
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
'Create a new SQL connection
Dim conn As New SqlConnection
conn = SqlConnection1
'open connection
conn.Open()
'declare a Sql Command
Dim cmd As SqlCommand
cmd = SqlCommand1
'declare a DataReader
Dim dr As SqlDataReader
dr = cmd.ExecuteReader
DataList2.DataSource = dr
'Bind data to control
DataList2.DataBind()
conn.close()
End Sub
ItemTemplate is an item that must be configured. The actual table cells in this template are shown in the html. This would appear to be similar to what you would have needed to bring the recordset values into a table cell using the ASP syntax <%...%>, enclosing the databound information. In this case however, you have Framework supported classes making this possible.
DataBinder is from the System.Web.UI.DataBinder class and Eval () is the method which takes the following arguments: the first argument is the Object container and the second a string expression. Each of these string expressions is coming from the data source's fields.
At this point the program has enough information to display the data in the DataReader. The UI would appear as follows:
The HeaderTemplate
The HeaderTemplate would normally be used for displaying the column headings in a readable text format. In this case fname would be substituted with First Name in the header template. The following picture shows how you may change the style of the various templates, and their individual properties of the DataList. The following HTML elements were added to produce the header information. In the UI the style of the header was slightly modified as shown.
As mentioned earlier, this is optional and is rendered in display only when defined in the source. The following html shows how this is formatted. It is the same as the ItemTemplate, except that the cell color is different. The ItemTemplate cells are also formatted so that there is a distinction between ItemTemplate and the AlternatingItemTemplate.
With the above modifications to the GUI, the design of the form with the data list appears as follows:
The displayed data will appear as follows (a truncated portion is shown):
Summary
Binding data from a DataReader to a DataList control was described in detail. Unlike what was necessary with the DataGrid control, additional HTML formatting has to be implemented to display the data. The System.Web.UI.DataBinder class and its method Eval() are used to facilitate the porting of the data to the control. Since DataReader was the data source, the updating of the data was not discussed.
Database 
ADO.NET 101: Data Rendering with a Repeater Control Introduction
