Click here to Skip to main content
15,904,494 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 57K   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 
The main problem with supporting the DataSource concept is the MSFT made the code that handles the messing work, private.

Quick, go to http://www.aisto.com/roeder/dotnet/[^] and download the most useful .Net utility ever, Lutz Roeder's Reflector.

Launch it, and then navigator to System.Web.UI.DataSourceHelper.GetResolvedDataSource(). Right-click on it, and choose "Disassembler".

Now, in the new right panel is the code we need. It takes a Datasource object and a DataMember name and returns an IEnumerable object. That would reduce you AlphaLinks function down to just the foreach loop. Unfortunately, that particular method is "internal" so we can't call it directly. So, the best we can do until MSFT come to it's senses and makes it public is to create our own DataSourceHelper in our own namespace, basically, by copy-n-pasting from Reflector.

However, we original had it so that we could say which column in the record set was being used, which we lost in the latest version. Never fear. You'll note that ListBoxes do exactly what we want via their DataTextField member. And with Reflector, you can now see how they do it. You can look at System.Web.UI.WebControls.ListControl.OnDataBinding for all the gory details, but for our purposes, it's basically just:

foreach (object obj in DataSourceHelper.GetResolvedDataSource(DataSource, DataMember))
{
    string letter = DataBinder.GetPropertyValue(obj, DataTextField, null);
    // etc 
}



Truth,
James
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 

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.