Tutorials
- ASP.NET
- C#
- C++
- Java
- JavaScript
- MySQL
- PHP
- Ruby
- SQL
- VB.NET
Code
How To
News
Forums
Pictures
Videos
Icons
Newsgroups

Building a C# Chat Client and Server

A step by step tutorial teaching you how to create your own chat client and chat server easily in C#, for local networks or the Internet.

in C# Programming Tutorials

Getting Hard Drive Information

A C# tutorial showing you how to make use of WMI to extract information on disk drives, such as model, capacity, sectors and serial number.

in C# Programming Tutorials

UPS Shipping Calculator

This tutorial will teach you how to calculate the shipping cost based on the weight, height, length and depth of the box, the distance and the UPS service type.

in PHP Programming Tutorials

Create Your Own Rich Text Editor

Creating a Rich Text Editor using JavaScript is easier to do than you might think, thanks to the support of modern browsers; this tutorial will walk you through it.

in JavaScript Programming Tutorials

Tutorials

Programming Tutorials

ActionScript (5)
ASP (7)
ASP.NET (28)
Assembly (1)
C (6)
C# (132)
C++ (33)
CSS (6)
General (4)
HTML (6)
Java (28)
JavaScript (38)
MySQL (2)
Objective C (1)
Pascal (1)
PHP (61)
Python (3)
Ruby (18)
Silverlight (1)
SQL (8)
VB.NET (5)
Visual Basic (3)

IT Jobs

From CareerBuilder

Geekpedia » ASP.NET Tutorials » Basics of the DataList control

Basics of the DataList control

In this article, we're going to study the DataList control which is one of the most often used controls provided by ASP.NET.

On Tuesday, May 3rd 2005 at 04:07 AM

By Andrew Pociu (View Profile)

(Rated 3.7 with 17 votes)

Contextual Ads

More ASP.NET Resources

Binding the DataList to an array

The DataList, DataGrid and Repeater control are similar in their behavior; they all connect to a data source from which they retrieve data to display as a repeated list of items.
The DataList control uses HTML tables to format the data provided by the data source. The data source can be a SQL database, an XML file or an array.

This is the simplest task you can accomplish to see the DataList at work.

Fire up Visual Studio .NET and start a new project called TheDataList, most probably located at http://localhost/TheDataList.

On the newly created WebForm drag a DataList from the Toolbox:

We're going to use this DataList for binding to the array and later to an XML file and a SQL database.

Get into the code of the WebForm (WebForm1.aspx.cs). Here, in the Page_Load event we're going to create the array and bind it to the DataList. All this can be done using the following code:

private void Page_Load(object sender, System.EventArgs e)

{

   string[] CarList =

      {

      "Ford Freestar",

      "Saab 9-5",

      "Toyota 4Runner"

      };

   DataList1.DataSource = CarList;

   DataList1.DataBind();

}

In the code, we can see that an array is being created (CarList), which holds three string values. Further, we set the source of the DataList (DataList1) to the array by setting the DataSource property. Finally we bind the DataList by using DataBind().

We're not yet finished, we have one more step to take before compiling.

Open WebForm1.aspx. Inside Form1 you can see the tag for DataList1 with a few attributes:

<asp:DataList id="DataList1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server">asp:DataList>

We need to change the tag to this one:

<asp:DataList id="DataList1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server">

<ItemTemplate>

<%# Container.DataItem %>

ItemTemplate>

asp:DataList>

As you can see here, inside the DataList1 tag, which is left unchanged, we added an ItemTemplate tag. The ItemTemplate tag defines a template for every item inside the DataList. What's inside this tag actually defines the template for that item. In this case inside it we have <%# Container.DataItem %> which outputs the content provided by the data source (in our case the array). You can consider Container.DataItem to be similar to echo in PHP or document.write in JavaScript.

Now you can compile the web application and see the results in the browser window:

The content of the array is displayed. Behing these three types of cars there's a DataList and you can check this out by viewing the source of the file from the browser window. To view the source use Right click -> View Source in Internet Explorer. There you can see the code that ASP.NET actually creates, typically for a DataList it creates an HTML table:

Ford Freestar

Saab 9-5

Toyota 4Runner

Changing the appearance of the DataList

In HTML, tables can suffer major changes using CSS styles. In ASP.NET you can change the style of a table created with the DataList by using templates.

Let's change some attributes for the DataList tag so we can see how they reflect the generated HTML code. To look more like a table we can set some borders. This is done by using the GridLines attribute, like in the following example:

<asp:DataList id="DataList1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server" RepeatLayout="Flow" GridLines="Both">asp:DataList>

The GridLines attribute can have four different values. Both is used to draw vertical and horizontal borders, but you can also draw only vertical or horizontal borders by using the corespondent values - Vertical or Horizontal. By default no borders are drawn, so the attribute is set to None. Using borders, the table looks better but now some cellpadding and cellspacing is needed. These attributes are well known in HTML but how do we set them in the DataList tag? The same as we do in HTML, the tags being CellPadding and CellSpacing. Here's an example of using these tags on our DataList:

<asp:DataList id="DataList1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server" RepeatLayout="Flow" GridLines="Both" CellPadding="12" CellSpacing="8">asp:DataList>

The result is not very esthetic but we're getting close:

For the three results we have we don't neccesarly need a table, so why use one and not use span () tags? We can accomplish that simply by changing an attribute. Back to the WebForm1.aspx file and at the DataList tag let's add the attribute that I was talking about:

<asp:DataList id="DataList1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server" RepeatLayout="Flow">asp:DataList>

By default, RepeatLayout has the value Table and therefore it creates a table. But now because it's set to Flow the items are displayed inside span tags. Run the web application again and view the generated code:

Ford Freestar

Saab 9-5

Toyota 4Runner

