2012-04-29 34 views
1

我想創建像堆棧溢出的用戶頁面佈局在頁面的頂部,那裏是一個視圖(父視圖),然後在選項卡的內容,每個都有它自己的視圖(子視圖)。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; 
} 

回答

0

這是不可能的,他們正在使用一節。部分主要用於佈局頁面(主頁面相同)。很可能

更多,他們只是有多個視圖,並且他們通過哪個觀點是恰當的視圖()方法。他們可能會使用部分視圖或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 

這不是火箭科學。有這麼多的方法來做到這一點,並不需要太多的考慮就可以拿出其中一個。

+0

我想我可以通過重載視圖方法來實現這一點,每個方法都有自己的視圖。所以......我會爲頁面頂部創建一個局部視圖,以便不重複包含選項卡內容的每個視圖中的代碼? – Rich 2012-04-29 02:01:28

+0

@Rich - 是的,這是正確的。另一種方法是使用單個視圖,但根據查詢字符串選擇要顯示的部分視圖。真的有很多不同的方式可以做到這一點。 – 2012-04-29 04:06:52

+0

我有一個如何做到這一點的方式,我提到的方式可以提供一個代碼示例,說明如何按照您推薦的單一視圖的方式進行操作,並根據查詢字符串選擇要顯示的部分視圖?我無能爲力。 – Rich 2012-04-29 05:39:34