Question

I’m building an Asp.net mvc 3 application. What I want to do, is a profile page (pretty mutch like the stackoverflow profile page), and the content of this page will be splited in tabs, each tab is represented by an PartialView.

When the user click on the tab X, I want to refresh only the tab area, without refreshing all my page. And in the same time changing my URL adress, so if the user click on the browser refresh button, it refresh the page with the selected tab. Is this possible ?

What I already know, is how to get data using AJAX, and replace the content of my view. I’ve read this post , I found it interesting, but it refresh all the page.

Thanks in advance.

Answer 1

You are on the right track. You will need to use both ajax to get the html to render without refreshing the page, as well as use push state to update the URL to include the current tab.

You could do these things as separate operations, but I would suggest using PJAX. With PJAX you will need a little additional logic in your server to decide whether to return the full html page with the layout, or just return the partial (a PJAX request).

Here is our Foo controller. Index has a default selected tab of “Bar”. The Bar and Baz actions return the Index view, but with different tabs being the selected tab. If it is a PJAX request, then all we need is the partial view that fills in the tab content.

public class FooController : Controller
{
    public ActionResult Index()
    {
        ViewBag.SelectedTab = "Bar";
        return View();
    }

    public ActionResult Bar()
    {
        if(Request.Headers["X-PJAX"] != null)
            return PartialView();
        ViewBag.SelectedTab = "Bar";
        return View("Index");
    }

    public ActionResult Baz()
    {
        if (Request.Headers["X-PJAX"] != null)
            return PartialView();
        ViewBag.SelectedTab = "Baz";
        return View("Index");
    }
}

Inside of the Foo/Index.cshtml we have the Razor code that will determine what partial view to render based on ViewBag.SelectedTab.

@{
    ViewBag.Title = "Foo";
}

<h2>Foo</h2>

<ul>
    <li><a class="tabs" href="@Url.Action("Bar", "Foo")">Bar</a></li>
    <li><a class="tabs" href="@Url.Action("Baz", "Foo")">Baz</a></li>
</ul>
<div id="tab_content">
    @if(ViewBag.SelectedTab == "Bar")
    {
        @Html.Partial("Bar")
    }
    @if (ViewBag.SelectedTab == "Baz")
    {
        @Html.Partial("Baz")
    }
</div>

@section scripts
{
    <script type="text/javascript">
        $(function() {
            $(".tabs").pjax("#tab_content");
        })
    </script>
}

The script section at the end is how you wire up PJAX. You are telling it, for all hyperlinks with the tabs class use pjax to dynamically load and render the html resulting from the href into the container with the id tab_content and update the url in the browser to be the url from the href.

Each tab’s partial view is fairly simple in this scenario

Bar.cshtml

<p>This is the Bar tab. No pun intended.</p>

Baz.cshtml

<p>This is the baz tab.</p>

This is obviously a very simplified solution. You typically would want to use a presentation model to handle the logic of the view. Also, I have intentionally left out any tab styling to demonstrate that this technique can be used on any type of link. It is not limited to only tabs.

The full source code for this example can be on my GitHub site.