Dynamically Bind DataList Control In ASP.NET From Database

Introduction

Data-bound web server controls are controls that can be bound to a data source control to make it easy to display and modify data in your web application. DataList a data-bound list control that displays items using templates. In this article, I will demonstrate how to dynamically bind DataList control in asp.net from the database.

There are several data-bound server controls.

DataList control
DetailsView control
FormView control
GridView control
ListView control
Repeater control
Chart Control

Step 1

Create database table in SQL Server 2014.

CREATE TABLE [dbo].[ProductsList](
[ProductId] [int] IDENTITY(1000,1) NOT NULL,
[ProductName] [nvarchar](50) NULL,
[ProductPrice] [nvarchar](50) NULL,
[ProductDescription] [nvarchar](max) NULL,
[ProductImage] [nvarchar](100) NULL,
CONSTRAINT [PK_ProductsList] PRIMARY KEY CLUSTERED
(
[ProductId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

CREATE PROCEDURE spGetProductList
AS
BEGIN
SELECT*FROM [dbo].[ProductsList]
END

Step 2

Open Visual Studio 2015, click on New Project and create an empty web application project.

Screenshot for creating new project 1

After clicking on New Project, one window will appear. Select Web from the left panel, choose ASP.NET Web Application, give a meaningful name to your project, then click on OK.

Screenshot for creating new project 2

After clicking on OK, one more window will appear. Choose Empty check on Web Forms checkbox and click on OK.

Screenshot for creating new project 3

Step 3

Double click on webconfig file and database connections. Write the following line of code.

<connectionStrings>
<add name="DBCS" connectionString="data source=DESKTOP-M021QJH\SQLEXPRESS; database=DemoDB; integrated security=true;"/>
</connectionStrings>

Step 4

Add web form in your project.

Right click on project, select Add, choose Web Form, and click.

Screenshot adding web form 1

After clicking on web form, one window will appear. Give the name DataList or any meaningful name. Click on OK. The web form will be added to the project.

Screenshot adding web form 2

Step 5

Add script and styles of bootstrap in head section of the web form.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.productList {
border: 1px solid #6c757d;
margin-bottom: 10px;
padding: 15px;
border-radius: 3px;
}
</style>

Step 6

Drag and drop a DataList control on the web form. Design DataList control.

<body>
<form id="form1" runat="server">
<div class="container py-4">
<h5 class="text-center text-uppercase">DataList control in asp.net</h5>
<asp:DataList ID="DataList1" runat="server" CssClass="row">
<ItemTemplate>
<div class="row productList">
<div class="col-4">
<img alt="" width="250" src='<%#Eval("ProductImage")%>' />
</div>
<div class="col-8">
<h4><%#Eval("ProductName")%></h4>
<h6><%#Eval("ProductPrice")%></h6>
<div>
<%#Eval("ProductDescription")%>
</div>
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>

Complete web form code

<!DOCTYPE html>
<html>
<head runat="server">
<title>DataList</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.productList {
border: 1px solid #6c757d;
margin-bottom: 10px;
padding: 15px;
border-radius: 3px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container py-4">
<h5 class="text-center text-uppercase">DataList control in asp.net</h5>
<asp:DataList ID="DataList1" runat="server" CssClass="row">
<ItemTemplate>
<div class="row productList">
<div class="col-4">
<img alt="" width="250" src='<%#Eval("ProductImage")%>' />
</div>
<div class="col-8">
<h4><%#Eval("ProductName")%></h4>
<h6><%#Eval("ProductPrice")%></h6>
<div>
<%#Eval("ProductDescription")%>
</div>
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>

Step 7

Right click and view web form code. Write the following code.

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
namespace BindDataControl_Demo
{
public partial class DataList : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDataList();
}
}
private void BindDataList()
{
string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
SqlCommand cmd = new SqlCommand("spGetproductList", con);
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
DataList1.DataSource = cmd.ExecuteReader();
DataList1.DataBind();
}
}
}
}

Step 8: Create a folder under project with name Products add some product images

Step 9: Run the project by pressing ctrl+F5.

Screenshot

Bind DataList Control in Asp.Net

Conclusion

In this article, I have explained how to dynamically bind DataList control from database step by step. Hope it will help you.