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&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>
[/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 ]
