MVC layout
ASP.NET MVC - Style and Layout
To learn ASP.NET MVC, we will build an Internet application.
Part 3: Adding style and a unified look (layout).
Add layout
The file _Layout.cshtml represents the layout of each page in the application. It's located in the Shared folder within the Views folder.
Open the file _Layout.cshtml and replace the content with:
<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 Helper
In the above code, the HTML helper is used to modify the HTML output:
@Url.Content() - The URL content will be inserted here.
@Html.ActionLink() - The HTML link will be inserted here.
You will learn more about HTML helpers in later chapters of this tutorial.
Razor Syntax
In the above code, the code marked in red is C# using Razor markup.
@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.
Add styles
The application's style sheet is Site.css, located in the Content folder.
Open the file Site.css and replace the content with:
{
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;
}
##_ViewStart fileThe _ViewStart file in the Shared folder (located within the Views folder) contains the following content:
