Introduction

In this article, I’ll present a tutorial with an example: a way to use the DataList control in ASP.NET for displaying information/records from the database using SQL DataSource.

So, first, we will discuss ASP.NET data list control.

What is a data list control in ASP.NET?

The DataList control, just like the Repeater control, maybe a model-driven, lightweight control that acts as an instrumentality of continual information. The templates during this control area unit define the information that it'll contain. It is versatile in the sense that you simply will easily customize the display of 1 or many records that area unit displayed within the management. You've got a property within the DataList management known as RepeatDirection that may be used to customize the layout of the control.

For creating a database, you can follow this SQL query as per your requirements. In this article, I am creating one temp table with some duplicate records to demonstrate the data list control.

Create Table

CREATE TABLE #Employee (
    EmpID INT,
    EmpName NVARCHAR(50),
    EmpDept NVARCHAR(50),
    EmpCity NVARCHAR(50),
    Salary NVARCHAR(50),
    Designation NVARCHAR(50)
);

Insert Data into Table

INSERT INTO #Employee (EmpID, EmpName, EmpDept, EmpCity, Salary, Designation)
VALUES ('1', 'NIKUNJ SATASIYA', 'ASP.NET', 'SURAT', 'RS 18000', 'TL')
INSERT INTO #Employee (EmpID, EmpName, EmpDept, EmpCity, Salary, Designation)
VALUES ('1', 'HIREN DOBARIYA', 'ASP.NET', 'KHAMTA', 'RS 19000', 'TL')
INSERT INTO #Employee (EmpID, EmpName, EmpDept, EmpCity, Salary, Designation)
VALUES ('1', 'VIVEK GHADIYA', 'ANDROID', 'JAMNAGAR', 'RS 37000', 'TL')
INSERT INTO #Employee (EmpID, EmpName, EmpDept, EmpCity, Salary, Designation)
VALUES ('1', 'SNEHAL PATEL', 'IOS', 'SURAT', 'RS 45000', 'TL')
INSERT INTO #Employee (EmpID, EmpName, EmpDept, EmpCity, Salary, Designation)
VALUES ('1', 'PRATIK PANSURIYA', 'JAVA', 'RAJKOT', 'RS 33000', 'TL')
INSERT INTO #Employee (EmpID, EmpName, EmpDept, EmpCity, Salary, Designation)
VALUES ('1', 'SARAH DEMOLA', 'PHP', 'SURAT', 'RS 19000', 'TL')

Get Data From Table

SELECT * FROM #Employee

Drop Table

DROP TABLE #Employee

HTML Markup

The following markup language consists of associate ASP.NET DataList control and ASP.NET SqlDataSource control.

The SqlDataSource control is about with the subsequent properties.

ConnectionString

Name of the Connection String setting within the web.Config file.

<configuration>
  <connectionStrings>
    <add name="constr" connectionString="Data Source=.\SQL2005;Initial Catalog=northwind;integrated security=true"/>
  </connectionStrings>
  <system.web>
    <compilation debug="true" targetFramework="4.0"/>
  </system.web>
</configuration>

Selectcommand

The Select statement is to fetch the records from the Employee table of the Northwind database.

The ID of the SqlDataSource control is about the DataSourceID of the DataList control.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CS" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        .table
        {
            border: 1px solid #ccc;
            border-collapse: collapse;
            width: 200px;
        }
        .table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        .table th, .table td
        {
            padding: 5px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DataList ID="dlCustomers" runat="server" DataSourceID="SqlDataSource1" RepeatColumns="3" CellSpacing="3" RepeatLayout="Table">
            <ItemTemplate>
                <table class="table">
                    <tr>
                        <th colspan="2">
                            <b><%# Eval("EmpName") %></b>
                        </th>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <%# Eval("EmpDept") %>,
                            <%# Eval("EmpCity") %><br />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Salary:
                        </td>
                        <td>
                            <%# Eval("Salary") %>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Designation:
                        </td>
                        <td>
                            <%# Eval("Designation") %>
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:DataList>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:constr %>" SelectCommand="SELECT TOP 3 * FROM YOUR_TABLE_NAME"></asp:SqlDataSource>
    </form>
</body>
</html>

Output Screen

Output Screen