我想创建像堆栈溢出的用户页面布局在页面的顶部,那里是一个视图(父视图),然后在选项卡的内容,每个都有它自己的视图(子视图)。MVC3亲子访问量
当我将鼠标悬停在每一个在用户页面上的标签的,所以它看起来像他们指着用户控制器和正在发送的标签名称的查询字符串来呈现相应的选项卡的内容。
我相信我可以使用与父视图限定的部分的布局实现。该部分将是子视图,但我不知道如何告诉该部分显示哪个视图或部分视图。
我一直没能找到任何东西在网络上非常有用。有人可以告诉我如何做到这一点,或至少指出我在正确的方向吗?
在此先感谢!
编辑:感谢@ 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...
子导航管窥
<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;
}
我想我可以通过重载视图方法来实现这一点,每个方法都有自己的视图。所以......我会为页面顶部创建一个局部视图,以便不重复包含选项卡内容的每个视图中的代码? – Rich 2012-04-29 02:01:28
@Rich - 是的,这是正确的。另一种方法是使用单个视图,但根据查询字符串选择要显示的部分视图。真的有很多不同的方式可以做到这一点。 – 2012-04-29 04:06:52
我有一个如何做到这一点的方式,我提到的方式可以提供一个代码示例,说明如何按照您推荐的单一视图的方式进行操作,并根据查询字符串选择要显示的部分视图?我无能为力。 – Rich 2012-04-29 05:39:34