ASP.Net DataList Control Detailed Explanation and Example

Nuelson Penuel Saturday, September 19, 2020 ASP.Net


Table Of Contents
Summary
What is DataList Control
ASP.Net DataList Control Example

Summary

In this post, you are going to learn how to use ASP.Net DataList control as well as demonstrate binding of data to this control. You can as well download the complete app using Download File link Button

What is DataList Control

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 list of repeated items or data.

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

The DataList control has five  templates such as;

HeaderTemplate: Use to displays Header text for a Data Source collection and applies a different style for the Header text.
AlternatingItemTemplate: It is used to change the background color or style of alternating items in a Data Source collection.
Itemtemplate: This template defines how the each item is rendered from the Data Source collection.
SeperatorTemplate: This template is used to determine the separator element that separates each item in the item collection. 
FooterTemplate: This displays a footer element for the Data Source collection.

ASP.Net DataList Control Example

With the above little explanation, you must have understands what DataList control is and its various templates. 

Let us create a simple application that will bind data to a DataList control and displayed them as well.

If you are looking for how to use repeater control then check how to use asp.net repeater control

For this tutorial, you should create a Microsoft Access database with following specifications.

Database name: dbInfo
Table name: tblInfo

If you don't know how to create database then check how to create database in Microsoft Access



Field Names
Data Types


pName
Text


Gender
Text


Country
Text


Course
Text



Now that you have created the database, you should also create the website. 
Below is the HTML source 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td>
                Name<br />
                <asp:TextBox ID="txtname" runat="server"></asp:TextBox>
            </td>
            <td>Gender

                <asp:DropDownList ID="drpgender" runat="server">
                   <asp:ListItem>Select</asp:ListItem>
                     <asp:ListItem>Male</asp:ListItem>
                    <asp:ListItem>Female</asp:ListItem>
                </asp:DropDownList></td>
        </tr>
         <tr>
            <td>
                Country<br />
                <asp:TextBox ID="txtcountry" runat="server"></asp:TextBox>
            </td>
            <td>
                <asp:DropDownList ID="drpcourse" runat="server">
                    <asp:ListItem>Select</asp:ListItem>
                    <asp:ListItem>Computer Science</asp:ListItem>
                    <asp:ListItem>Electrical Electronics</asp:ListItem>
                    <asp:ListItem>Telecommunications</asp:ListItem>
                </asp:DropDownList></td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnsubmit" runat="server" Text="Submit Details" /></td>
        </tr>
    </table>
        <br />
        <asp:Label ID="lblstatus" Visible="false" runat="server" Text="Label"></asp:Label><br />
        <table >
            <tr style="background-color:#0094ff;color:#fff; width:100%">
            <td>Name
            <td>Gender
            <td>Country
            <td>Course
               </tr>
           
        <asp:DataList ID="DataList1" runat="server">
            <ItemTemplate>
           <tr style="background-color:dimgray;color:#fff; width:100%">
               <td><%# Eval("pname")%>
               <td><%# Eval("gender")%>
               <td><%# Eval("country")%>
               <td><%# Eval("course")%>
           </tr>     
            </ItemTemplate>
        </asp:DataList>
               
            </table>
    </div>
    </form>
</body>
</html>


In the codebehind, Import the following Namespaces

Imports System.Data
Imports System.Data.OleDb


Then add this to the General Declaration section

Dim con As New OleDb.OleDbConnection '("Provider=Microsoft.Jet.OleDb.4.0; Data Source='" & Server.MapPath("/db/dbInfo.mdb") & "'")



Double click on the btnsubmit and type the following or paste the codes

Protected Sub btnsubmit_Click(sender As Object, e As EventArgs) Handles btnsubmit.Click
        Dim cmd As New OleDb.OleDbCommand
        Try
            con.ConnectionString = "Provider=Microsoft.Jet.OleDb.4.0; Data Source='" & Server.MapPath("/db/dbInfo.mdb") & "'"
            con.Open()

            cmd.CommandText = "INSERT INTO tblinfo(pname,country,gender,course)VALUES(@pname,@country,@gender,@course)"
            cmd.Connection = con
            cmd.Parameters.AddWithValue("@pname", txtname.Text)
            cmd.Parameters.AddWithValue("@country", txtcountry.Text)
            cmd.Parameters.AddWithValue("@gender", drpgender.Text)
            cmd.Parameters.AddWithValue("@course", drpcourse.Text)
            cmd.ExecuteReader()


        Finally
            cmd.Dispose()
            con.Dispose()
            Response.Redirect(Request.Url.AbsoluteUri)
        End Try
    End Sub



