How To Use DataList Control In ASP.NET With Example in C#

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

• Table: this is often the default layout. The Table layout renders the DataList as an associate hypertext markup language (HTML) Table and it renders within the Table Cell. The number of Cells in every row will be set using the Repeat Columns property.
• Flow: The Flow layout doesn't render the DataList as any markup language component. All the DataList things are rendered directly even as for how the Repeater control repeats its things.
• OrderedList and UnorderedList: The OrderedList and UnorderedList layouts render the DataList as markup language Ordered List and Unordered List. But in .Net 4.0 and higher than these aren't supported any longer.
• DataList management and Templates: The DataList control makes use of the subsequent templates.
• HeaderTemplate: The content of this example won't be recurrent and can be placed in the topmost position, i.e., the head section of the DataList control.
• ItemTemplate: The contents of this example are recurrent for every record present in its DataSource.
• AlternatingItemTemplate: AlternatingItemTemplate is used for adding alternate things. It's used together with ItemTemplate, usually for displaying a unique style for alternating things.
• SeparatorTemplate: This example is used to feature an extractor between 2 things of the DataList control.
• FooterTemplate: The content of this example won't be continual and can be placed at the bottom-most position i.e. footer section of the DataList control.

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