title: Load content with AJAX depending on URL and vice versa
body: <p>In MVC 3 project, I have a Controller action that returns a View.  Let's call it "Profile".</p>
  
  <p>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</p>
  
  <p>Contact, Interests, and Games</p>
  
  <p>What I want to do, is when the user types the following into browser's URL box:</p>
  
  <blockquote>
    <p>www.mywebsite.com/profile/contact</p>
  </blockquote>
  
  <p>it should open the Profile View with Contact tab being displayed.  If the users types</p>
  
  <blockquote>
    <p>www.mywebsite.com/profile/interests</p>
  </blockquote>
  
  <p>it should open the Profile View with Interests tab being displayed.  </p>
  
  <p>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 </p>
  
  <blockquote>
    <p>www.mywebsite.com/profile/interests</p>
  </blockquote>
  
  <p>Is this possible?  How can I accomplish this?</p>
  
  <p>P.S.  If anyone wants to change the title of this question, please feel free to do so.  Thank you!</p>