文章出處
文章列表
我們開發網站項目的時候，都會遇到這樣的問題：就是頁面怎么統一風格，有一致的外觀，在之前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.運行程序：
文章列表
全站熱搜
留言列表
