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 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.


Similar Articles