In this article I will explain with an example, how to create a contacts Rolodex using DataList Control in ASP.Net using C# and VB.Net.
Rolodex allows you to filter out your contacts based on Alphabets, thus making it easier to maintain.
 
 

Database

Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 

Stored Procedure

This Stored Procedure accepts @Alphabet parameter, if the alphabet is ALL then all records are displayed else the records are filtered based on the Alphabet using LIKE statement.
CREATE PROCEDURE [dbo].[spx_GetContacts]
       @Alphabet VARCHAR(10)
AS
BEGIN
      SET NOCOUNT ON;
      IF @Alphabet = 'ALL'
      BEGIN
            SELECT *
            FROM Customers
      END
      ELSE
      BEGIN
            SELECT *
            FROM Customers
            WHERE ContactName LIKE @Alphabet + '%'
      END
END
 
 

HTML Markup

The following HTML markup consists of:
Label – For selecting text.
Table – For displaying records in table format.
DataList – For displaying records.
The DataList consists of one ItemTemplate.
 

Properties

RepeatLayout – For specifying layout.
RepeatColumns – For specifying repetitive columns.
 
Repeater – For displaying Alphabets.
The Repeater consists of one ItemTemplate.

ItemTemplate

The ItemTemplate column consists of LinkButton.
LinkButton – For displaying link button.
The LinkButton has been assigned with an OnClick event handler.
<b>Personal Contacts:</b>
<br />
<br />
You are viewing
<asp:Label ID="lblView" runat="server" Text="" />
<table style="width:440px">
    <tr>
        <td valign="top" width="420px">
            <asp:DataList ID="dlContacts" runat="server" RepeatLayout="Table" RepeatColumns="2"
                CellPadding="2" CellSpacing="2">
                <ItemTemplate>
                    <table cellpadding="2" cellspacing="0" style="width: 200px; height: 100px; background-color: #ccc">
                        <tr>
                            <td colspan="2"><b><%# Eval("ContactName")%></b></td>
                        </tr>
                        <tr>
                            <td colspan="2"><%# Eval("City")%>,<%# Eval("PostalCode")%><br /><%# Eval("Country")%></td>
                        </tr>
                        <tr>
                            <td>Phone:</td>
                            <td><%# Eval("Phone")%></td>
                        </tr>
                        <tr>
                            <td>Fax:</td>
                            <td><%# Eval("Fax")%></td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:DataList>
        </td>
        <td valign="top">
            <asp:Repeater ID="rptAlphabets" runat="server">
                <ItemTemplate>
                    <asp:LinkButton ID="lnkAlphabet" runat="server" Text='<%#Eval("Value")%>' OnClick="OnAlphabetClick"
                        Enabled='<%# Eval("isNotSelected")%>' />
                    <br />
                </ItemTemplate>
            </asp:Repeater>
        </td>
    </tr>
</table>
 
 

Class

The Class consists of following properties.
C#
public class Alphabets
{
    public string Value { get; set; }
    public bool isNotSelected { get; set; }
}
 
VB.Net
Public Class Alphabets
    Public Property Value As String
    Public Property isNotSelected As Boolean
End Class
 
 

Namespaces

You will need to import the following namespaces.
C#
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
 
VB.Net
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
 
 

Populating DataList and Repeater

Inside the Page_Load event handler, the ViewState object is set and BindDataList, GenerateAlphabets method is called.
 

BindDataList

Inside the BindDataList method, the Stored Procedure is called and ViewState value is set.
Then, the DataList is populated with records.
 

GenerateAlphabets

Inside the GenerateAlphabets method, the generic List of the Alphabets class object is created.
Then, FOR loop is executed and Alphabet values are set using ViewState.
Finally, the generic collection of Alphabets object is set with the DataSource property of RepeaterControl.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        ViewState["CurrentAlphabet"] = "ALL";
        this.GenerateAlphabets();
        this.BindDataList();
    }
}
 