Create a procedure called BindInfoToDataList as follows

Sub BindInfoToDataList()

        Dim cmd As New OleDb.OleDbCommand

        Try
            con.ConnectionString = "Provider=Microsoft.Jet.OleDb.4.0; Data Source='" & Server.MapPath("/db/dbInfo.mdb") & "'"
            con.Open()
            cmd.CommandText = "SELECT*FROM tblinfo"
            cmd.Connection = con
            DataList1.DataSource = cmd.ExecuteReader()
            DataList1.DataBind()

        Catch ex As Exception
            ScriptManager.RegisterStartupScript(Page, Page.GetType, "1111", "alert('Error occured');", True)

        Finally
            cmd.Dispose()
            con.Dispose()
        End Try

    End Sub

Now that you have created the BindInfoToDataList procedure, you need to call this subroutine on page load event


Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        BindInfoToDataList()
    End Sub



And the following code to the DataList1 pre_render event to show count of total records saved


Protected Sub DataList1_PreRender(sender As Object, e As EventArgs) Handles DataList1.PreRender
        If DataList1.Controls.Count <= 0 Then
            lblstatus.Text = "No records saved yet"
            lblstatus.ForeColor = Drawing.Color.Red
            lblstatus.Visible = True
        Else
            lblstatus.Text = "Total records: " & DataList1.Controls.Count
            lblstatus.ForeColor = Drawing.Color.Green
            lblstatus.Visible = True
        End If
    End Sub



And the output is below



And the complete codebehind is below
Imports System.Data
Imports System.Data.OleDb

Partial Class _Default
    Inherits System.Web.UI.Page
    Dim con As New OleDb.OleDbConnection '("Provider=Microsoft.Jet.OleDb.4.0; Data Source='" & Server.MapPath("/db/dbInfo.mdb") & "'")
    Protected Sub btnsubmit_Click(sender As Object, e As EventArgs) Handles btnsubmit.Click
        Dim cmd As New OleDb.OleDbCommand
        Try
            con.ConnectionString = "Provider=Microsoft.Jet.OleDb.4.0; Data Source='" & Server.MapPath("/db/dbInfo.mdb") & "'"
            con.Open()

            cmd.CommandText = "INSERT INTO tblinfo(pname,country,gender,course)VALUES(@pname,@country,@gender,@course)"
            cmd.Connection = con
            cmd.Parameters.AddWithValue("@pname", txtname.Text)
            cmd.Parameters.AddWithValue("@country", txtcountry.Text)
            cmd.Parameters.AddWithValue("@gender", drpgender.Text)
            cmd.Parameters.AddWithValue("@course", drpcourse.Text)
            cmd.ExecuteReader()


        Finally
            cmd.Dispose()
            con.Dispose()
            Response.Redirect(Request.Url.AbsoluteUri)
        End Try
    End Sub

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        BindInfoToDataList()
    End Sub

    Sub BindInfoToDataList()

        Dim cmd As New OleDb.OleDbCommand

        Try
            con.ConnectionString = "Provider=Microsoft.Jet.OleDb.4.0; Data Source='" & Server.MapPath("/db/dbInfo.mdb") & "'"
            con.Open()
            cmd.CommandText = "SELECT*FROM tblinfo"
            cmd.Connection = con
            DataList1.DataSource = cmd.ExecuteReader()
            DataList1.DataBind()

        Catch ex As Exception
            ScriptManager.RegisterStartupScript(Page, Page.GetType, "1111", "alert('Error occured');", True)

        Finally
            cmd.Dispose()
            con.Dispose()
        End Try

    End Sub

    Protected Sub DataList1_PreRender(sender As Object, e As EventArgs) Handles DataList1.PreRender
        If DataList1.Controls.Count <= 0 Then
            lblstatus.Text = "No records saved yet"
            lblstatus.ForeColor = Drawing.Color.Red
            lblstatus.Visible = True
        Else
            lblstatus.Text = "Total records: " & DataList1.Controls.Count
            lblstatus.ForeColor = Drawing.Color.Green
            lblstatus.Visible = True
        End If
    End Sub
End Class




That is all. Thanks for reading