如何使用 MVC3 Razor 佈局頁面?
我一直在閱讀有關佈局、部分、視圖和部分視圖的資訊,但我真的不知道如何處理像這個例子這樣的佈局:
- 頂部欄:就像 Facebook 在頂部的欄。我將包含身份驗證資訊和一般選項和菜單。
- 導航欄:將包含有關您在哪里以及您可以去哪裡的資訊。還有一個“搜尋”框。
- 正文:實際需要的資訊。
- 側欄:將包含有關正文內容的相關資訊。
- 頁腳:版權、許可和類似的東西。
正文將是“視圖”,側邊欄將是“部分”,頁腳將是“佈局”中的靜態 HTML,但是……什麼是頂部欄和導航?
頂欄與任何東西都沒有關係,所以我會把它作為“佈局”中的“部分視圖”,但我不能這樣做,因為它
<body>無論如何都必須在裡面,所以當我呼叫時@RenderBody(),它應該被渲染。與Navigation相同,它在某種程度上與正文相關,但我想將其分離為一個外部控制項,它自己執行並根據 URL 中的資訊顯示資訊。我應該如何處理這個?
更新,請閱讀:問題不是關於 CSS 和 HTML,不是關於如何佈局,而是關於如何使用 Razor 工具來做到這一點,它是關於 Razor
RenderBody和PartialView.當我從控制器返回結果時,我只想返回圖片中標記為“body”的內容,並將“side bar”作為部分返回,我想避免重複頂部條碼。有沒有辦法創建一個“ChildView”,它繼承自“ParentView”,而這個繼承自“Layout”,當我返回“View(“ChildView”)時,螢幕會自動建構?
該教程的最後一部分描述瞭如何使用 Html.RenderAction() 方法設計佈局以包含部分視圖。另請參閱 Html.RenderSection() 方法。
有一篇關於 Razor 佈局的精彩文章:ASP.NET MVC 3: Layouts with Razor。
基本上,您的結構將是:
_ViewStart.cshtml (將指向您的所有視圖共享的佈局和其他內容);
一個 .cshtml 將是您的佈局,即:_Layout.cshtml(類似於 Site.Master 網頁)。
在 _Layout.cshtml 中,您將放置 HTML 佈局,例如:
<body> <div id="maincontainer"> <div id="topsection"> <div class="topbar"> <h1>Header</h1> <div id="logindisplay"> @Html.Partial("_LogOnPartial") </div> </div> <div class="nav"> <ul><li>Home</li></ul> </div> </div> <div id="contentwrapper"> <div id="contentcolumn"> <div class="body"> @RenderBody() </div> </div> </div> <div id="sidebar"> <b>Side bar</b> </div> <div id="footer">Footer</div> </div> </body>看到我把@RenderBody() 放在了 div “#body” 中,所以當我的控制器返回一個 ActionResult 時,只有這個 div 會用結果更新。
