ASP.NET MVC Update Address Bar With Ajax Link

Question

Hello,

I'm trying to create an ajax-driven gallery where each photo in a sequence is loaded with an Ajax.Actionlink.

The user can get to any given photo by passing a parameter to the action method, eg: Gallery/Index?photo=100

The problem is that when the user is cycling through photos with the Ajax.Actionlink's the URL is no longer being updated (the way it would be during normal post-backs) so they can't copy paste from the address bar to get back to a photo.

---

My question is: what is the best way to solve this issue in ASP.NET MVC? One thing I was thinking of was updating the address bar with hashtags, but frankly I don't know if this is a good approach.

I could use some best-practice advice on how to solve this problem. Any suggestions would be much appreciated, thank you.

Answer 1

I would look into rewriting your routes to include the photo ID in the path.

E.g., /Gallery/Index/100 instead of ?photo=100. This would be why your ActionLink methods aren't working how they should, as the querystring isn't part of the route.

Answer 2

If you really want to update the address bar with each ajax update there are a couple of jquery / javascript libraries you can use as described in this blog post: http://stephenwalther.com/blog/archive/2010/04/08/jquery-asp.net-and-browser-history.aspx

However, the best practice solution is usually not to try and fake something like this (its only going to go wrong). If you want to give your users the ability to share or link to a photo is to provide a field with the appropriate url or permalink to the url that they can copy from. Google maps has a good example of this - if you wanted to share a map with someone else.