April 8, 2021

Programmingempire

To illustrate the DataList control, in this article, I will demonstrate how to create a DataList control. Basically, it is A Simple Example of Using a DataList Control. Subsequently, I will show more detailed examples.

In order to find basic information about the DataList control, you can read this article on Exploring DataList Control. Specifically, it tells about all templates that the DataList control uses for displaying the content. Further, you can also read about the Properties and Methods of DataList Control in ASP.NET. Additionally, the details about fields, methods, and events of DataList control are given here.

After that, let us create an ASP.NET web application in Visual Studio 2019 that demonstrates the DataList control.

A Simple Example of Using a DataList Control

As can be seen in the ASPX file, the DataList control makes use of ItemTemplate which is the only mandatory template in this control. Hence, it will show each record from the data source as items in this template.

Further, within the ItemTemplate, there are Labels as the container for each of the fields that will be bound to a corresponding field in the data source. In order to parse and evaluate data binding expression, we use DataBinder.Eval(Object, String) method.

Further, we set RepeatColumns property to 3 indicating that there will be three columns in the list. Moreover, the Horizontal value for the RepeatDirection property indicates that the items will be displayed row-wise.

WebForm1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DataListDemo1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DataList ID="DataList1" runat="server" DataKeyField="Emp_Id"
                 RepeatColumns="3" RepeatDirection="Horizontal" CellPadding="5"
                 CellSpacing="3">
                <ItemTemplate>
                    Employee ID: <asp:Label ID="Label1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Emp_Id") %>'></asp:Label><br />
                    Name: <asp:Label ID="Label2" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Emp_Name") %>'></asp:Label><br />
                    Department: <asp:Label ID="Label3" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Emp_Dept") %>'></asp:Label><br />
                </ItemTemplate>
                <ItemStyle  BackColor="LightYellow" BorderColor="YellowGreen"
                     BorderWidth="3" BorderStyle="Ridge" ForeColor="DarkGreen"/>

            </asp:DataList>
        </div>
    </form>
</body>
</html>

As can be seen, we create the DataTable object in Code Behind file. Since we need to create the schema first, we create three objects of DataColumn. Also, set appropriate properties of the three columns and add these columns to the data table. Further, we create several rows and add them to the Rows collection of the data table. Finally, bind this data table to the DataList control using the DataBind() method.

WebForm1.aspx.cs

using System;
using System.Data;

namespace DataListDemo1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        DataTable dt;
        protected void Page_Load(object sender, EventArgs e)
        {
            if(!IsPostBack)
            {
                BindList();
            }
        }

        public void CreateTable()
        {
            dt = new DataTable();
            dt.TableName = "Employee";
            DataRow dr;
            DataColumn dc;

            dc = new DataColumn();
            dc.ColumnName = "Emp_Id";
            dc.Caption = "Employee ID";
            dc.DataType = System.Type.GetType("System.Int32");
            dc.AllowDBNull = false;
            dt.Columns.Add(dc);

            dc = new DataColumn();
            dc.ColumnName = "Emp_Name";
            dc.Caption = "Employee Name";
            dc.DataType = System.Type.GetType("System.String");
            dc.AllowDBNull = false;
            dt.Columns.Add(dc);

            dc = new DataColumn();
            dc.ColumnName = "Emp_Dept";
            dc.Caption = "Department";
            dc.DataType = System.Type.GetType("System.String");
            dc.AllowDBNull = false;
            dt.Columns.Add(dc);

            dr = dt.NewRow();
            dr[0] = 101;
            dr[1] = "A";
            dr[2] = "Finance";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = 102;
            dr[1] = "B";
            dr[2] = "HR";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = 103;
            dr[1] = "C";
            dr[2] = "Finance";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = 104;
            dr[1] = "D";
            dr[2] = "Technical";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = 105;
            dr[1] = "E";
            dr[2] = "Technical";
            dt.Rows.Add(dr);
            dr = dt.NewRow();

            dr[0] = 106;
            dr[1] = "F";
            dr[2] = "Finance";
            dt.Rows.Add(dr);
            dr = dt.NewRow();

            dr[0] = 107;
            dr[1] = "G";
            dr[2] = "Finance";
            dt.Rows.Add(dr);
            dr = dt.NewRow();

            dr[0] = 108;
            dr[1] = "H";
            dr[2] = "HR";
            dt.Rows.Add(dr);
        }

        public void BindList()
        {
            CreateTable();
            DataList1.DataSource = dt;
            DataList1.DataBind();
        }
    }
}

Output

**A Simple Example of Using a DataList Control in ASP.NET**

In like manner, we can perform more customization to our Data List. For instance, we can add AlternatingItemTemplate as well as AlternatingItemStyle properties in the List. Moreover, including Header and Footer sections further, enhance the appearance of the Data List Control.

Summary

To sum up, this article on A Simple Example of Using a DataList Control demonstrates how to create a DataList control and bind data to it. Basically, in this example, an object of DataTable is created. Further, this DataTable object is bound to the DataList control. Also, the use of RepeatColumns and RepeatDirection properties is also shown in the example.

Programmingempire

A Simple Example of Using a DataList Control

Summary

Further Reading

You may also like...

How to Create a Pie Chart in ASP.NET

Basic Programs in ASP.NET

Example of Chart Control in ASP.NET