您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> ASP.NET 基礎

ASP.NET MVC 版面配置與樣式實作：_Layout、Razor 語法、CSS 樣式表與 _ViewStart 完整指南

編輯：ASP.NET 基礎

ASP.NET MVC 版面配置與樣式系統完整實作

掌握 MVC 統一外觀架構：_Layout 主版面頁面、Razor 標記語法、CSS 樣式表管理、HTML Helper 應用與 _ViewStart 全域配置。

_Layout.cshtml - 主版面頁面

位於 Views/Shared/_Layout.cshtml，定義全站共用的 HTML 架構：

完整版面範本

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script>
</head>
<body>
    <ul id="menu">
        <li>@Html.ActionLink("首頁", "Index", "Home")</li>
        <li>@Html.ActionLink("電影", "Index", "Movies")</li>
        <li>@Html.ActionLink("關於", "About", "Home")</li>
    </ul> 
    <section id="main">
        @RenderBody()
        <p>Copyright W3CSchool 2012. All Rights Reserved.</p>
    </section>
</body>
</html>

關鍵 Razor 標記解析

標記	功能	說明
@ViewBag.Title	動態頁面標題	各視圖設定 ViewBag.Title
@Url.Content()	解析虛擬路徑	~/ 代表應用程式根目錄
@Html.ActionLink()	產生動作連結	自動依路由產生正確 URL
@RenderBody()	渲染內容頁面	內容視圖注入位置

Razor 語法核心規則

語法	用途	範例
@變數	輸出變數值（自動 HTML 編碼）	@ViewBag.Title
@{ 程式碼 }	多行程式碼區塊	@{ var x = 1; }
@: 文字	輸出純文字內容	@: 這是純文字
<text>...</text>	輸出多行文字區塊	<text>多行<br/>內容</text>
@if/@foreach/@using	控制流程指令	@if (條件) { ... }
@model 型別	強型別視圖宣告	@model MovieDB

Site.css - 樣式表完整規劃

位於 Content/Site.css，採用模組化區段管理：

基礎重設與排版

body {
    font: "Trebuchet MS", Verdana, sans-serif;
    background-color: #5c87b2;
    color: #696969;
}

h1 {
    border-bottom: 3px solid #cc9900;
    font: Georgia, serif;
    color: #996600;
}

#main {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 0 4px 4px 4px;
}

a {
    color: #034af3;
}

選單樣式模組

/* Menu Styles */
ul#menu {
    padding: 0px;
    position: relative;
    margin: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: #e8eef4;
    padding: 10px 20px;
    text-decoration: none;
    line-height: 2.8em;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: #ffffff;
}

表單樣式模組

/* Forms Styles */
fieldset {
    padding-left: 12px;
}

fieldset label {
    display: block;
    padding: 4px;
}

input[type="text"], input[type="password"] {
    width: 300px;
}

input[type="submit"] {
    padding: 4px;
}

資料表格樣式模組

/* Data Styles */
table.data {
    background-color: #ffffff;
    border: 1px solid #c3c3c3;
    border-collapse: collapse;
    width: 100%;
}

table.data th {
    background-color: #e8eef4;
    border: 1px solid #c3c3c3;
    padding: 3px;
}

table.data td {
    border: 1px solid #c3c3c3;
    padding: 3px;
}

_ViewStart.cshtml - 全域版面指定

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

運作機制

所有視圖執行前自動套用此設定
若刪除此檔，每個視圖需手動加入 Layout 指定
可在視圖中覆寫：@{ Layout = "~/Views/Shared/_AdminLayout.cshtml"; }

HTML Helper 在版面中的應用

Helper	版面用途	範例
@Html.ActionLink	導航選單連結	@Html.ActionLink("首頁", "Index", "Home")
@Html.Partial	共用區塊（登入列、頁尾）	@Html.Partial("_LoginPartial")
@Html.RenderAction	動態子區塊（購物車、通知）	@Html.Action("CartSummary", "Cart")
@Url.Content	靜態資源路徑解析	@Url.Content("~/Content/Site.css")

進階版面技巧

選擇性區塊

@* _Layout.cshtml *@
@RenderSection("scripts", required: false)

@* 內容視圖 *@
@section scripts {
    <script src="~/Scripts/custom.js"></script>
}

多版面支援

@* 前台版面 *@
Layout = "~/Views/Shared/_Layout.cshtml";

@* 後台版面 *@
Layout = "~/Views/Shared/_AdminLayout.cshtml";

@* 列印版面 *@
Layout = "~/Views/Shared/_PrintLayout.cshtml";