DataList Control in ASP.NET - Part 1
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 on every points of 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.
<%@ 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 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 take a look how it is?
<%@ 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>
I above example, DataList control include a RepeatLayout property
that has the value Flow. Each movie title is rendered in a <span> tag
followed by a line-break tag (<br>).
·
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: Continue
in Next Part.
Comments
Post a Comment