[Blog Post] How To Modify Current URL Without Reloading or Redirection Using JavaScript(location.hash, history.pushState, history.replaceState)


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

How To Modify Current URL Without Reloading or Redirection Using JavaScript

Add A Controller With “Empty MVC Controller” toYour Project and Name it “Home

How To Modify Current URL Without Reloading or Redirection Using JavaScript ASPNET MVC

Add A View as “Index

How To Modify Current URL Without Reloading or Redirection Using JavaScript ASPNET MVC Add A View

Reference jQuery library and form your View like this:

How To Modify Current URL Without Reloading or Redirection Using JavaScript ASPNET MVC Add A View Location_Hash PushState ReplaceState

Add following codes inside “btnLocationHash click function

//btnLocationHash => Code here
window.location.hash = 'messages/mcansozeri';

How To Modify Current URL Without Reloading or Redirection Using JavaScript ASPNET MVC Add A View Location_Hash PushState ReplaceState window.Location.HashRun 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/mcansozeriHow To Modify Current URL Without Reloading or Redirection Using JavaScript ASPNET MVC Add A View Location_Hash PushState ReplaceState window.Location.Hash2

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.hashworks all major browsers even IE6+.

If we update the JavaScript codes as “window.location.hash = ‘/messages/mcansozeri‘”, the result will behttp://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");

How To Modify Current URL Without Reloading or Redirection Using JavaScript ASPNET MVC Add A View Location_Hash PushState ReplaceState window.Location.Hash3

Now re-run the application, click the “Push State Button” and take a look the URL

How To Modify Current URL Without Reloading or Redirection Using JavaScript ASPNET MVC Add A View Location_Hash PushState ReplaceState window.Location.Hash history.pushState

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.

How To Modify Current URL Without Reloading or Redirection Using JavaScript ASPNET MVC Add A View Location_Hash PushState ReplaceState2

To fix this repeating is to change pushState’s URL as “/messages/mcansozeri

How To Modify Current URL Without Reloading or Redirection Using JavaScript ASPNET MVC Add A View Location_Hash PushState ReplaceState3

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");

How To Modify Current URL Without Reloading or Redirection Using JavaScript ASPNET MVC Add A View Location_Hash PushState ReplaceState4

Run the application again and watch the page out

How To Modify Current URL Without Reloading or Redirection Using JavaScript ASPNET MVC Add A View Location_Hash PushState ReplaceState5

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:

Download

Click here

, , , , , ,

  1. #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. #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)

  3. #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

  4. #6 by доставка Кишинев on July 8, 2015 - 4:54 pm

    Thank you!
    It’s very useful and simple!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s