The Ajax Control Toolkit includes a control extender [ The Paging Bulleted List Control Extender ] that lets you create a list that the user can filter by clicking on an index indicator.

This can be very useful, especially when your list is very large.

The jQuery ListNav Plug-In lets you do this with any unordered list.

What’s more, since the list is a standard HTML element, we could dynamicaly add items to the list in our client side JavaScript code.

When you run my sample application the whole list looks like this :

Then when I click on the “B” in the navigation bar the list is reduced to only those items that begin with the letter “B”.

The code is long but simple:


[sourcecode language="html"]
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<link href="Styles/listnav.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.6.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.listnav.pack-2.1.js" type="text/javascript"></script>
<script type=text/javascript charset=utf-8>
$(function () {
$(‘#myList’).listnav();
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>Welcome to ASP.NET!</h2>
<p>
To learn more about ASP.NET visit
<a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
</p>
<p>
You can also find
<a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
<div id="myList-nav"></div>
<br />
<ul id="myList">
<li><a href="#">411 Services</a></li>
<li><a href="#">Accountants</a></li>
<li><a href="#">Accounting & Bookkeeping – General Service</a></li>
<li><a href="#">Acupuncture</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Advertising – Agencies & Counselors</a></li>
<li><a href="#">Advertising – Computer</a></li>
<li><a href="#">Advertising – Promotional</a></li>
<li><a href="#">Attorneys – Service Bureaus</a></li>
<li><a href="#">Auctioneers</a></li>
<li><a href="#">Audio Visual Consultants</a></li>
<li><a href="#">Audio Visual Production Service</a></li>
<li><a href="#">Automobile – Renting</a></li>
<li><a href="#">Automobile – Repair & Service</a></li>
<li><a href="#">Banks</a></li>
<li><a href="#">Banquet Rooms</a></li>
<li><a href="#">Barber Shops</a></li>
<li><a href="#">Baseball Clubs</a></li>
<li><a href="#">Book Dealers – Used & Rare</a></li>
<li><a href="#">Bookbinders</a></li>
<li><a href="#">Brake Service</a></li>
<li><a href="#">Business – Management Consultants</a></li>
<li><a href="#">Business – Services</a></li>
<li><a href="#">Cabinet Makers</a></li>
<li><a href="#">Cabinets</a></li>
<li><a href="#">Cafeterias</a></li>
<li><a href="#">Calligraphers</a></li>
<li><a href="#">Campgrounds</a></li>
<li><a href="#">Cemeteries & Crematories</a></li>
<li><a href="#">Ceramic Products – Decorative</a></li>
<li><a href="#">Chambers of Commerce</a></li>
<li><a href="#">Crane Service</a></li>
<li><a href="#">Cruises</a></li>
<li><a href="#">Dancing Instruction</a></li>
<li><a href="#">Data Communications Equipment</a></li>
<li><a href="#">Deck Builders</a></li>
<li><a href="#">Delivery Service</a></li>
<li><a href="#">Dentists</a></li>
<li><a href="#">Department Stores</a></li>
<li><a href="#">Draperies & Curtains</a></li>
<li><a href="#">Drilling – Companies</a></li>
<li><a href="#">Driving – Instruction</a></li>
<li><a href="#">Drug – Abuse & Addiction Info</a></li>
<li><a href="#">Drywall & Insulation Contractors</a></li>
<li><a href="#">Earthquake Products & Services</a></li>
<li><a href="#">E-Commerce</a></li>
<li><a href="#">Education Centers</a></li>
<li><a href="#">Educational Consultants</a></li>
<li><a href="#">Educational Service – Business</a></li>
<li><a href="#">Electric Contractors</a></li>
<li><a href="#">Electric Transmission Equipment (Manufacturers)</a></li>
<li><a href="#">Electrolysis</a></li>
<li><a href="#">Erosion Control</a></li>
<li><a href="#">Excavating Contractors</a></li>
<li><a href="#">Executive Search Consultants</a></li>
<li><a href="#">Exercise & Physical Fitness Programs</a></li>
<li><a href="#">Exterminating & Pest Control Services</a></li>
<li><a href="#">Fabric Shops</a></li>
<li><a href="#">Fabrics (Wholesale)</a></li>
<li><a href="#">Facilities Management</a></li>
<li><a href="#">Farms</a></li>
<li><a href="#">Foundation – Educational Philanthropic Research</a></li>
<li><a href="#">Fraternities & Sororities</a></li>
<li><a href="#">Games & Game Supplies</a></li>
<li><a href="#">Garbage Collection</a></li>
<li><a href="#">Garden Centers</a></li>
<li><a href="#">Gas – Liquefied Petroleum – Bottled</a></li>
<li><a href="#">Guide Service</a></li>
<li><a href="#">Gymnastic Instruction</a></li>
<li><a href="#">Halls & Auditoriums</a></li>
<li><a href="#">Handyman Services</a></li>
<li><a href="#">Hardware – Retail</a></li>
<li><a href="#">Hardwood</a></li>
<li><a href="#">Health & Diet Foods – Retail</a></li>
<li><a href="#">House & Building Movers</a></li>
<li><a href="#">House Cleaning</a></li>
<li><a href="#">Human Factors – Research & Development</a></li>
<li><a href="#">Human Resource Consultants</a></li>
<li><a href="#">Importers</a></li>
<li><a href="#">Industrial – Equipment & Supplies (Wholesale)</a></li>
<li><a href="#">Internet – Services</a></li>
<li><a href="#">Inventors</a></li>
<li><a href="#">Investigators</a></li>
<li><a href="#">Investment – Management</a></li>
<li><a href="#">Investments</a></li>
<li><a href="#">Janitor Service</a></li>
<li><a href="#">Jewelers (Wholesale)</a></li>
<li><a href="#">Jewelers – Retail</a></li>
<li><a href="#">Jewelry – Designers</a></li>
<li><a href="#">Laboratories</a></li>
<li><a href="#">Laboratories – Research & Development</a></li>
<li><a href="#">Land Companies</a></li>
<li><a href="#">Landfills – Sanitary</a></li>
<li><a href="#">Lumber (Manufacturers)</a></li>
<li><a href="#">Lumber – Retail</a></li>
<li><a href="#">Machine Shops</a></li>
<li><a href="#">Machinery – Rebuilding & Repairing (Wholesale)</a></li>
<li><a href="#">Machinery – Specially Designed & Built</a></li>
<li><a href="#">Magicians</a></li>
<li><a href="#">Maid & Butler Service</a></li>
<li><a href="#">Motorcycles – Supplies & Parts (Manufacturers)</a></li>
<li><a href="#">Multimedia (Manufacturers)</a></li>
<li><a href="#">Museums</a></li>
<li><a href="#">Newspaper – Publishers</a></li>
<li><a href="#">Nonclassifiable Establishments</a></li>
<li><a href="#">Non-Profit Organizations</a></li>
<li><a href="#">Nurseries – Plants & Trees (Wholesale)</a></li>
<li><a href="#">Nurserymen</a></li>
<li><a href="#">Nutritionists</a></li>
<li><a href="#">Paint – Retail</a></li>
<li><a href="#">Painters</a></li>
<li><a href="#">Parking Area & Lots Maintenance & Marking</a></li>
<li><a href="#">Parks</a></li>
<li><a href="#">Party Supplies</a></li>
<li><a href="#">Patio & Deck Cleaning & Restoration</a></li>
<li><a href="#">Paving Contractors</a></li>
<li><a href="#">Pumps (Wholesale)</a></li>
<li><a href="#">Quilting – Materials & Supplies</a></li>
<li><a href="#">Radio Stations & Broadcasting Companies</a></li>
<li><a href="#">Railroads</a></li>
<li><a href="#">Ranches</a></li>
<li><a href="#">Reading Improvement Instruction</a></li>
<li><a href="#">Reading Rooms</a></li>
<li><a href="#">Real Estate</a></li>
<li><a href="#">Real Estate – Appraisers</a></li>
<li><a href="#">Real Estate – Consultants</a></li>
<li><a href="#">Restaurants</a></li>
<li><a href="#">Restaurants – American</a></li>
<li><a href="#">Restaurants – Bakeries</a></li>
<li><a href="#">Restaurants – Barbecue</a></li>
<li><a href="#">Roofing – Materials</a></li>
<li><a href="#">Roofing – Service Consultants</a></li>
<li><a href="#">Sand & Gravel (Wholesale)</a></li>
<li><a href="#">School Supplies (Wholesale)</a></li>
<li><a href="#">Schools & Educational Services</a></li>
<li><a href="#">Schools – Nursery & Kindergarten Academic</a></li>
<li><a href="#">Schools – Universities & Colleges Academic</a></li>
<li><a href="#">Shoe & Boot Repairing</a></li>
<li><a href="#">Shoes – Retail</a></li>
<li><a href="#">Shopping Centers & Malls</a></li>
<li><a href="#">Shower Doors & Enclosures</a></li>
<li><a href="#">Sunglasses & Sun Goggles (Wholesale)</a></li>
<li><a href="#">Surveyors – Land</a></li>
<li><a href="#">Tanning Salons</a></li>
<li><a href="#">Tattooing</a></li>
<li><a href="#">Tax Consultants</a></li>
<li><a href="#">Tax Return Preparation & Filing</a></li>
<li><a href="#">Technical Manual Preparation</a></li>
<li><a href="#">Tools – Electric – Repairing & Parts</a></li>
<li><a href="#">Tours – Operators & Promoters</a></li>
<li><a href="#">Tutoring</a></li>
<li><a href="#">Ultrasonic Equipment & Supplies</a></li>
<li><a href="#">Upholsterers</a></li>
<li><a href="#">Utilities – Underground – Cable Locating Service</a></li>
<li><a href="#">Vacuum Cleaners – Household – Dealers</a></li>
<li><a href="#">Vending Machines</a></li>
<li><a href="#">Ventilating Systems – Cleaning</a></li>
<li><a href="#">Venture Capital Companies</a></li>
<li><a href="#">Vineyards</a></li>
<li><a href="#">Vitamin Products (Manufacturers)</a></li>
<li><a href="#">Vitamins</a></li>
<li><a href="#">Wallpapers & Wallcoverings – Installation</a></li>
<li><a href="#">Windows – Repairing</a></li>
<li><a href="#">Wineries</a></li>
<li><a href="#">Wines – Consultants</a></li>
<li><a href="#">Wines – Retail</a></li>
<li><a href="#">Woodworkers</a></li>
<li><a href="#">Writers</a></li>
<li><a href="#">X-Ray – Apparatus & Supplies (Manufacturers)</a></li>
<li><a href="#">Yarn – Retail</a></li>
<li><a href="#">Yoga Instruction</a></li>
<li><a href="#">Youth Organizations & Centers</a></li>
</ul>
</asp:Content>

[/sourcecode]


Note that in the sample list the hrefs are all “#” but in a real application each list item would have an associated URL.

The list is wired up on line #10 but it’s important to note the naming convention required.

The unordered list is assigned an id of “myList”. The expectation is that there will be a div present which has an id of your list name with “-nav” appended. In the case of the code above the navigation div is assigned an as follows – id=”myList-nav”.

When we wire an unorderd list to the ListNav plug-in the div to be used for navigation is found due to the naming convention.

There are many things we can do with the href items in the list :

  • Navigate to another page or web site.
  • Call a single page / endpoint passing in a parameter that indicates the selected choice.
  • Call a JavaScript function with a parameter that indicates the selected choice.
  • Call an Ajax service method with a parameter that parameter that indicates the selected choice.

You can download a working example [ HERE ]