Question

Ok, so I am trying to have a static menu on the left side of the page so that it doesn’t change when click on a link.

How I am doing this is I call a little javascript on my A tag that calls some ajax. My controller returns a Partial View which then is loaded into my content div.

This all works fine. What I am having trouble with is that my URL isn’t changing and I would like to be able to use the back button to go back to a previous page.

I have tried to use location.hash but that doesn’t seem to work in the way that I hoped. Thoughts?

Below is my code.

HTML

<li class="item3"><a href="#">Admin</a>
<ul>
    <li class="subitem1"><a onclick="ChangePage('/Admin/PageName', 'Hash')">Page Name</a></li>

Javascript

function ChangePage(path, hash) {
        $.post(path, function (data) {
            $('#content').html(data);
            window.location.hash = '#' + hash;
        });
    }

Controller

 public ActionResult PageName()
    {
        return PartialView("MyPage");
    }

Thanks!
David

Answer 1

Consider checking out pjax. It’s very easy to implement w/ MVC, and will do exactly what you’re trying to accomplish.

This article talks about another option, PAjax.

Both leverage pushState, which as you stated in the comments, is still not fully supported by all browers. But pjax does gracefully degrade by doing a full page update when pushstate is not supported.