標籤：
我們開發網站項目的時候，都會遇到這樣的問題：就是頁面怎麼統一風格，有一致的外觀，在之前ASP.NET的時代，我們有兩種選擇，一個是使用MasterPage頁，一個是手動，自己在每個頁面寫CSS樣式，但這樣代碼量太大了。。不可取，那麼到了ASP.NET MVC時代，有什麼技術可以統一頁面風格呢？？？有，那就是Layout布局視圖。下面就開始學習吧。
1. 首先使用空模板，建立一個MVC Web項目：
建立完成之後，初始化狀態是：
2.接著在根目錄【LayoutMVC這裡是】下，建立一個檔案夾【Content】,在裡面添加一個css檔案，取名【Site.css】
3.在【Views】檔案夾下，建立一個【Shared】檔案夾，在Shared檔案夾下，建立一個Layout布局頁
布局頁：
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @*Url.Content將虛擬路徑轉化為應用程式的絕對路徑 *@ <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" /></head><body> <header> <div class="content-wrapper"> <div class="float-left"> <p class="site-title"> @Html.ActionLink("Code Express", "Index", "Home") </p> </div> <div class="float-right"> <nav> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> </ul> </nav> </div> </div> </header> <div id="body"> @RenderSection("featured", required: false) <section class="content-wrapper main-content clear-fix"> @RenderBody() </section> </div> <footer> <div class="content-wrapper"> <div class="float-left"> <p>© @DateTime.Now.Year – Code Express</p> </div> </div> </footer></body></html>In this layout we are using a HTML helper method and some other system defined methods so let‘s see these methods one by one. 在布局頁裡面，我們使用了HTML協助類的方法，和其他一些系統定義的方法，我們來分別看看這些方法。
Url.Content(): Content() method is a method of UrlHelper class. It converts a virtual (relative) path to an application absolute path.
It has one parameter of string type that is a virtual path of the content.
It returns an application‘s absolute path.
If the specified content path (parameter of the method) does not start with the tilde (~) character then this method returns contentPath unchanged.
Url.Content() ensures that all links work no matter if the site is in a virtual directory or in the web site root.
URL。Content方法，是UrlHelper類中的方法，它可以把虛擬【相對】路徑轉化為應用程式的絕對路徑，它有一個string類型的參數，也就是檔案的虛擬路徑。如果這個路徑沒有以~波浪線開頭，然後這個方法就會返回一個固定路徑，
它確保所有的連結都能正常工作，不管網站是在虛擬路徑中或者是在網站的根目錄下。
Html.ActionLink(): The easiest way to render an HTML link in is to use the HTML.ActionLink() helper.
With MVC, the Html.ActionLink() does not link to a view.
It creates a link to a controller action. ActionLink() is an extension method of the HtmlHelper class.
It returns an anchor element (an element) that contains the virtual path of the specified action.
When you use an ActionLink() method then you need to pass three string parameter.
The parameters are linkText (the inner text of the anchor element), actionName (the name of the action) and controllerName (the name of the controller).
HTML.ActionLink方法，這是最簡單的方法，來做一個HTML連結。在MVC中HTML.ActionLink不是連結到視圖，而是連結到控制器的方法，ActionLink是HTMLHelper類的擴充方法。
它返回了一個包含指定Action的虛擬路徑的連結。使用ActionLink需要傳遞3個參數，第一個是連結顯示的文本，第二個是要連結的控制器方法，第三個是控制器的名字。RenderSection(): RenderSection() is a method of the WebPageBase class.
Scott wrote at one point, The first parameter to the "RenderSection()" helper method specifies the name of the section we want to render at that location in the layout template.
The second parameter is optional, and allows us to define whether the section we are rendering is required or not.
If a section is "required", then Razor will throw an error at runtime
if that section is not implemented within a view template that is based on the layout file (that can make it easier to track down content errors). It returns the HTML content to render.
RenderSection是WebPageBase類中的方法，我們可以在布局頁中使用它來，作為一個預留位置，就和ASP.NET中類似，有兩個參數，一個是名字，一個是Required，Required設定為True的時候，我們在視圖中就一定要添加這個塊，否則啟動並執行時候，報錯。
RenderBody(): In layout pages, renders the portion of a content page that is not within a named section. It returns the HTML content to render. RenderBody is required, since it‘s what renders each view.
RenderBody是載入顯示，不在RendSection代碼快中的內容，RenderBody是必須要的。
The _ViewStart File
_ViewStart檔案，指定了使用的布局頁，如果沒有的話，你就需要在每個視圖中手動，添加
@{ Layout = "~/Views/Shared/_Layout.cshtml";}
The "_ViewStart" file in the Views folder contains the following content: @{ Layout = "~/Views/Shared/_Layout.cshtml"; }
This code is automatically added to all views displayed by the application. If you remove this file then you must add this line to all views.
4.接著，我們建立一個控制器Home，建立對應的Index視圖，指定我們剛才建立的布局頁
public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } }
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml";}<h2>Index</h2>
5.運行程式：
MVC學習系列5--Layout布局頁和RenderSection的使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
