Question

I want to create a layout like the User page on Stack Overflow where there is a view (the parent view) at the top of the page and then content in tabs, each with it’s own view (child views).

When I hover over each of the tabs on the User page in SO it looks like they are pointed at the user controller and are being sent the tab name in the query string to render the appropriate tab content.

I believe I can achieve this using a layout with a section defined in the parent view. The section would be the child view, but I don’t know how I would tell the section which view or partial view to show.

I have not been able to find anything useful on the web. Can someone tell me how to do this or at least point me in the right direction?

Thanks in advance!

Edit: Thanks to @Mystere’s help I was able to come up with the solution below in case anyone else is trying to do the same thing.

HTH

Final Solution:

Controller Actions

public ActionResult Details(int id, string tab = null)
{   
    ViewBag.Jobid = id;
    ViewBag.Tab = tab ?? "Services";

    var viewModel = getJobRecordDetails(id);

    return View(viewModel);
}

public ActionResult JobInfo(int id, string tab)
{
    ViewBag.Jobid = id;
    ViewBag.Tab = tab;

    if (tab == "Services")
    {
        var viewModel = getServices(id);
        return View("Services", viewModel);   
    }

    if (tab == "Equipment")
    {
        var viewModel = getEquipment(id);
        return View("Equipment", viewModel);
    }

    if (tab == "Personnel")
    {
        var viewModel = getPersonnel(id);
        return View("Personnel", viewModel);
    }

    return View("Error");
}

Parent View

@model MyApplication.Models.JobViewModel

@{
    ViewBag.Title = "Details";
}
<h2>Job Details</h2>

...
@* Child View Action *@
@Html.Action("JobInfo", new { id = ViewBag.Jobid, tab = ViewBag.Tab })

Child View

@model MyApplication.Models.ServicesViewModel[]

@{
    ViewBag.Title = "Services";
    Layout = null;
}

@* Submenu Navigation *@
@{
    Html.RenderPartial("SubMenu");
}

<h2>Services</h2>

Services here...

Subnavigation Partial View

<div id="submenucontainer">
<ul id="submenu">
    <li class="@Html.ActiveTab("Job","JobInfo","Services")"><a href="@Url.Action("Details", "Job", new { id = @ViewBag.Jobid, tab = "Services" })">Services</a> </li>
    <li class="@Html.ActiveTab("Job","JobInfo","Equipment")"><a href="@Url.Action("Details", "Job", new { id = @ViewBag.Jobid, tab = "Equipment" })">Equipment</a></li>
    <li class="@Html.ActiveTab("Job","JobInfo","Personnel")"><a href="@Url.Action("Details", "Job", new { id = @ViewBag.Jobid, tab = "Personnel" })">Personnel</a></li>
</ul>

ActiveTab Helper

public static string ActiveTab(this HtmlHelper helper, string controller, string action, string tab)
{
    var classValue = "";

    var currentController =
            helper.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString();

    var currentAction =
            helper.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString();

    var currentTab = helper.ViewContext.Controller.ValueProvider.GetValue("tab").RawValue.ToString();

    if (currentController == controller && currentAction == action && currentTab == tab)
        classValue = "selected";

    return classValue;
}

Answer 1

It is unlikely they are using a section for that. sections are used primarily in layout pages (the equivelent of master pages).

More than likely, they just have multiple views, and they pass whichever view is appropriate to the View() method. They might use partial views, or MVC templates to render the tab areas, so that common code is factored out.

Edit:

As requested, code sample:

In action method:

public ActionResult Dashboard(string tab) {
    if (tab == "summary") 
        ViewBag.Tab = "~/Views/Dashboard/Summary.cshtml";
    if (tab == "activity")
        ViewBag.Tab = "~/Views/Dashboard/Activity.cshtml";

    return View()
}

in Dashboard.cshmtl

... your parent view

@Html.Partial(ViewBag.Tab)

... your footer

It’s not rocket science. There are so many ways to do this it doesn’t take much thought to come up with one of them.