本節介紹ASP.NETMVC 應用程式中每個頁面的佈局以及樣式該如何設定。
為了學習ASP.NET MVC,我們將建立一個Internet 應用程式。
第3 部分:新增樣式和統一的外觀(佈局)。
檔案_Layout.cshtml 表示應用程式中每個頁面的佈局。它位於Views 資料夾中的Shared 資料夾。
開啟檔案_Layout.cshtml,把內容替換成:
<!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("Home", "Index", "Home") </li> <li>@Html.ActionLink("Movies", "Index", "Movies") </li> <li>@Html.ActionLink("About", "About", "Home") </li> </ul> <section id="main"> @RenderBody() <p>Copyright W3CSchool 2012. All Rights Reserved.</p> </section> </body> </html>
在上面的程式碼中,HTML 幫助器用於修改HTML 輸出:
@Url.Content() - URL 內容將在此插入。
@Html.ActionLink() - HTML 連結將在此處插入。
在本教學後面的章節中,您將學到更多關於HTML 幫助器的知識。
在上面的程式碼中,紅色標記的程式碼是使用Razor 標記的C#。
@ViewBag.Title - 頁面標題將在此處插入。
@RenderBody() - 頁面內容將在此呈現。
您可以在我們的Razor 教程中學習關於C# 和VB(Visual Basic)的Razor 標記的知識。
應用程式的樣式表是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; } #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; /*CSS3 properties*/ 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;orderpadding:3px; } table:data td { b3;orderpadding:3px; } table: td { b* 1px solid #c3c3c3; padding:3px; }
Shared 資料夾(位於Views 資料夾內)中的_ViewStart 檔案包含如下內容:
@{Layout = "~/Views/Shared/_Layout.cshtml";}
這段程式碼會自動加入到由應用程式顯示的所有視圖。
如果您刪除了這個文件,則必須在所有視圖中新增這行程式碼。
在本教學後面的章節中,您將學到更多關於視圖的知識。
ViewStart 視圖一般是直接存在與Views 視圖下面的。當然其他資料夾下面也是可以有ViewStart. 視圖頁面的(前提是這個資料夾是在Views 資料夾下)。