Here I am explaining how to create a Contacts Rolodex using ASP.Net DataList Control. Rolodex allows you to filter out your contacts based on Alphabets, thus making it easier to maintain.
HTML Markup
The HTML markup of the page is given below
<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; border: dashed 2px green;
background-color: #C2D69B">
<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="Alphabet_Click"
Enabled='<%# Eval("isNotSelected")%>' />
<br />
</ItemTemplate>
</asp:Repeater>
</td>
</tr>
</table>
Above you noticed that I have used an ASP.Net DataList and ASP.Net Repeater control
The DataList will be used to display the Contacts while the Repeater control will be used to create the Alphabetical list.
There are two parts of this tutorial.
1. Populating Alphabet list
2. Populating the contacts from database.
Populating Alphabet list
To populate the list of alphabets I have created a property class that will store the alphabets
C#
public class Alphabet
{
private string _value;
private bool _isNotSelected;
public string Value
{
get
{
return _value;
}
set
{
_value = value;
}
}
public bool isNotSelected
{
get
{
return _isNotSelected;
}
set
{
_isNotSelected = value;
}
}
}
VB.Net
Public Class Alphabet
Private _value As String
Private _isNotSelected As Boolean
Public Property Value() As String
Get
Return _value
End Get
Set(ByVal value As String)
_value = value
End Set
End Property
Public Property isNotSelected() As Boolean
Get
Return _isNotSelected
End Get
Set(ByVal value As Boolean)
_isNotSelected= value
End Set
End Property
End Class
There are two properties Value and isNotSelected. Value stores the actual Alphabet while isNotSelected stores whether the alphabet is the one that is selected or not. Thus it helps us to identify which Alphabet is currently selected by the user
The method described below is used to built as list of alphabets which would then be used to sort out the contacts based on the first letter of their names
C#
private void GenerateAlphabets()
{
List<Alphabet> alphabets = new List<Alphabet>();
Alphabet alphabet = new Alphabet();
alphabet.Value = "ALL";
alphabet.isNotSelected = !alphabet.Value
.Equals(ViewState["CurrentAlphabet"]);
alphabets.Add(alphabet);
for (int i = 65; i <= 90; i++)
{
alphabet = new Alphabet();
alphabet.Value = Char.ConvertFromUtf32(i);
alphabet.isNotSelected = !alphabet.Value
.Equals(ViewState["CurrentAlphabet"]);
alphabets.Add(alphabet);
}
rptAlphabets.DataSource = alphabets;
rptAlphabets.DataBind();
}
VB.Net
Private Sub GenerateAlphabets()
Dim alphabets As New List(Of Alphabet)()
Dim alphabet As New Alphabet()
alphabet.Value = "ALL"
alphabet.isNotSelected = Not alphabet.Value _
.Equals(ViewState("CurrentAlphabet"))
alphabets.Add(alphabet)
For i As Integer = 65 To 90
alphabet = New Alphabet()
alphabet.Value = [Char].ConvertFromUtf32(i)
alphabet.isNotSelected = Not alphabet.Value _
.Equals(ViewState("CurrentAlphabet"))
alphabets.Add(alphabet)
Next
rptAlphabets.DataSource = alphabets
rptAlphabets.DataBind()
End Sub
Above you’ll see that the method loops and populates the alphabetic list along with the ALL item which is selected by default. Later the list is bind to an ASP.Net Repeater Control. A ViewState variable is used to store the selected alphabet, by default ALL is stored which means all records will be displayed
Populating the contacts from database
For this tutorial I have used the Microsoft NorthWind Database. You can download the link below.
Download Northwind Database
Once you downloaded the database run the following script to create the stored procedure that will filter our records based on the first letter of the Customer Name.
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
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
The stored procedure is quite simple. It accepts a parameter called @Alphabet which is passed from the front end. If the alphabet is ALL then all records are displayed else the records are filtered based on the Alphabet using LIKE statement.
Once the stored procedure is created we can get back to our web application. The following method as the names suggests calls the stored procedure we created earlier and binds the returned filtered list of contacts to the ASP.Net DataList control.
C#
private void BindDataList()
{
string conStr = ConfigurationManager
.ConnectionStrings["conStr"].ConnectionString;
SqlConnection con = new SqlConnection(conStr);
SqlCommand cmd = new SqlCommand("spx_GetContacts");
cmd.Connection = 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();
}
VB.Net
Private Sub BindDataList()
Dim conStr As String = ConfigurationManager _
.ConnectionStrings("conStr").ConnectionString
Dim con As New SqlConnection(conStr)
Dim cmd As New SqlCommand("spx_GetContacts")
cmd.Connection = 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 Sub
The above methods are called up in the page load event of the ASP.Net Web page in the following way
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ViewState["CurrentAlphabet"] = "ALL";
this.GenerateAlphabets();
this.BindDataList();
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
ViewState("CurrentAlphabet") = "ALL"
Me.GenerateAlphabets()
Me.BindDataList()
End If
End Sub
Finally we call the following event when the LinkButtons in the ASP.Net repeater controls are clicked
C#
protected void Alphabet_Click(object sender, EventArgs e)
{
LinkButton lnkAlphabet = (LinkButton)sender;
ViewState["CurrentAlphabet"] = lnkAlphabet.Text;
this.GenerateAlphabets();
this.BindDataList();
}
VB.Net
Protected Sub Alphabet_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim lnkAlphabet As LinkButton = DirectCast(sender, LinkButton)
ViewState("CurrentAlphabet") = lnkAlphabet.Text
Me.GenerateAlphabets()
Me.BindDataList()
End Sub
As you’ll notice, when the LinkButton is clicked the selected alphabet is updated in the ViewState variable and Repeater and the DataList is populated.
The screenshot below displays the Rolodex displaying the contacts filtered using Alphabets.
![ASP.Net DataList: Contacts Rolodex with Alphabetic filtering, paging, pagination]()
With this the article comes to an end. You can download the sample code in C# and VB.Net along with the stored procedure using the link below.
Download Code (6.71 kb)
