ASP.NET MVC - 样式和布局

为了学习 ASP.NET MVC，我们将构建一个 Internet 应用程序。

部分 3：添加样式和统一的外观（布局）。

添加布局

文件 _Layout.cshtml 表示应用程序中每个页面的布局。它位于 Views 文件夹中的 Shared 文件夹。

打开这个文件，把其内容替换为：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>@ViewBag.Title</title>
  6. <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
  7. <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
  8. <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script>
  9. </head>
  10. <body>
  11. <ul id="menu">
  12. <li>@Html.ActionLink("Home", "Index", "Home")</li>
  13. <li>@Html.ActionLink("Movies", "Index", "Movies")</li>
  14. <li>@Html.ActionLink("About", "About", "Home")</li>
  15. </ul> 
  16. <section id="main">
  17. @RenderBody()
  18. <p>Copyright jishuchi 2012. All Rights Reserved.</p>
  19. </section>
  20. </body>
  21. </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，并把其内容替换为：

  1. body
  2. {
  3. font: "Trebuchet MS", Verdana, sans-serif;
  4. background-color: #5c87b2;
  5. color: #696969;
  6. }
  7.  
  8. h1
  9. {
  10. border-bottom: 3px solid #cc9900;
  11. font: Georgia, serif;
  12. color: #996600;
  13. }
  14.  
  15. #main
  16. {
  17. padding: 20px;
  18. background-color: #ffffff;
  19. border-radius: 0 4px 4px 4px;
  20. }
  21.  
  22. a
  23. {
  24. color: #034af3; 
  25. }
  26.  
  27. /* 菜单样式 ------------------------------*/
  28. ul#menu
  29. {
  30. padding: 0px;
  31. position: relative;
  32. margin: 0;
  33. }
  34.  
  35. ul#menu li
  36. {
  37. display: inline;
  38. }
  39.  
  40. ul#menu li a 
  41. {
  42. background-color: #e8eef4;
  43. padding: 10px 20px;
  44. text-decoration: none;
  45. line-height: 2.8em;
  46. /*CSS3 properties*/
  47. border-radius: 4px 4px 0 0;
  48. }
  49.  
  50. ul#menu li a:hover
  51. {
  52. background-color: #ffffff;
  53. } 
  54.  
  55. /* 表单样式 ------------------------------*/
  56. fieldset
  57. {
  58. padding-left: 12px;
  59. } 
  60.  
  61. fieldset label
  62. {
  63. display: block;
  64. padding: 4px;
  65. }
  66.  
  67. input[type="text"], input[type="password"]
  68. {
  69. width: 300px;
  70. }
  71.  
  72. input[type="submit"]
  73. {
  74. padding: 4px;
  75. }
  76.  
  77. /* 数据样式 ------------------------------*/
  78. table.data
  79. {
  80. background-color:#ffffff;
  81. border:1px solid #c3c3c3;
  82. border-collapse:collapse;
  83. width:100%;
  84. }
  85.  
  86. table.data th
  87. {
  88. background-color:#e8eef4;
  89. border:1px solid #c3c3c3;
  90. padding:3px;
  91. }
  92.  
  93. table.data td 
  94. {
  95. border:1px solid #c3c3c3;
  96. padding:3px;
  97. }

_ViewStart 文件

Shared 文件夹（位于 Views 文件夹内）中的 _ViewStart 文件包含以下内容：

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

这段代码被自动添加到由应用程序显示的所有视图。

如果删除该文件，则必须向所有视图添加这段代码。

您将在本教程稍后的章节学到更多有关视图的知识。