Updated June 23, 2023
Introduction to ASP.NET DataList
ASP.NET DataList is a server-side control; it acts as a container of data items, which displays the data from the data source and rows in various layouts, like arranging them in either rows or columns.
Syntax:
<html>
<body>
<form id="Form2" runat="server">
<asp:DataList id="DataList1" runat="server">
<HeaderTemplate>
...
</HeaderTemplate>
<ItemTemplate>
...
</ItemTemplate>
<FooterTemplate>
...
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>Template Fields in ASP.NET DataList
ASP.NET DataList control is like a repeater control used to display items in the repeated list that bounds to control. It is a lightweight control that displays continual information and a databound control that manages the data in web applications. DataList control is managed by its template fields.
Let’s see the supported DataList template fields as follows:
- ItemTemplate: It specifies elements present in DataSource and renders in browsers as many rows that appear in the data source collection.
- HeaderTemplate: The contents of header elements used to display header text to data source collection.
- FooterTemplate: The contents of footer elements render once and are used to display footer text to data sources.
- EditItem Template: The EditItem template is used to allow edit permissions to the user.
- ItemStyle: ItemStyle is used to add styles to an ItemTemplate.
- EditStyle: EditStyle is used to add styles to an EditItemTemplate
- HeaderStyle: HeaderStyle is used to add styles to a HeaderTemplate
- FooterStyle: FooterStyleis used to add styles to a FooterTemplate.
For building a database, you can track this as per your constraint. In this article, I am generating one temp table with a few duplicate records representing the data list control.
Table Design
- Table Name: ProductMaster
- Purpose: Details of the Products available
- Primary Key: ProductId
| Field Number | Field Name | Data Type | Description |
| 1 | ProductId | int | Auto-generated Product Id, and it’s a Primary Key |
| 2 | ProductCategory | varchar(50) | Category of the Product |
| 3 | ProductName | varchar(50) | Name of the Product |
| 4 | ProductDescription | varchar(50) | Description of the product |
| 5 | UnitPriceKgs | money | Cost of products in kilograms |
Examples to Implement ASP.NET DataList
Following are the different examples of implementing ASP.NET DataList.
Example #1
Designer Source Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample.cs" Inherits=" Sample " %>
<!DOCTYPE html>
<html >
<head id="Head1" runat="server">
<title>ASP.NET - DataList Control</title>
<style type="text/css">
.auto-style1
{
margin-left: 80px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="auto-style1">
<h2 style="color:black; " class="auto-style1">ASP.NET - DataList</h2>
</div>
<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductId" DataSourceID="SqlDataSource1" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" Font-Names="Times New Roman" ForeColor="Black" RepeatColumns="3">
<AlternatingItemStyle BackColor="PaleGoldenrod" BorderWidth="2px" />
<FooterStyle BackColor="Tan" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<ItemTemplate>
<br />
<asp:Image ID="Image1" runat="server" Height="115px" ImageUrl='<%# Eval("ProductImagePath") %>' Width="119px" /> <br />
<br />
ProductId:
<asp:Label ID="ProductIdLabel" runat="server" Text='<%# Eval("ProductId") %>' />
<br /> ProductCategory:
<asp:Label ID="ProductCategoryLabel" runat="server" Text='<%# Eval("ProductCategory") %>' />
<br />
ProductName:
<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>' />
<br />
ProductDescription:
<asp:Label ID="ProductDescriptionLabel" runat="server" Text='<%# Eval("ProductDescription") %>' />
<br />
UnitPriceKgs:
<asp:Label ID="UnitPriceKgsLabel" runat="server" Text='<%# Eval("UnitPriceKgs") %>' />
<br />
<br />
</ItemTemplate>
<SelectedItemStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:db %>" SelectCommand="SELECT [ProductId], [ProductCategory], [ProductName], [ProductDescription], [UnitPriceKgs], [ProductImagePath], [ProductImageName] FROM [ProductMaster]"></asp:SqlDataSource>
<p> </p>
</form>
</body>
</html>Output:
We can also do this by code-behind; let’s check the below coding sample.
Code Behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class Product : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("Data Source=test;Integrated Security=true;Initial Catalog=db");
con.Open();
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = "select ProductId, ProductDescription ,ProductName,ProductCategory,ProductSubCategory,UnitPriceKgs from ProductMaster;
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds, "ProductMaster");
DataList1.DataSource = ds.Tables["ProductMaster"];
DataList1.DataBind();
con.Close();
}
}Output:
Example #2
In ASP.NET datalist control, we can add various controls: text boxes, dropdown lists, image control, hyperlink, and so on. Let’s see the example below
Designer Source Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample2.cs" Inherits=" Sample2 " %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>ASP.NET - DataList Control</title>
<style type="text/css">
.auto-style1
{
margin-left: 80px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="auto-style1">
<h2 style="color:black; " class="auto-style1">ASP.NET - DataList</h2>
</div>
<asp:DataList ID="DataList1" runat="server" BackColor="#DEBA84"
BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3"
CellSpacing="2" DataKeyField="ProductId" GridLines="Both" Height="428px"
RepeatColumns="4" Width="948px">
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
<ItemStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
<ItemTemplate>
<a href='Shopping_Cart.aspx?cart_id=<%# Eval("ProductId") %>'>
<asp:Image ID="Image1" runat="server" Height="147px"
ImageUrl='<%# Eval("ProductImagePath") %>' Width="165px" />
<br />
</a>
<h4>
<asp:Label ID="lb" runat="server" Font-Bold="True" Font-Size="12pt"
Text='<%# Eval("ProductName") %>'></asp:Label>
<br />
Product Sub Category: <span><%# Eval("ProductSubCategory") %></span>
</h4>
<span><del>र</del><%# Eval("UnitPriceKgs")%>INR</span><br />
<br />
SIZE :
<asp:DropDownList ID="DropDownList3" runat="server" Height="17px" Width="180px">
<asp:ListItem>--Choose a Size--</asp:ListItem>
<asp:ListItem>Xsmall </asp:ListItem>
<asp:ListItem>Small</asp:ListItem>
<asp:ListItem>Medium</asp:ListItem>
<asp:ListItem>Large </asp:ListItem>
<asp:ListItem>XLarge </asp:ListItem>
</asp:DropDownList>
<br />
<br />
SHAPE :
<asp:DropDownList ID="DropDownList4" runat="server" Height="17px" Width="180px">
<asp:ListItem>--Choose a Shape--</asp:ListItem>
<asp:ListItem>Round</asp:ListItem>
<asp:ListItem>Square</asp:ListItem>
<asp:ListItem>Heart</asp:ListItem>
<asp:ListItem>Hexagon</asp:ListItem>
<asp:ListItem>Oval</asp:ListItem>
<asp:ListItem>Rectangle</asp:ListItem>
<asp:ListItem>Petal</asp:ListItem>
</asp:DropDownList>
<br />
<br />
FLAVOUR :
<asp:DropDownList ID="DropDownList1" runat="server" Height="17px" Width="180px">
<asp:ListItem>--SELECT--</asp:ListItem>
<asp:ListItem>Chocolate & Vanilla</asp:ListItem>
<asp:ListItem>VENNILLA</asp:ListItem>
<asp:ListItem>STRAWBERRY</asp:ListItem>
<asp:ListItem>Vanilla & Strawberry</asp:ListItem>
<asp:ListItem>Chocolate & Coconut</asp:ListItem>
<asp:ListItem>White Chocolate</asp:ListItem>
<asp:ListItem>Light Fruit</asp:ListItem>
<asp:ListItem>Marble & Vanilla</asp:ListItem>
</asp:DropDownList>
<br />
<br />
FILLING :
<asp:DropDownList ID="DropDownList2" runat="server">
<asp:ListItem>--SELECT--</asp:ListItem>
<asp:ListItem>ButterCream</asp:ListItem>
<asp:ListItem>ButterCream & Coconut</asp:ListItem>
<asp:ListItem>ButterCream & Strawberry</asp:ListItem>
<asp:ListItem>Chocolate Fudge</asp:ListItem>
<asp:ListItem>Apricot Jam</asp:ListItem>
<asp:ListItem>Strawberry Jam & Coconut</asp:ListItem>
</asp:DropDownList>
<br />
<br />
INSCRIPTION :
<asp:TextBox ID="TextBox3" runat="server" Height="25px" Width="178px"></asp:TextBox>
<br />
<br />
SPECIAL INSTRUCTION :
<asp:TextBox ID="TextBox4" runat="server" Height="25px" Width="178px"></asp:TextBox>
<br />
<br />
DELIVERY DATE :
<asp:TextBox ID="TextBox2" runat="server" Height="22px" style="z-index: 1"
Width="182px"></asp:TextBox>
<br />
<br />
<a href='link_here=<%# Eval("ProductId") %>'>Add to Cart</a>
</ItemTemplate>
<SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
</asp:DataList>
</form>
</body>
</html>Output:
Code Behind:
public partial class SearchByProduct : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("Data Source=test;Integrated Security=true;Initial Catalog=db");
con.Open();
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = "select ProductId, ProductDescription ,ProductName,ProductCategory,ProductSubCategory,UnitPriceKgs from ProductMaster where ProductName ='Cake'";
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds, "ProductMaster");
DataList1.DataSource = ds.Tables["ProductMaster"];
DataList1.DataBind();
con.Close();
}
}Conclusion
In this article, we learned how the ASP.NET DataList control using its various templates, as shown in the above examples. I hope this article will help you understand the concept of ASP.NET DataList.
Recommended Articles
We hope that this EDUCBA information on “ASP.NET DataList” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
