Maintaining Browser History in a Silverlight Application

The purpose of maintaining browser history is to give you the ability to enable the browser back button and code for deep linking which improves your discoverability.

This blog post is part four of my four part series on SEO for Silverlight Applications. I put this content together for my talk I gave at the Minnesota Developer's Conference which was last September. Fun Times. ( :-) )

The other posts in this series can be found here: Part I, Menu in Html and Silverlight, this is the Sitemap demo
Part II, Show Multiple Silverlight Controls in the Same Page with jQuery
Part III, service layer communicatioons - the Glue between the Silverlight and the WebApp

Maintaining history and deep linking ability

There are other ways to do this, maintaining browser history for back button and deep linking. In these early days of MVC, though, it’s a little bit to me like the Wild Wild West. What I mean is sometimes it just feels like every man for himself and the man with the biggest gun is the law. So, I brought out the big gun for my browser history and found myself a jquery plugin that is supposed to do the job.

Using this jQuery plugin, jquery.history - I’ve linked to the file menu.js which we’ve looked at before. In the function that sets up all the actions I need to complete when the page loads, ( that’s the $(document).ready function), I've placed a function call that initializes the history object.

 
function pageload(hash) {
// hash doesn't contain the first # character.
if(hash) {
// restore ajax loaded state
$("#load").load(hash + ".html");
} else {
// start page
$("#load").empty();
}
}

Every time a Silverlight object invokes a script that loads a new Island, it also invokes this Function silverlightHistory with the parameter (detailsurl) . This is the script which sets my new url up in the address bar, and adds me to history.

   
// set onlick event for buttons
function silverlightHistory( detailsurl ){
// 
var hash = detailsurl;
hash = hash.replace(/^.*#/, '');
// moves to a new page. 
// pageload is called at once. 
$.historyLoad(hash);
return false;
}
function setProductDetails( detailsurl )
{
//setup for browser history
silverlightHistory( detailsurl );
$('#sl-productListDisplay').html(" ").fadeOut();
//fetch the silverlight product details and plug it in, it's controlid #2
$.get('/Content/sl.htm', function(data){ 
setSilverlight(data, 'ControlId', 2, 'sl-productListDisplay', detailsurl);})
}