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&amp;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 &amp; Bookkeeping - General Service</a></li> <li><a href="#">Acupuncture</a></li> <li><a href="#">Advertising</a></li> <li><a href="#">Advertising - Agencies &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; Curtains</a></li> <li><a href="#">Drilling - Companies</a></li> <li><a href="#">Driving - Instruction</a></li> <li><a href="#">Drug - Abuse &amp; Addiction Info</a></li> <li><a href="#">Drywall &amp; Insulation Contractors</a></li> <li><a href="#">Earthquake Products &amp; 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 &amp; Physical Fitness Programs</a></li> <li><a href="#">Exterminating &amp; 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 &amp; Sororities</a></li> <li><a href="#">Games &amp; 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 &amp; 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 &amp; Diet Foods - Retail</a></li> <li><a href="#">House &amp; Building Movers</a></li> <li><a href="#">House Cleaning</a></li> <li><a href="#">Human Factors - Research &amp; Development</a></li> <li><a href="#">Human Resource Consultants</a></li> <li><a href="#">Importers</a></li> <li><a href="#">Industrial - Equipment &amp; 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 &amp; 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 &amp; Repairing (Wholesale)</a></li> <li><a href="#">Machinery - Specially Designed &amp; Built</a></li> <li><a href="#">Magicians</a></li> <li><a href="#">Maid &amp; Butler Service</a></li> <li><a href="#">Motorcycles - Supplies &amp; 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 &amp; 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 &amp; Lots Maintenance &amp; Marking</a></li> <li><a href="#">Parks</a></li> <li><a href="#">Party Supplies</a></li> <li><a href="#">Patio &amp; Deck Cleaning &amp; Restoration</a></li> <li><a href="#">Paving Contractors</a></li> <li><a href="#">Pumps (Wholesale)</a></li> <li><a href="#">Quilting - Materials &amp; Supplies</a></li> <li><a href="#">Radio Stations &amp; 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 &amp; Gravel (Wholesale)</a></li> <li><a href="#">School Supplies (Wholesale)</a></li> <li><a href="#">Schools &amp; Educational Services</a></li> <li><a href="#">Schools - Nursery &amp; Kindergarten Academic</a></li> <li><a href="#">Schools - Universities &amp; Colleges Academic</a></li> <li><a href="#">Shoe &amp; Boot Repairing</a></li> <li><a href="#">Shoes - Retail</a></li> <li><a href="#">Shopping Centers &amp; Malls</a></li> <li><a href="#">Shower Doors &amp; Enclosures</a></li> <li><a href="#">Sunglasses &amp; 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 &amp; Filing</a></li> <li><a href="#">Technical Manual Preparation</a></li> <li><a href="#">Tools - Electric - Repairing &amp; Parts</a></li> <li><a href="#">Tours - Operators &amp; Promoters</a></li> <li><a href="#">Tutoring</a></li> <li><a href="#">Ultrasonic Equipment &amp; 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 &amp; 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 &amp; Supplies (Manufacturers)</a></li> <li><a href="#">Yarn - Retail</a></li> <li><a href="#">Yoga Instruction</a></li> <li><a href="#">Youth Organizations &amp; 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 ]