ASP.NET The DataList Control

|  | Search W3Schools : |

HOME | HTML | CSS | XML | JAVASCRIPT | ASP | PHP | SQL | MORE... |  | References | Examples | Forum | About

ADVERTISEMENTS XML Certification Download XML editor Custom Programming |  |

Table of contents

ASP.NET Tutorial
.NET HOME
.NET Intro
.NET vs ASP
.NET Install
.NET Pages
.NET Controls
.NET Events
ASP.NET Forms
.NET Forms
.NET ViewState
asp:TextBox
asp:Button
ASP.NET Binding
Data Binding
ArrayList
Hashtable
SortedList
XML Files
asp:Repeater
asp:DataList
ASP.NET Database
.NET DB Connection
ASP.NET 2.0
2.0 New Features
2.0 Master Pages
2.0 Navigation
References
HTML Controls
Web Controls
Validation Controls
Examples
ASP.NET Examples

Selected Reading

Web Statistics
Web Glossary
Web Hosting
Web Quality
W3Schools Tutorials
W3Schools Forum
Helping W3Schools

# ASP.NET - The DataList Control

The DataList control is, like the Repeater control, used to display a repeated list of items that are bound to the control. However, the DataList control adds a table around the data items by default.

## Examples

DataList control

DataList control with styles

DataList control with <AlternatingItemTemplate>

## Bind a DataSet to a DataList Control

The DataList control is, like the Repeater control, used to display a repeated list of items that are bound to the control. However, the DataList control adds a table around the data items by default. The DataList control may be bound to a database table, an XML file, or another list of items. Here we will show how to bind an XML file to a DataList control.

We will use the following XML file in our examples ("cdcatalog.xml"):

    <?xml version="1.0" encoding="ISO-8859-1"?>

    <catalog>
    <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
    </cd>
    <cd>
    <title>Hide your heart</title>
    <artist>Bonnie Tyler</artist>
    <country>UK</country>
    <company>CBS Records</company>
    <price>9.90</price>
    <year>1988</year>
    </cd>
    <cd>
    <title>Greatest Hits</title>
    <artist>Dolly Parton</artist>
    <country>USA</country>
    <company>RCA</company>
    <price>9.90</price>
    <year>1982</year>
    </cd>
    <cd>
    <title>Still got the blues</title>
    <artist>Gary Moore</artist>
    <country>UK</country>
    <company>Virgin records</company>
    <price>10.20</price>
    <year>1990</year>
    </cd>
    <cd>
    <title>Eros</title>
    <artist>Eros Ramazzotti</artist>
    <country>EU</country>
    <company>BMG</company>
    <price>9.90</price>
    <year>1997</year>
    </cd>
    </catalog>

Take a look at the XML file: cdcatalog.xml

First, import the "System.Data" namespace. We need this namespace to work with DataSet objects. Include the following directive at the top of an .aspx page:

    <%@ Import Namespace="System.Data" %>

Next, create a DataSet for the XML file and load the XML file into the DataSet when the page is first loaded:

    <script runat="server">
    sub Page_Load
    if Not Page.IsPostBack then
      dim mycdcatalog=New DataSet
      mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
    end if
    end sub

Then we create a DataList in an .aspx page. The contents of the <HeaderTemplate> element are rendered first and only once within the output, then the contents of the <ItemTemplate> element are repeated for each "record" in the DataSet, and last, the contents of the <FooterTemplate> element are rendered once within the output:

    <html>
    <body>

    <form runat="server">
    <asp:DataList id="cdcatalog" runat="server">

    <HeaderTemplate>
    ...
    </HeaderTemplate>

    <ItemTemplate>
    ...
    </ItemTemplate>

    <FooterTemplate>
    ...
    </FooterTemplate>

    </asp:DataList>
    </form>

    </body>
    </html>

Then we add the script that creates the DataSet and binds the mycdcatalog DataSet to the DataList control. We also fill the DataList control with a <HeaderTemplate> that contains the header of the table, an <ItemTemplate> that contains the data items to display, and a <FooterTemplate> that contains a text. Note that the gridlines attribute of the DataList is set to "both" to display table borders:

    <%@ Import Namespace="System.Data" %>

    <script runat="server">
    sub Page_Load
    if Not Page.IsPostBack then
      dim mycdcatalog=New DataSet
      mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
      cdcatalog.DataSource=mycdcatalog
      cdcatalog.DataBind()
    end if
    end sub
    </script>

    <html>
    <body>

    <form runat="server">
    <asp:DataList id="cdcatalog"
    gridlines="both" runat="server">

    <HeaderTemplate>
    My CD Catalog
    </HeaderTemplate>

    <ItemTemplate>
    "<%#Container.DataItem("title")%>" of
    <%#Container.DataItem("artist")%> -
    $<%#Container.DataItem("price")%>
    </ItemTemplate>

    <FooterTemplate>
    Copyright Hege Refsnes
    </FooterTemplate>

    </asp:DataList>
    </form>

    </body>
    </html>

## Using Styles

