ASP.NET MVC -
为了学习 ASP.NET MVC建一个 Internet
部分 3:
添加布局
文件 _Layout.cshtml 它位于 Views Shared 文件夹。
<!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 51helps 2012. All Rights Reserved.</p> </section> </body> </html>
HTML 帮助器
码中,HTML 修改 HTML 输出:
@Url.Content() - URL 插入。
@Html.ActionLink() - HTML 插入。
章节讲解 HTML 帮助器。
Razor 语法
码是使用 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; color: #996600; } #main { padding: 20px; background-color: #ffffff; border-radius: 0 4px 4px 4px; } a { color: #034af3; } /* 菜单样式 ------------------------------*/ 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; } /* 表单样式 ------------------------------*/ fieldset { padding-left: 12px; } fieldset label { display: block; padding: 4px; } input[type="text"], input[type="password"] { width: 300px; } input[type="submit"] { padding: 4px; } /* 数据样式 ------------------------------*/ 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 文件
Shared 于 Views 中的 _ViewStart 下内容:
@{Layout = "~/Views/Shared/_Layout.cshtml";}
视图。
代码。
知识。