ASP .NET Tutorial
ASP.NET Web Forms
ASP.NET Validation
MVC Tutorial
ASP.NET Razor
Interview Questions
- asp.net-interview

ASP.NET DataList

The ASP.NET DataList control is a light weight server side control that works as a container for data items. It is used to display data into a list format to the web pages.

It displays data from the data source. The data source can be either a DataTable or a table from database.

Here, first, we are creating DataList that gets data from a DataTable. This example includes the following files.

ASP.NET DataList Example with DataTable

// DataListExample2.aspx

<%@ 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></title>
</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

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
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:

It produces the following output to the browser.

ASP.NET DataList Example with database

This example gets data from the database table and includes the following steps.

1) Add a Web Form

Add a web form to drag the DataList over it as we did in the following screen shot.

Select DataList from the data category of the toolbox.

Drag the DataList to the form. After dragging, it looks like the following.

Now, we need to configure database connection. Click on it and set new data source.

It will pop up a new window with various Data Sources. Select SQL database and click ok.

After selecting Data Source, now, we need to select data connection. But before proceeding further add connection string to the web.config file.

// web.config

<connectionStrings>
    <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\MSSQLLocalDB;
	AttachDbFilename=|DataDirectory|\aspnet-AdoNetExample-20170712102014.mdf;
	Initial Catalog=aspnet-AdoNetExample-20170712102014;Integrated Security=True"
      providerName="System.Data.SqlClient" />
    <add name="StudentConnectionString" 
	connectionString="Data Source=DESKTOP-EDFPJEL;Initial Catalog=Student;Integrated Security=True"
      providerName="System.Data.SqlClient" />
  </connectionStrings>

Data Source is the name of the connection that is required to connect SQL Server. It can be different for other computer systems.

After clicking next, it asks to configure select statement.

It allows us to select number of columns to fetch custom record. It also provides * option to select all columns records.

Now, test the configured query, is it working or not, as we did in the below screenshot.

After finishing configuration, our DataList looks like this:

This "DataListExample.aspx" file contains the following code.

<%@ 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></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <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 />
<br />
            </ItemTemplate>
        </asp:DataList>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ 
        ConnectionStrings:StudentConnectionString %>" 
		SelectCommand="SELECT * FROM [student]"></asp:SqlDataSource>
    </form>
</body>
</html>

Output:

This application produces the following output.