In this article i'm gonna show you how i do when i have to update some content with AJAX and i have to change
the URL.
First, let's see an example to understand it better.
If
the user is reading a News with Id 1 and he clicked on another News with Id 2, if we update
the content with AJAX
the user is now reading
the News Id 2 but
the URL remains
the same, for example: http://localhost/News/Read/1
Now let's see another example from Facebook. If i'm reading my profile and i click on Photos, Facebook updates it with AJAX and
the URL switch to: http://www.facebook.com/guilhermegeek#!/guilhermegeek?sk=photos
If we enter on that URL, it's mapped to: http://www.facebook.com/guilhermegeek?sk=photos
The trick here is
the parameters that we use after
the #!. Those parameters are never sent to
the server
side, so we handle them on
the client side (javascript).In
the example of Facebook, he receives my profile name (guilhermegeek) and
the action is to read photos.
A few time ago i've written an article in my Portuguese blog explaining how to use an alternative to clients with javascript disabled. Like this:
<a onclick="javascript:ReadNews(id);" href="#!News/Read/@id/">Title</a>
When
the user enter
the link of that news, my function Read(); fills
the News in
the page. Then, i add
the #!News/Read/@id/ to my URL. It's gonna stay something like this:
http://localhost/News/Read/1#!News/Read/2
As i explained before,
the News that
the user is reading has
the Id 2.
The next step is to use javascript to check if
the URL that
the user typed has other News Id, because if we enter on
the above URL our controller will get
the Id 1 (everything after to
the # isn't sent to
the server side).
$(document).ready(function () {
var h = window.location.hash;
if (h != null) {
var parts = window.location.href.split('#!');
if (parts.length > 1) {
window.location.replace("http://localhost/" + parts[1]);
}
}
});
It's pretty simple. I'm cutting everything after
the #!, then i redirect
the user to a new page. So, it's gonna stay:http://localhost/News/Read/2
