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.
This example shows 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" %>
- In the <
head> of the Web Forms page, implement a Page_Load function within a <script runat="server"> code declaration block that, essentially:
- establishes a connection to the database,
- creates an instance of a DataReader to contain the database information,
- and then binds the DataList control to the Datareader.
This is shown in the following steps.
<script language="C#" runat="server">
void Page_Load ( object src, EventArgs e ) {
- Set up a connection to the database, in this case the SQL sample pubs database.
SqlConnection myConn = new SqlConnection
( "server=(local)//NetSDK; trusted_connection=yes; database=pubs" );
- Define the SQL Select query that will be used to fetch the data from the Titles table.
SqlCommand myCmd = new SqlCommand ( "SELECT * FROM pubs_Titles", myConn );
- Open the connection.
myConn.Open ( );
- Set the DataSource of the DataList control ( herein codenamed myList ) to the output of the ExecuteReader method. This method returns the result of the query command in the form of a DataReader, which we bind directly to the DataList.
myList.DataSource = myCmd.ExecuteReader ( );
myList.DataBind ( );
- Close the data connection.
myConn.Close ( );
}
</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", "/asp.net.ph/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
For more information, see Working with the DataList Control.