Question

我想创建一个类似Stack Overflow上的User页面的布局，其中页面顶部有一个视图（父视图），然后是选项卡中的内容，每个都有自己的视图（子视图）。

当我将鼠标悬停在“用户”页面上的每个选项卡上时，看起来它们指向用户控制器，并且正在查询字符串中发送选项卡名称以呈现相应的选项卡内容。

我相信我可以使用在父视图中定义的部分的布局来实现此目的。该部分将是子视图，但我不知道如何告诉该部分显示哪个视图或部分视图。

我无法在网上找到任何有用的内容。有人能告诉我怎么做或者至少指出我正确的方向吗？

提前致谢！

编辑：感谢@ Mystere的帮助，我能够提出下面的解决方案，以防其他人试图做同样的事情。

HTH

最终解决方案：

控制器操作

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");
}

家长视图

@model MyApplication.Models.JobViewModel

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

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

子视图

@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

他们不太可能使用某个部分。部分主要用于布局页面（等同于母版页）。

很可能，它们只有多个视图，并且它们会传递适合View（）方法的视图。他们可能会使用部分视图或MVC模板来呈现选项卡区域，以便将常用代码排除在外。

编辑：

根据要求，代码示例：

在行动方法中：

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()
}

在Dashboard.cshmtl

中

... your parent view

@Html.Partial(ViewBag.Tab)

... your footer

这不是火箭科学。有很多方法可以做到这一点，并不需要花太多时间想出其中一个。

MVC3父子视图

1 个答案: