Displaying Data in a DataList Control

asp.net.ph

Home > Data Access in Web Forms > Displaying Information From a Database > Displaying Data in a DataList

Displaying Data in a Repeater Control Displaying Data in a DataGrid Control

While the Repeater is a general-purpose iterator, the <asp:DataList> control provides some additional features for customizing the layout of the list.

Unlike the Repeater, the DataList renders additonal elements outside of the template definition, like table rows and cells that can be used to control the layout of the list.

In addition, DataList supports RepeatColumns and RepeatDirection properties that specify whether data should be rendered in multiple columns, and in which direction ( vertical or horizontal ) to render the data items.

DataList also supports style attributes, such as font, color, border, etc., that enable richer formatting.

The following examples show how to access an SQL Server™ database that contains book titles and several key pieces of information about each book, and then displays the data using a DataList control.

The output has all the pertinent information for each book grouped together and the information for each book is presented in two columns following a left to right order.

NOTE: This sample illustrates using the SQL Server™ .NET Data Provider, though the same concepts apply to the corresponding OLEDB classes as well.

Import the proper namespaces into your page. This provides your code with access to the necessary classes.
```
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
```
NOTE: This example uses methods described in Calling Data Functions in Code Behind to connect and bind to a DataSource.
In the <head> of the Web Forms page, declare a reference to the script file which contains the data access functions.
```
<script language="C#" runat="server" src="~/shared/fetchData_sql.cs" />
```
Implement a Page_Load function within another <script runat="server"> code declaration block, essentially to do the following:
1. define the SQL query to use to fetch the data
2. fetch results of the query into a DataReader
3. bind the DataList to the DataReader
This is shown in the following steps.
```
<script language="C#" runat="server">
   void Page_Load ( object src, EventArgs e ) {
```
Define the SQL Select query to fetch the data from the Titles table.
```
      string query = "SELECT * FROM Titles";
```
Set the DataSource of the DataList control ( herein codenamed myList ) to the output of the fetchReader method, which returns the result of the query command in the form of a DataReader.
```
      myList.DataSource = fetchReader ( query );
```
Bind the DataList to the DataReader.
```
      myList.DataBind ( );
```
Close the script.
```
   }
</script>
```

Within the <body> of the Web Forms page, declare the opening tag of the DataList control, setting it up to display two columns of data.
```
<body>
<asp:datalist id="myList" repeatcolumns=2 runat="server">
```

Set up the contents of each DataList item using the ItemTemplate property. Each DataList item corresponds to a record in the data source. Define which fields in the data source you want rendered on the page and format the output of these fields using a databinding expression.

   <itemtemplate>
      <table cellpadding=10>
      <tr>
         <td valign="top">
            <a href='details_title.aspx?titleid=<%# Eval ( "title_id" ) %>’>
               <img align="top" alt="Click for details" border=0
                  src='<%# Eval ( "title_id", "/shared/images/title-{0}.gif" ) %>’>
            </a>
         </td>
         <td valign="top">
            <b>Title:</b> <%# Eval ( "title" ) %><br>
            <b>Category:</b> <%# Eval ( "type" ) %><br>
            <b>Publisher:</b> <%# Eval ( "pub_id" ) %><br>
            <b>Price:</b> <%# Eval ( "price", "$ {0}" ) %>
         </td></tr>
      </table>
   </itemtemplate>

NOTE: To avoid errors, the databinding expression must be written as a single line without any line breaks. The code examples shown here are done so only for readability.

Declare the closing tag of the DataList control and close the page.
```
</asp:datalist>
</body>
```

Show me

The below example shows a similar example but using instead an SqlDataSource control to connect to a data source.

Within the <body> of the Web Forms page, declare an <asp:sqldatasource> control with the following properties.

<asp:sqldatasource id="titles" runat="server"
   selectcommand = "SELECT * FROM Titles"
   connectionstring = "<%$ ConnectionStrings:aspnet %>"
   datasourcemode = "DataReader" />

Set up the DataList control as in the first example above, but specify a DataSourceId to link the DataList to the <asp:sqldatasource> control, and thus bind to the database defined in the data source control.
```
<asp:datalist id="myList" runat="server"
   datasourceid="titles">
```
To display the data, set up the contents of each DataList item as described in the first example above.

Show me

For more information, see Working with the DataList Control.

Displaying Data in a Repeater Control Displaying Data in a DataGrid Control

Monday, January 27, 2025

Displaying Data in a DataList Control

Binding Data To a DataList Using ADO.NET Classes

To access an SQL database

To display the data

Binding Data To a DataList Using a DataSource Control

Next Section