Introduction
The DataList control, like the Repeater control, is template driven. Unlike the
Repeater control, by default, the DataList renders an HTML table. In this series
of articles we will discuss every point of the DataList Control.
Displaying Data with DataList Control
To display data with the DataList control, we must supply the control with an
ItemTemplate. The contents of the ItemTemplate are rendered for each data item
from the data source. For example, the page given below uses a DataList to
display the contents of the Movies database table.
![Display-data-in-datalist-control-in-vb.net.gif]()
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<asp:DataList
id="dlstMovies"
DataSourceID="SqlDataSource1"
Runat="server">
<ItemTemplate>
<br />
<b><%#Eval("Title")%></b>
<br />
Directed by:
<%#Eval("Director") %>
<br />
Box Office Totals:
<%# Eval("BoxOfficeTotal")%>
<br />
</ItemTemplate>
</asp:DataList>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT
Id,Title,Director,BoxOfficeTotal FROM Movies">
</asp:SqlDataSource>
</form>
</body>
</html>
The DataList in the above example renders an HTML table. Each data item is
rendered into a separate table cell ("<td>" tag). The rendered output of the
DataList control looks like this:
<table id="dlstMovies" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td>
<br />
<b>CHALTE CHALTE</b>
<br />
Directed by:
ABHIMANYU
<br />
Box Office Totals:
12000000
<br />
</td>
</tr><tr>
<td>
<br />
<b>ROCKY</b>
<br />
Directed by:
SINHA
<br />
Box Office Totals:
75636547
<br />
</td>
</tr><tr>
<td>
<br />
<b>SUNDAY</b>
<br />
Directed by:
SAHRUKH
<br />
Box Office Totals:
86746364
<br />
</td>
</tr>
</table>
The default behavior of the DataList control is to render an HTML table. We can
override this default behavior and display the contents of each data item in a
separate HTML "<span>" tag. Let's have a look at how that is; see:
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<asp:DataList
id="dlstMovies"
DataSourceID="SqlDataSource1"
RepeatLayout="Flow"
Runat="server">
<ItemTemplate>
<%#Eval("Title")%>
</ItemTemplate>
</asp:DataList>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
SelectCommand="SELECT
Id,Title,Director,BoxOfficeTotal FROM Movies">
</asp:SqlDataSource>
</form>
</body>
</html>
In above example, the DataList control includes a RepeatLayout property that has
the value Flow. Each movie title is rendered in a "<span>" tag followed by a
line-break tag ("<br>").
The RepeatLayout property accepts one of the following two values:
-
Table Data Items
are rendered in HTML table cells.
-
Flow Data Items
are rendered in HTML <span> tags.
Here is the code in HTML:
<span id="dlstMovies"><span>
CHALTE CHALTE
</span><br /><span>
ROCKY
</span><br /><span>
SUNDAY
</span></span>
Note: This
article is continued in the next part.