Hi everybody,
In previous post, we talked about Knockout.js. Today, we are going to deal with how to change current URL without reflesh the page.
Actually, a lot of companies are using this operation which are facebook, wordpress, translate.google, and other web sites which uses single page application or kind of single page web sites. For example, In facebook, while you take a look the pictures of one of your friends or/and pages you likes, you can see what’s happening on the URL after you change another picture. Another, WordPress blogs, also mine’s, have a good paging. This paging brings the rest of pages one by one through scrolling instead of clicking the next or previous button. Morever, generally, A single Page Application(SPA) comprises only one page! So that, there is not any changing on the URL until you change it. Enough talking, Let’s write some code!
Create An ASP.NET MVC 4 Project with Basic Template Using Razor and Name it as “ModifyCurrentURL“
Add A Controller With “Empty MVC Controller” toYour Project and Name it “Home“
Add A View as “Index“
Reference jQuery library and form your View like this:
Add following codes inside “btnLocationHash click function“
//btnLocationHash => Code here window.location.hash = 'messages/mcansozeri';
Run the application and click the (Location Hash)Button. You’ll see not only that the URL is a localhost:portNo/messages/mcansozeri but also when you click, there is a hash tag (#) in the URL like “http://localhost:60997/#messages/mcansozeri“
Fistly, these kind of URLs are not user friendly. Also, if you use ASP.NET MVC like this sample, you should create a route for perfect match. Otherwise, you may in trouble 😀 On the other hand, “window.location.hash” works all major browsers even IE6+.
If we update the JavaScript codes as “window.location.hash = ‘/messages/mcansozeri‘”, the result will be “http://localhost:60997/#/messages/mcansozeri“. Even though you set a sharp symbol(#) to your window.location.hash, there is not going to change anything so that The URL will be same as before.
Let’s change browser’s history with “pushState“
Add following codes inside “btnPushState click function”
window.history.pushState("state", "title", "messages/mcansozeri");
Now re-run the application, click the “Push State Button” and take a look the URL
Two things you may have realized on the page which are:
- the URL does not contain sharp symbol(#)
- there is a history on the browser when click the button (the back button is active!)
And then, click the “Push State Button” more than two times.
To fix this repeating is to change pushState’s URL as “/messages/mcansozeri”
Calling pushState() is similar to setting window.location, they both will also create and active another history the current page. But pushState() has a few advantanges;
Setting window.location does not keep you at the same page. window.location does if you modify only the hash. You can create a new history entry with pushState(), even if the new URL different from the old URL.
What you need to to last thing is to try to use “replaceState” through following codes;
window.history.replaceState(null, "Title", "/messages/mcansozeri");
Run the application again and watch the page out
history.replaceState() works exatcly like history.pushState() except that the replaceState() modifies the current history instead of creating a new history.
Conclusion
window.location.hash can operates by all major browsers FF, Chrome, Safari, Opera, IE6+ as well. But history.replaceState() and history.pushState() are a property of HTML 5 so that you can not work it on from IE6 to IE9. It only works major browsers which are Chrome 5+, FF4+, IE10, Opera 11.50, Safari 5.0.
You benefit from this properties(pushState, replaceState) using history.js.
More information:
- https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
- http://stackoverflow.com/questions/5030564/how-can-i-use-window-history-pushstate-safely
- http://www.oshyn.com/_blog/General/post/JavaScript_Navigation_using_Hash_Change/
- http://stackoverflow.com/questions/2295845/how-can-i-remove-the-location-hash-without-causing-the-page-to-scroll
Download
Click here
#1 by Johne660 on April 28, 2014 - 1:31 pm
Aw, this was a very nice post. In thought I want to put in writing like this moreover taking time and actual effort to make an excellent article but what can I say I procrastinate alot and not at all seem to get something done. dcbeakgfbeed
#2 by Raj on July 3, 2014 - 3:09 pm
this works only with MVC? anyway we can implement this in a regular framework asp.net?
#3 by Mahmut Can Sozeri on July 3, 2014 - 3:34 pm
of course, you can use this technique in any web technology in the world include ASP.NET Web Forms(regular)
#4 by Doug Nelson on November 25, 2014 - 12:11 am
What happens if the page is refreshed? How do you fix the route config error?
#5 by Mahmut Can Sozeri on November 25, 2014 - 7:49 am
I’s not going to change when the page is refleshed. What kind of route config error you mean? Could you send a sample?
Thanks
#6 by доставка Кишинев on July 8, 2015 - 4:54 pm
Thank you!
It’s very useful and simple!