I really like the explorer address bar in Vista, it is sort of like a breadcrumb but with menu drop downs:


In the application I am working on I wanted to create something similar, a mix between a breadcrumb and a menu. I wanted the menu "dropdown" to be filled with an ajax call, and I wanted the solution to be general enough to be easy to use in all parts of the application and dynamic so the breadcrumb/dropdown can be populated with what ever.

Here is a screenshot of what I ended up with:


In order to handle the ajax call and the dropdown javascript logic in a general way that would work over the whole application I ended up with what I think is an interesting solution, here is an example of what the html looks like for the breadcrumb:

<div id="breadcrumb">
  <a href="/History">History</a>
  <span class="dropdown {ajaxUrl: '/History/GetDirectories'}" />
  <a href="/History/trunk">trunk</a>  
  <span class="dropdown {ajaxUrl: '/History/GetDirectories/trunk'}" />

The span with the dropdown css class is the arrow element that you click on to show the dropdown menu. So what is the strange ajaxUrl that is embedded in the class attribute? The ajaxUrl is metadata that can be retrieved using the JQuery metadata plugin. This plugin allows you to place metadata in json format inside the class attributes, the data can then be easily extracted as a javascript object by just calling the metadata method.

The point of all this is that it is now very easy for each view to specify a unique breadcrumb and ajax url where the dropdown html content will be retrieved from. This is how it is used from the home view (using spark view engine):

    ${Html.ActionLink("Home", "Index")}    
    <var ajaxUrl="Url.Action('GetRepositories', 'Home')" />    
    <span class="dropdown {ajaxUrl: '${ajaxUrl}'}"></span>

The "<content:breadcrum" syntax is a way to output to a region in the master view (like content placeholders in the WebForms view engine).  In the above example the ajaxUrl is configured to route to the controller action GetRepositories, this action will render a partial view with what every should appear in the dropdown menu, in this case a list of repositories in a <ul> list.


Here is the javascript jquery code that performs the ajax call:

$(".dropdown").click(function(evt) {
    .html("<div class='ajax-loader-white'></div>")
    .css( { left: evt.pageX + "px" })            
  var ajaxUrl = $(this).metadata().ajaxUrl;        
    type: "GET",
    url: ajaxUrl,
    dataType: "html",
    success: function (data) {

It is interesting how the MVC programming model forces you to rethink old problems and come up with new solutions. Implementing a breadcrumb like this in WebForms would require a very different solution.

I guess no one has missed has the news that JQuery will ship with future versions of the ASP.NET MVC framework and eventually with Visual Studio. Ayende summed up my feelings best: "shocked and thrilled"! This not something I expected, I expected a Microsoft ASP.NET AJAX Query Framework or something :) This is the first time that I can think of that Microsoft will bundle a piece of open source software with one of their products. I am very excited by this new development from Microsoft.


jmorris said...

Good post, this will be very useful. I really like how much you can do with so little code using the JQuery/MVC stack. It's really elegant and you doesn't have that cheezy feel that ASP.NET 2.0 provided. It's like an API for developers by developers.

Anonymous said...

Is it possible to see a working example? the screenshots look very cool..

Torkel Ödegaard said...

Yes, http://demo.codesaga.com

manikal said...

Great stuff, simple and functional. Is it possible to download demo code?

Torkel Ödegaard said...

no, not currently, but I will make the app that uses this techniqe opensource soon, so check back in a couple of weeks

Grenade said...

Very interesting stuff...
I'm a bit perplexed about the <content:breadcrumb>... syntax. Is that a Spark thing?

Torkel Ödegaard said...

yes, that is a spark thing

Anonymous said...

Is the code still not available? Thanks! :)

sony said...

rally nice.

cm0s said...

I developed a jQuery plugin to generate a breadcrumbs which automatically resizes the number of elements displayed depending on the available browser window space (like the Windows 7 breadcrumbs, but without the drop down menu, it could be added later...).
If it can be of any help. Here is the link (jquery-rcrumbs

Anu said...

Nice explanation for creating a Breadcrumb menu using JQuery and ASP.NET MVC.

Online MVC Training
Dot Net Training in Chennai

kanchana said...

Your blog is awesome..You have clearly explained about ...Its very useful for me to know about new things..Keep on blogging..
PHP training in chennai

Reeta said...

Great post....Thank you for posting the great content……I found it quiet interesting, hopefully you will keep posting such blogs…
If you Want more seo course chennai

Arjun Rishi said...

Nice post. Keep sharing such a useful post.

digital marketing institute

Anu Sri said...

Great article. I like your post. Thanks for sharing.

web design training institute in Chennai

Geetha Devi said...

Nice Blog. Best Selenium Training in Chennai |Selenium Training in Chennai |
Android Training in ChennaiBest Manual Testing Training in chennai

Nivedageorge said...

Happy to visit your blog. Keep sharing such a useful post.

SEO Training in Kodambakkam

Louisa Revista said...

Thanks for some other wonderful article. Where else may just anyone get that kind of information in such
an ideal manner of writing? I’ve a presentation next week, and
I’m at the search for such information.

Here My web
- Grosir Jaket Parka
- Grosir Jaket Parka
- Grosir Jaket Parka
- Grosir Jaket Parka
- Grosir Jaket Parka
- Grosir Jaket Parka