ASP.NET DataList Control: Displaying Data in List Format

Learn how to use the ASP.NET DataList control to display data from a DataTable or database table in a list format on your web pages. This guide covers the DataList's features, data binding, and customization options.

ASP.NET DataList

The ASP.NET DataList control is a lightweight, server-side control used to display data in a list format on web pages. It retrieves data from a data source, which can be either a DataTable or a database table.

Example: Display DataList Using DataTable

This example demonstrates using a DataList control to display data from a DataTable. The implementation includes an ASP.NET Web Form and its corresponding CodeBehind.

Code: DataListExample2.aspx

Syntax

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataListExample2.aspx.cs"
Inherits="DataListExample.DataListExample2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>DataList Example
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <p>The DataList shows data of DataTable</p>
        </div>
        <asp:DataList ID="DataList1" runat="server">
            <ItemTemplate>
              <table cellpadding="2" cellspacing="0" border="1" style="width: 300px; height: 100px; border: dashed 2px #04AFEF; background-color: #FFFFFF">
                  <tr>
                  <td>
                        <b>ID: </b><span class="city"><%# Eval("ID") %></span><br />
                        <b>Name: </b><span class="postal"><%# Eval("Name") %></span><br />
                        <b>Email: </b><span class="country"><%# Eval("Email")%></span><br />
                        </td>
                  </tr>
                </table>
              </ItemTemplate>
        </asp:DataList>
      </form>
</body>
</html>

CodeBehind: DataListExample2.aspx.cs

Syntax

using System;
using System.Data;
using System.Web.UI;

namespace DataListExample
{
    public partial class DataListExample2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable table = new DataTable();
            table.Columns.Add("ID");
            table.Columns.Add("Name");
            table.Columns.Add("Email");
            table.Rows.Add("101", "Sachin Kumar", "sachin@example.com");
            table.Rows.Add("102", "Peter", "peter@example.com");
            table.Rows.Add("103", "Ravi Kumar", "ravi@example.com");
            table.Rows.Add("104", "Irfan", "irfan@example.com");
            DataList1.DataSource = table;
            DataList1.DataBind();
        }
    }
}

Output:

Output

----------------------------------------
| ID: 101    Name: Sachin Kumar        |
| Email: sachin@example.com            |
----------------------------------------
| ID: 102    Name: Peter               |
| Email: peter@example.com             |
----------------------------------------
| ID: 103    Name: Ravi Kumar          |
| Email: ravi@example.com              |
----------------------------------------
| ID: 104    Name: Irfan               |
| Email: irfan@example.com             |
----------------------------------------

Example: Display DataList Using a Database

This example demonstrates configuring a DataList control to display data retrieved from a database table.

Steps:

  1. Add a Web Form to the project and drag a DataList onto it.
  2. Configure the database connection and set a Data Source.
  3. Use a SQL query to fetch data and bind it to the DataList.

Code: DataListExample.aspx

Syntax

<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="DataListExample.aspx.cs" Inherits="AdoNetExample.DataListExample" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DataList Example with Database</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1">
            <ItemTemplate>
                Name: <asp:Label ID="nameLabel" runat="server" Text='<%# Eval("name") %>' /><br />
                Email: <asp:Label ID="emailLabel" runat="server" Text='<%# Eval("email") %>' /><br />
                Contact: <asp:Label ID="contactLabel" runat="server" Text='<%# Eval("contact") %>' /><br />
            </ItemTemplate>
        </asp:DataList>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:StudentConnectionString %>"
            SelectCommand="SELECT * FROM [student]">
        </asp:SqlDataSource>
    </form>
</body>
</html>

Output:

Output

----------------------------------------
| Name: Alex Johnson                  |
| Email: alex@example.com             |
| Contact: 1234567890                 |
----------------------------------------
| Name: Maria Gomez                   |
| Email: maria@example.com            |
| Contact: 9876543210                 |
----------------------------------------