private void BindDataList()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("spx_GetContacts", con))
        {
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@Alphabet", ViewState["CurrentAlphabet"]);
            con.Open();
            dlContacts.DataSource = cmd.ExecuteReader();
            dlContacts.DataBind();
            con.Close();
 
            if (ViewState["CurrentAlphabet"].ToString().Equals("ALL"))
                lblView.Text = "all Contacts.";
            else
                lblView.Text = "Contacts whose name starts with " + ViewState ["CurrentAlphabet"].ToString();
        }
    }
}
 
private void GenerateAlphabets()
{
    List<AlphabetsCS> alphabets = new List<AlphabetsCS>();
    AlphabetsCS alphabet = new AlphabetsCS();
    alphabet.Value = "ALL";
    alphabet.isNotSelected = !alphabet.Value.Equals(ViewState["CurrentAlphabet"]);
    alphabets.Add(alphabet);
    for (int i = 65; i <= 90; i++)
    {
        alphabet = new AlphabetsCS();
        alphabet.Value = Char.ConvertFromUtf32(i);
        alphabet.isNotSelected = !alphabet.Value.Equals(ViewState["CurrentAlphabet"]);
        alphabets.Add(alphabet);
    }
    rptAlphabets.DataSource = alphabets;
    rptAlphabets.DataBind();
}
 
VB.Net
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        ViewState("CurrentAlphabet") = "ALL"
        Me.GenerateAlphabets()
        Me.BindDataList()
    End If
End Sub
 
Private Sub BindDataList()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand("spx_GetContacts", con)
            cmd.CommandType = CommandType.StoredProcedure
            cmd.Parameters.AddWithValue("@Alphabet", ViewState("CurrentAlphabet"))
            con.Open()
            dlContacts.DataSource = cmd.ExecuteReader()
            dlContacts.DataBind()
            con.Close()
 
            If ViewState("CurrentAlphabet").ToString().Equals("ALL") Then
                lblView.Text = "all Contacts."
            Else
                lblView.Text = "Contacts whose name starts with " & ViewState("CurrentAlphabet").ToString()
            End If
        End Using
    End Using
End Sub
 
Private Sub GenerateAlphabets()
    Dim alphabets As List(Of AlphabetsVB) = New List(Of AlphabetsVB)()
    Dim alphabet As AlphabetsVB = New AlphabetsVB()
    alphabet.Value = "ALL"
    alphabet.isNotSelected = Not alphabet.Value.Equals(ViewState("CurrentAlphabet"))
    alphabets.Add(alphabet)
 
    For i As Integer = 65 To 90
        alphabet = New AlphabetsVB()
        alphabet.Value = Char.ConvertFromUtf32(i)
        alphabet.isNotSelected = Not alphabet.Value.Equals(ViewState("CurrentAlphabet"))
        alphabets.Add(alphabet)
    Next
 
    rptAlphabets.DataSource = alphabets
    rptAlphabets.DataBind()
End Sub
 
 

Changed Alphabets

When the OnAlphabetClick LinkButton is clicked, LinkButton class object is created and the ViewState value is set.
Then, the GenerateAlphabets and BindDataList methods are called.
C#
protected void OnAlphabetClick(object sender, EventArgs e)
{
    LinkButton lnkAlphabet = (LinkButton) sender;
    ViewState["CurrentAlphabet"] = lnkAlphabet.Text;
    this.GenerateAlphabets();
    this.BindDataList();
}
 
VB.Net
Protected Sub OnAlphabetClick(ByVal sender As Object, ByVal e As EventArgs)
    Dim lnkAlphabet As LinkButton = CType(sender, LinkButton)
    ViewState("CurrentAlphabet") = lnkAlphabet.Text
    Me.GenerateAlphabets()
    Me.BindDataList()
End Sub
 
 

Screenshot

Rolodex with Alphabetic Filtering using ASP.Net DataList
 
 

Downloads

Download Code