Click here to Skip to main content
15,895,462 members
Articles / Web Development / ASP.NET
Article

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 56.9K   651   26   9
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

Introduction

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.

C#
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};" + 
        "dsn=DNSNAME;database=DBNAME;uid=USER;password=PASS;");
    sqlConn.Open();
    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:

C#
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, 
                                                                  "LetterClick");
        hypLink.Name = this.UniqueID;
        hypLink.InnerHtml = "All";
        Controls.Add(hypLink);
    } else {
        Label lblAll = new Label();
        lblAll.Text = "All";
        Controls.Add(lblAll);
    }
    foreach (char C in alphabet){
      Label lblSpace = new Label();
      lblSpace.Text = " ";
      Controls.Add(lblSpace);

      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 + "";
          Controls.Add(hypLink);
      } else {
          Label lblLetter = new Label();
          lblLetter.Text = sCurrentChar;
          Controls.Add(lblLetter);
      }
    }
    base.Render(writer);
}
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";
                else
                    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";
                else
                    abc[letter] = "on";
            }
        }
    }
    abc["All"] = "on";
    return abc;
}

Future plans

More robustness.

History

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

License

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


Written By
Web Developer
Canada Canada
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionNew Build?? Pin
Frank Walsh4-Oct-05 9:09
Frank Walsh4-Oct-05 9:09 
GeneralEeek! Pin
James Curran5-May-05 6:28
James Curran5-May-05 6:28 
GeneralRe: Eeek! Pin
micahbowerbank5-May-05 7:24
micahbowerbank5-May-05 7:24 
GeneralRe: Eeek! Pin
James Curran6-May-05 5:49
James Curran6-May-05 5:49 
GeneralRe: Eeek! Pin
Anonymous7-May-05 3:39
Anonymous7-May-05 3:39 
GeneralRe: Eeek! Pin
micahbowerbank9-May-05 8:56
micahbowerbank9-May-05 8:56 
GeneralRe: Eeek! Pin
James Curran10-May-05 5:24
James Curran10-May-05 5:24 
GeneralRe: Eeek! Pin
Wcohen6-Sep-05 17:22
Wcohen6-Sep-05 17:22 
GeneralRe: Eeek! Pin
lolocmwa25-May-05 21:40
lolocmwa25-May-05 21:40 
> Well, the next major things I'd suggest is to stop writing the
> javascript postbacks yourself. .Net has encapsulated that into the
> LinkButton, so you should use that. Building on what I wrote before:

.NET handle events like a pig, use the __doPostBack method() and Capture yourself the event IPostBackData ??? or using __EventTarget and __EventParameter in the Form collection. , so you don't have to recreate controls that's on your page to be sure an event is fired Smile | :) It can be OK if you assume that layout will be the same, but it's useless (and incredibly resources eater) if you want to change the layout of the page on an action or redirect your page.






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.