You can also add styles to the DataList control to make the output more fancy:

    <%@ Import Namespace="System.Data" %>

    <script runat="server">
    sub Page_Load
    if Not Page.IsPostBack then
      dim mycdcatalog=New DataSet
      mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
      cdcatalog.DataSource=mycdcatalog
      cdcatalog.DataBind()
    end if
    end sub
    </script>

    <html>
    <body>

    <form runat="server">
    <asp:DataList id="cdcatalog"
    runat="server"
    cellpadding="2"
    cellspacing="2"
    borderstyle="inset"
    backcolor="#e8e8e8"
    width="100%"
    headerstyle-font-name="Verdana"
    headerstyle-font-size="12pt"
    headerstyle-horizontalalign="center"
    headerstyle-font-bold="true"
    itemstyle-backcolor="#778899"
    itemstyle-forecolor="#ffffff"
    footerstyle-font-size="9pt"
    footerstyle-font-italic="true">

    <HeaderTemplate>
    My CD Catalog
    </HeaderTemplate>

    <ItemTemplate>
    "<%#Container.DataItem("title")%>" of
    <%#Container.DataItem("artist")%> -
    $<%#Container.DataItem("price")%>
    </ItemTemplate>

    <FooterTemplate>
    Copyright Hege Refsnes
    </FooterTemplate>

    </asp:DataList>
    </form>

    </body>
    </html>

## Using the <AlternatingItemTemplate>

You can add an <AlternatingItemTemplate> element after the <ItemTemplate> element to describe the appearance of alternating rows of output. You may style the data in the <AlternatingItemTemplate> section within the DataList control:

    <%@ Import Namespace="System.Data" %>

    <script runat="server">
    sub Page_Load
    if Not Page.IsPostBack then
    dim mycdcatalog=New DataSet
    mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
    cdcatalog.DataSource=mycdcatalog
    cdcatalog.DataBind()
    end if
    end sub
    </script>

    <html>
    <body>

    <form runat="server">
    <asp:DataList id="cdcatalog"
    runat="server"
    cellpadding="2"
    cellspacing="2"
    borderstyle="inset"
    backcolor="#e8e8e8"
    width="100%"
    headerstyle-font-name="Verdana"
    headerstyle-font-size="12pt"
    headerstyle-horizontalalign="center"
    headerstyle-font-bold="True"
    itemstyle-backcolor="#778899"
    itemstyle-forecolor="#ffffff"
    alternatingitemstyle-backcolor="#e8e8e8"
    alternatingitemstyle-forecolor="#000000"
    footerstyle-font-size="9pt"
    footerstyle-font-italic="True">

    <HeaderTemplate>
    My CD Catalog
    </HeaderTemplate>

    <ItemTemplate>
    "<%#Container.DataItem("title")%>" of
    <%#Container.DataItem("artist")%> -
    $<%#Container.DataItem("price")%>
    </ItemTemplate>

    <AlternatingItemTemplate>
    "<%#Container.DataItem("title")%>" of
    <%#Container.DataItem("artist")%> -
    $<%#Container.DataItem("price")%>
    </AlternatingItemTemplate>

    <FooterTemplate>
    &copy; Hege Refsnes
    </FooterTemplate>

    </asp:DataList>
    </form>

    </body>
    </html>

Ektron CMS400.NET Version 7.6 delivers all of the flexibility and features you need to deploy the Web site you want, quickly and efficiently. learn more...

6 ways to take your site to the next level with Ektron:

| Create site stickiness through social networking. Keep it personal, relevant and interactive and they'll come back for more.
| Keep it open. Your site needs to be ready and able to connect to outside services. Ektron's open API gives you maximum flexibility.
| Streamline content and document management. Users need to quickly and intuitively find and add information.
| Empower your content authors. Reduce IT bottlenecks by allowing business users to create and edit Web content and forms.
| Climb to the top of search rankings. SEO tools, URL aliasing and eCommerce for your digital marketing strategy
| Add powerful Web 2.0 tools like blogs, wikis, forums, geo-mapping, rating systems and RSS feeds easily.

See why there are 20,000+ Ektron integrations worldwide. Request an INSTANT DEMO or download a FREE TRIAL today.

WEB HOSTING
Domain Name Registration & More!
$15 Domain Name Registration Save $20 / year!
Buy UK Domain Names Register Domain Names
Cheap Domain Names Cheap Web Hosting
Best Web Hosting
PHP MySQL Hosting
Top 10 Web Hosting
UK Reseller Hosting
Web Hosting
FREE Web Hosting

WEB BUILDING
Website Templates Flash Templates Website Builder Internet Business Opportunity
Custom Programming
FREE Trial or Demo Web Content Manager Forms,Web Alerts,RSS
Download XML editor
FREE Flash Website
FREE Web Templates

EDUCATION
US Web Design Schools
HTML Certification
JavaScript Certification
XML Certification
PHP Certification
ASP Certification

HOME or Top of Page |  | Printer Friendly
W3Schools is for training only. We do not warrant the correctness of its content. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy. Copyright 1999-2009 by Refsnes Data. All Rights Reserved.