1

I am planing a simple website layout: Header with navigation, sidebar and a content block.

enter image description here

The whole site should be a single-page application because I am using a Cesium Visualization and a page reload would delete the current JS objects that are displayed in the Viewer.

Therefore I would like to reload the content container using AJAX to display my different "pages" and therefore keep all the JS Objects in the browser.

My question is:

Do you know a way to add a url-based navigation to this architecture?

For example: I am on the index page /index/ and enter the new url /content1/. The new url reloads the content container using AJAX and keeps the rest as it is. Therefore I would also be able to use the forward and backwards buttons of the browser.

May this be possible with ASP.net MVC routing? I am pretty new to this so I hope I discribed my problem well enough.

Thanks a lot!

  • if you enter url in the browser and hit then it will refresh the page and not work as single page but if you call url internally with ajax then it will work as single page application. – Sumit Sharma May 18 '18 at 08:44
  • for url change you should visit https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page – Sumit Sharma May 18 '18 at 08:48

1 Answers1

0

Try Pjax which uses ajax to load content dynamically via ajax and pushState to maintain url history i.e is a HTML5 api. You shall find more details in the link below

https://github.com/defunkt/jquery-pjax

If you are familiar with angularjs then using ngRoute is a better alternative to Pjax as it has an effective url management through the routing service, please check the below link for more details on ngRoute

https://docs.angularjs.org/api/ngRoute/service/$route