In this article I’m
going to explain how to use DataList control in ASP.NET using C#.
What is DataList .?
The DataList Web server control displays data in a
format that you can define using templates and styles. The DataList control is useful for data in any
repeating structure, such as a table. The DataList control can display rows in different
layouts, such as ordering them in columns or rows.
Template property and
Description:
ItemTemplate: Contains the HTML elements and
controls to render once for each row in the data source.
AlternatingItemTemplate: Contains the HTML elements and
controls to render once for every other row in the data source. Typically, you
use this template to create a different look for the alternating rows, such as
a different background color than the color that is specified in the ItemTemplate property.
SelectedItemTemplate: Contains the elements to render
when the user selects an item in the DataList control. Typically, you use this
template to visually distinguish the selected row with a different background
or font color. You can also expand the item by displaying additional fields
from the data source.
EditItemTemplate: Specifies the layout of an item
when it is in edit mode. This template typically contains editing controls,
such as TextBoxcontrols.
HeaderTemplate and FooterTemplate: Contains the text and controls
to render at the beginning and end of the list, respectively.
SeparatorTemplate: Contains the elements to render
between each item. A typical example might be a line (using an HR element).
Here I’ll show you how to use DataList
control to display customer details by repeating structure such as table.
I have used Northwind database to
display customer details. Here
you can download Northwind database
http://northwinddatabase.codeplex.com/releases/view/71634
Table design:
|
Column
Name
|
Data
type
|
|
CompanyName
|
varchar(100)
|
|
ContactName
|
varchar(100)
|
|
City
|
varchar(50)
|
|
Country
|
varchar(50)
|
Designer source code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server" BackColor="Gray" BorderColor="#666666"
BorderStyle="None"
BorderWidth="2px"
CellPadding="3"
CellSpacing="2"
Font-Names="Verdana"
Font-Size="Small"
GridLines="Both"
RepeatColumns="3"
RepeatDirection="Horizontal"
Width="600px">
<FooterStyle BackColor="#F7DFB5"
ForeColor="#8C4510"
/>
<HeaderStyle BackColor="#333333"
Font-Bold="True"
Font-Size="Large"
ForeColor="White"
HorizontalAlign="Center"
VerticalAlign="Middle"
/>
<HeaderTemplate>
Customer
Details</HeaderTemplate>
<ItemStyle BackColor="White"
ForeColor="Black"
BorderWidth="2px"
/>
<ItemTemplate>
<b>Company Name:</b>
<asp:Label ID="lblCName"
runat="server"
Text='<%# Eval("CompanyName") %>'></asp:Label>
<br />
<b>Contact Name:</b>
<asp:Label ID="lblName"
runat="server"
Text='<%# Eval("ContactName") %>'></asp:Label>
<br />
<b> City:</b>
<asp:Label ID="lblCity"
runat="server"
Text=' <%# Eval("City") %>'></asp:Label>
<br />
<b>Country:</b>
<asp:Label ID="lblCountry"
runat="server"
Text='<%# Eval("Country") %>'></asp:Label>
<br />
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
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 _Default : System.Web.UI.Page
{
SqlConnection
conn = new SqlConnection("Data Source=SPIDER;Initial Catalog=Northwind;Integrated
Security=True");
protected
void Page_Load(object
sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
protected
void BindData()
{
DataSet ds = new DataSet();
DataTable
FromTable = new DataTable();
conn.Open();
string cmdstr = "Select * from
Customers";
SqlCommand cmd = new SqlCommand(cmdstr, conn);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
adp.Fill(ds);
DataList1.DataSource =
ds.Tables[0];
DataList1.DataBind();
}
}