1

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

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

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

我无法在网上找到任何有用的东西。有人可以告诉我如何做到这一点，或者至少为我指明正确的方向吗？

提前致谢！

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

高温高压

最终解决方案：

控制器动作

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...

子导航部分视图

<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 助手

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;
}
4

1 回答 1

0

他们不太可能为此使用一个部分。部分主要用于布局页面（母版页的等效项）。

很可能，它们只有多个视图，并且它们将适合 View() 方法的视图传递给 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()
}

在仪表板.cshmtl

... your parent view

@Html.Partial(ViewBag.Tab)

... your footer

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

于 2012-04-29T01:04:24.490 回答