Click here to Skip to main content
15,034,432 members
Articles / Web Development / ASP.NET
Posted 4 May 2005


26 bookmarked

AlphaNavigator: Hotmail style strip of letters representing entries starting with a certain letter

Rate me:
Please Sign up or sign in to vote.
3.80/5 (5 votes)
9 May 20051 min read
This is a fully contained control that when used will give the designer a strip of letters representing entries starting with a certain letter. The characters that are found become hyperlinks. This control has a custom event handler for discovering which letter was clicked.

Image 1


I was asked to create a hotmail style (contacts section) alpha navigation strip. Seeing an opportunity for reuse I created a control instead of just a straight code. This control is in beta mode, as I’ll be adding more to its robustness, but I want to say that the current state of the control is completely stable and usable. This control takes a couple of variables, specifically the DB table and the column from which it will be compose its list of letters with links.

Using the code

The following is an example of the code needed to use the control. First reference the AlphaNavigator.dll, then add it to your Toolbox. Next drag a new instance onto the page and in the properties/events panel set the name for the LetterClick event.

protected AlphaNavigator.AlphaNavigator AlphaNavigator1;
private void Page_Load(object sender, System.EventArgs e){
    this.AlphaNavigator1.LetterClick += 
            new System.EventHandler(this.AlphaNavigator1_LetterClick);
    string sSql = "SELECT DISTINCT SUBSTRING(Column,1,1) " +
        "FROM Table ORDER BY SUBSTRING(Column,1,1) ";
    OdbcConnection sqlConn = null;
    sqlConn = new OdbcConnection("Driver={MySQL ODBC 3.51 Driver};" + 
    OdbcCommand sqlCmd;
    OdbcDataReader myReader;
    sqlCmd = new OdbcCommand(sSql,sqlConn);
    sqlCmd.CommandTimeout = 10;
    myReader  = sqlCmd.ExecuteReader();
    AlphaNavigator1.DataSource = myReader;
private void AlphaNavigator1_LetterClick(object sender,System.EventArgs e){
    Response.Write("Selected Letter:" + AlphaNavigator1.SelectedLetter);

AlphaNavigator control

This is the main code of the control. The Render method is overridden. The code simply queries the DB and loops through the rows while adding to an array the items that exist. Once this is complete the GUI is drawn:

protected override void Render(System.Web.UI.HtmlTextWriter writer) {
    StringDictionary abc = AlphaLinks();
    string alphabet = "#ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    if (this.SelectedLetter != ""){
        System.Web.UI.HtmlControls.HtmlAnchor hypLink = 
                     new System.Web.UI.HtmlControls.HtmlAnchor();
        hypLink.HRef = 
                     "javascript:" + this.Page.GetPostBackEventReference(this, 
        hypLink.Name = this.UniqueID;
        hypLink.InnerHtml = "All";
    } else {
        Label lblAll = new Label();
        lblAll.Text = "All";
    foreach (char C in alphabet){
      Label lblSpace = new Label();
      lblSpace.Text = " ";

      string sCurrentChar = C.ToString();
      if ((abc[sCurrentChar] == "on") && (this.SelectedLetter != sCurrentChar)){
          System.Web.UI.HtmlControls.HtmlAnchor hypLink = 
                                   new System.Web.UI.HtmlControls.HtmlAnchor();
          hypLink.HRef ="javascript:" + this.Page.GetPostBackEventReference(this, 
                                                   "LetterClick" + sCurrentChar);
          hypLink.Name = this.UniqueID + "_" + sCurrentChar;
          hypLink.InnerHtml = "" + sCurrentChar + "";
      } else {
          Label lblLetter = new Label();
          lblLetter.Text = sCurrentChar;
private StringDictionary AlphaLinks(){
    StringDictionary abc = new StringDictionary();
    if (_dataSource != null){
        if (_dataSource is DataView) {
            DataView dv = (DataView)_dataSource;
            foreach(DataRow dr in dv.Table.Rows){
                string letter = dr[0].ToString().ToUpper();
                if (Char.IsDigit(letter[0]))
                    abc["#"] = "on";
                    abc[letter] = "on";
        }else if (_dataSource is IDataReader) {
            IDataReader reader = (IDataReader)_dataSource;
            while (reader.Read()) {
                string letter = reader[0].ToString().ToUpper();
                if (Char.IsDigit(letter[0]))
                    abc["#"] = "on";
                    abc[letter] = "on";
    abc["All"] = "on";
    return abc;

Future plans

More robustness.


  • Version 1.0, May 2005.
  • Version 1.1, May 2005 - Rewritten, now uses DataSource to build self.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
Canada Canada
No Biography provided

Comments and Discussions

QuestionNew Build?? Pin
Frank Walsh4-Oct-05 9:09
MemberFrank Walsh4-Oct-05 9:09 
GeneralEeek! Pin
James Curran5-May-05 6:28
MemberJames Curran5-May-05 6:28 
GeneralRe: Eeek! Pin
micahbowerbank5-May-05 7:24
Membermicahbowerbank5-May-05 7:24 
GeneralRe: Eeek! Pin
James Curran6-May-05 5:49
MemberJames Curran6-May-05 5:49 
GeneralRe: Eeek! Pin
Anonymous7-May-05 3:39
MemberAnonymous7-May-05 3:39 
GeneralRe: Eeek! Pin
micahbowerbank9-May-05 8:56
Membermicahbowerbank9-May-05 8:56 
GeneralRe: Eeek! Pin
James Curran10-May-05 5:24
MemberJames Curran10-May-05 5:24 
GeneralRe: Eeek! Pin
Wcohen6-Sep-05 17:22
MemberWcohen6-Sep-05 17:22 
GeneralRe: Eeek! Pin
lolocmwa25-May-05 21:40
Memberlolocmwa25-May-05 21:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.