ASP.NET MVC - Styles and Layouts

To learn ASP.NET MVC, we will build an Internet application.

Part 3:Add styles and a unified appearance (layout).

Add Layout

The file _Layout.cshtml represents the layout of each page in the application. It is located in the Shared folder within the Views folder.

Open this file and replace its 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 W3school 2012. All Rights Reserved.</p>
</section>
</body>
</html>

HTML Helper

HTML helpers are used to modify HTML output in the above code:

@Url.Content() - URL content is inserted here.

@Html.ActionLink() - HTML link is inserted here.

We will explain HTML helpers in a later section of this tutorial.

Razor Syntax

In the above code, the code marked in red is C# using Razor syntax.

@ViewBag.Title - Page title is inserted here.

@RenderBody() - Page content is rendered here.

You can learn C# and VB (Visual Basic) Razor syntax on our Razor TutorialLearn C# and VB (Visual Basic) Razor syntax.

Add style

The application's stylesheet is Site.css. It is located in the Content folder.

Open the file Site.css and replace its 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 style ------------------------------*/
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;
} 
/* Form 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 File

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 this file is deleted, this code must be added to all views.

You will learn more about views in the later chapters of this tutorial.