For each item there's a span tag and for the entire set of items there's another span tag. The code is cleaner and therefore you're sometimes better with it.

Working with templates and styles

We're getting back to using tables, because that's where applying templates gets more interesting, so remove the RepeatLayout tag. For clarity, usually the rows of a table have a top row which describes what the respective column is about. In our case we could type Car models in there because that column holds different car models. This is done by using the HeaderTemplate tag:

The result being this one:

Not to good because the header looks exactly like an item. To fix this you'll have to learn to use styles. In our case, the HeaderStyle tag.

<asp:DataList id="DataList1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server" GridLines="Both" CellPadding="12" CellSpacing="8">

<HeaderTemplate>

Car models

HeaderTemplate>

<HeaderStyle BackColor="#d5edc4" Font-Name="Verdana" Font-Size="8" Font-Bold=True />

<ItemTemplate>

<%# Container.DataItem %>

ItemTemplate>

asp:DataList>

The HeaderStyle tag has many attributes, which can be set to change the style of the table header, BackColor being just on of them. You can go ahead and experiment with the others. You can even use a predefined CSS class to apply to the header.

The same way styles can be applied to items. I don't think you need any guidance on this because it's very similar. Use a ItemStyle tag instead of the HeaderStyle - the attributes are the same so you don't have to know anything else.

What I should specify is that styles can also be applied by using other methods. For example instead of adding a HeaderStyle tag inside the DataList tag, you can specify the styles as attributes of the DataList tag:

<asp:DataList id="DataList1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server" GridLines="Both" CellPadding="12" CellSpacing="8" HeaderStyle-BackColor="#d5edc4" HeaderStyle-Font-Name="Verdana" HeaderStyle-Font-Size="8" HeaderStyle-Font-Bold=True>

The drawback of using this method is that the DataList tag tends to get a bit long; using style tags is a more organized way of accomplishing the same thing.

There are more things to say about using templates and styles with the DataGrid but you can figure them out easy, and mostly thanks to IntelliSense. For example, you can see there's also a FooterTemplate tag that acts the same as the header just that it displays the content below the table. Or you could notice the AlternatingItemTemplate and AlternatingItemStyle tag which, if you didn't figured it out yet, can be used to alternate the styles of the rows in the table so they can be easy to follow. You can see this effect almost on all the big tables, usually the alternating row has the background color of a different shade than the normal row.

Binding the DataList to an XML file

We managed to bind the DataList to an array and change its style. In this article I'm trying to cover a little bit of everything and I considered binding the DataList to an XML file interesting.

First thing we need is an XML file. From the Solution Explorer right click the project and choose Add -> New Item. From the navigation tree on left open Data folder and select XML File. In the Name text box enter Cars.xml. Click Open and the file is now added to the project. Let's add some simple XML tags that we're going to use.

xml version="1.0" encoding="utf-8" ?>

   <Cars>

      <Car>

         <Producer>

         Ford

         Producer>

         <Model>

         Freestar

         Model>

      Car>

      <Car>

         <Producer>

         Saab

         Producer>

         <Model>

         9-5

         Model>

      Car>

      <Car>

         <Producer>

         Toyota

         Producer>

         <Model>

         4Runner

         Model>

      Car>

Cars>

As you can see this is more organized than using an array. Now we'll have to change the code for WebForm1.aspx and WebForm1.aspx.cs. First let's change the code-behind file (WebForm1.aspx.cs). Delete the content of the Page_Load event and use the following piece of code:

private void Page_Load(object sender, System.EventArgs e)

{

   System.Data.DataSet DS = new DataSet();

   DS.ReadXml(MapPath("Cars.xml"));

   DataList1.DataSource = DS;

   DataList1.DataBind();

}

We can't direcly bind the XML file to the DataList, we must first pass it through a DataSet. The DataSet is able to read and interpret the XML tags right, so that's why we bind the DataList to the DataSet.

Now let's go into WebForm1.aspx file and change a few things there also. So inside Form1 use the following tags to define the DataList:

<asp:DataList id="DataList1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" runat="server" GridLines="Both" CellPadding="12" CellSpacing="8">

<HeaderTemplate>

Car models

HeaderTemplate>

<HeaderStyle BackColor="#d5edc4" Font-Name="Verdana" Font-Size="8" Font-Bold=True />

<ItemTemplate>

<%# DataBinder.Eval(Container.DataItem, "Producer")%>

<%# DataBinder.Eval(Container.DataItem, "Model")%>

ItemTemplate>

asp:DataList>

Only one change has been made - inside the ItemTemplate tag we now have two tags, each one outputs the contents of one XML tag. You can recognize the names of the XML tags (Producer and Model). Now there's only one thing left to do - compile.

You can see in the browser window that the result is actually the same as when we used the array. Only that now we used an external XML file that is much more organized than an array.

Further, there are many other things that can be done, like selecting or editing items using the DataList but that might be the subject of another article.

Before closing I should remind you to also check out the Repeater and the DataGrid controls so that you know which one to use when. MSDN has a good tutorial covering the decision of using either the DataGrid, the DataList or the Repeater at this URL.

Digg It!

Del.icio.us Reddit

StumbleIt

Newsvine

Furl

BlinkList

Rate this tutorial

Current Comments

by Rajeev Kumar on Tuesday, July 26th 2005 at 04:50 AM

Well documented contents.

by PLaYeR01 on Wednesday, March 29th 2006 at 05:06 PM

I would like to see your example in a diferent way. Instead of displaying lines, displaying columns, like:

car01 car02 car03
car04 car05 car06
car07 car08 car..

Regards,
PLaYeR01

by kanishka on Thursday, September 18th 2008 at 02:28 PM

thank u for providing me information on List View.
I want to know how i can display data in datalist in Newsletter layout