ASP Snippets

Categories






Alerts

Free Alerts

Your email will always be
private and will not be shared.




Follow us on twitter.




Zoom In | Zoom Out


Author is awarded Most Valuable Professional award by Microsoft ASP/ASP.Net

Rolodex with Alphabetic Filtering using ASP.Net DataList

Author:Mudassar Khan

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.

RolodexDatalist.zip (6.71 kb)

 

Posted: Nov 15 2009, 04:01 by Mudassar Khan | Comments (0) RSS comment feed |
Filed under: ASP.Net | C# | VB.Net | DataList

Views: 5463
Page copy protected against web site content infringement by Copyscape


If you like this article, help us grow by bookmarking this page on any social bookmarking site.
Bookmark and Share





Comments









Community News





Web Hosting SpotLight


Consulting


For consulting and work related queries click here.



Advertise


Advertise with us. For more details click here.


Suggestions


Please provide your valuable suggesstions here.

This Site is hosted on

Lunarpages.com Web Hosting