Question

In MVC 3 project, I have a Controller action that returns a View. Let’s call it "Profile".

This Profile View has 3 tabs on it. The content of each tab is loaded with jQuery AJAX from 3 different controllers. Let’s say the 3 tabs are called

Contact, Interests, and Games

What I want to do, is when the user types the following into browser’s URL box:

http://www.mywebsite.com/profile/contact

it should open the Profile View with Contact tab being displayed. If the users types

http://www.mywebsite.com/profile/interests

it should open the Profile View with Interests tab being displayed.

This is easy, and now comes the hard part. While inside the Profile View with the Contact tab opened, if the user clicks on the Interests tab, I want that tab rendered with HTML from AJAX call and I want the URL to change and display

http://www.mywebsite.com/profile/interests

Is this possible? How can I accomplish this?

Answer 1

Javascript will not allow you to change the URL without triggering a page load – it’s a basic security feature, as phishers would use it to make it look like you were at usbank.com rather than stealingyouridentity.com.

The best way to do it to use window.location.hash rather than a full, new URL.