In this article I will explain with an example, how to add and show Serial Number (Row Number) in First Column of Repeater control in ASP.Net using C# and VB.Net.
The Serial Number (Row Number) can be auto generated in the following two ways.
1. Using ItemIndex.
2. Using ItemDataBound event.
Database
I have made use of the following table Customers with the schema as follows.
I have already inserted few records in the table.
Note: You can download the database table SQL by clicking the download link below.
1. Using ItemIndex.
The first technique is using the ItemIndex property which can be used to determine the Index / Serial Number / Row Number of a Repeater Item.
HTML Markup
The below HTML Markup consists of a Repeater control which will be rendered as an HTML Table. The first column consists of a Label control whose Text property is bound to Container.ItemIndex property.
The ItemIndex property is a zero based index and hence we need to increment it by one so that we get values starting from one.
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table cellpadding="0" cellspacing="0">
<tr>
<th>Row Number</th>
<th>Name</th>
<th>Country</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><asp:Label ID="lblRowNumber" Text='<%# Container.ItemIndex + 1 %>' runat="server" /></td>
<td><%# Eval("Name")%></td>
<td><%# Eval("Country")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Populating the Repeater control
The Repeater control is populated using the records from the Customers table inside the Page Load event of the ASP.Net page.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindRepeater();
}
}
private void BindRepeater()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT Name, Country FROM Customers"))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
Repeater1.DataSource = dt;
Repeater1.DataBind();
}
}
}
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.BindRepeater()
End If
End Sub
Private Sub BindRepeater()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("SELECT Name, Country FROM Customers")
Using sda As New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using dt As New DataTable()
sda.Fill(dt)
Repeater1.DataSource = dt
Repeater1.DataBind()
End Using
End Using
End Using
End Using
End Sub
Screenshot
2. Using ItemDataBound event.
The second technique is using the ItemDataBound event of the Repeater control.
HTML Markup
The below HTML Markup consists of a Repeater control which will be rendered as an HTML Table. The first column consists of a Label control whose Text property will be set inside the ItemDataBound event handler.
<asp:Repeater ID="Repeater2" runat="server" OnItemDataBound = "OnItemDataBound">
<HeaderTemplate>
<table cellpadding="0" cellspacing="0">
<tr>
<th>Row Number</th>
<th>Name</th>
<th>Country</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><asp:Label ID="lblRowNumber" runat="server" /></td>
<td><%# Eval("Name")%></td>
<td><%# Eval("Country")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Populating the Repeater control
The Repeater control is populated using the records from the Customers table inside the Page Load event of the ASP.Net page.
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindRepeater();
}
}
private void BindRepeater()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT Name, Country FROM Customers"))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
Repeater2.DataSource = dt;
Repeater2.DataBind();
}
}
}
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.BindRepeater()
End If
End Sub
Private Sub BindRepeater()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("SELECT Name, Country FROM Customers")
Using sda As New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using dt As New DataTable()
sda.Fill(dt)
Repeater2.DataSource = dt
Repeater2.DataBind()
End Using
End Using
End Using
End Using
End Sub
Displaying Auto generated Row Number in Repeater control using ItemDataBound event
Inside the ItemDataBound event handler, the Label control is searched and then its Text property is set to the ItemIndex of the Repeater Item after incrementing it by one similar to ItemIndex property as ItemIndex is also a zero based index property.
C#
protected void OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
(e.Item.FindControl("lblRowNumber") as Label).Text = (e.Item.ItemIndex + 1).ToString();
}
}
VB.Net
Protected Sub OnItemDataBound(ByVal sender As Object, ByVal e As RepeaterItemEventArgs)
If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
CType(e.Item.FindControl("lblRowNumber"), Label).Text = (e.Item.ItemIndex + 1).ToString()
End If
End Sub
Screenshot
Demo
Downloads