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: 

<%@ 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>
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 ]

Article Global Facebook Twitter Myspace Friendfeed Technorati del.icio.us Digg Google StumbleUpon Eli Pets