This section introduces the layout of each page in the ASP.NET MVC application and how to set the style.
To learn ASP.NET MVC, we will build an Internet application.
Part 3: Add style and a unified look (layout).
The file _Layout.cshtml represents the layout of each page in the application. It's located in the Shared folder in the Views folder.
Open the file _Layout.cshtml and replace the content with:
<!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>In the code above, the HTML helper is used to modify the HTML output:
@Url.Content() - URL content will be inserted here.
@Html.ActionLink() - HTML link will be inserted here.
You'll learn more about HTML helpers in later chapters of this tutorial.
In the code above, the code marked in red is C# using Razor tags.
@ViewBag.Title - The page title will be inserted here.
@RenderBody() - The page content will be rendered here.
You can learn about Razor markup for C# and VB (Visual Basic) in our Razor tutorials.
The application's style sheet is Site.css, located in the Content folder.
Open the file Site.css and replace the content with:
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; /*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; padding:3px; } table.data td { border:1px solid #c3c3c3; padding:3px; }The _ViewStart file in the Shared folder (located within 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 delete this file, you must add this line of code to all views.
You'll learn more about views in later chapters of this tutorial.
The ViewStart view generally exists directly under the Views view. Of course, there can also be ViewStart. view pages under other folders (provided that this folder is under the Views folder).