ASP.NET MVC - Styles and Layout


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

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

Add Layout

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

Open the file _Layout.cshtml and replace its contents 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 EXAMPLE 2012. All Rights Reserved.</p>
</section>
</body>
</html>

HTML Helpers

In the code above, HTML helpers are used to modify the HTML output:

@Url.Content() - URL content will be inserted here.

@Html.ActionLink() - HTML links will be inserted here.

In later chapters of this tutorial, you will learn more about HTML helpers.

Razor Syntax

In the code above, 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 in ourRazor tutoriallearn about Razor markup for C# and VB (Visual Basic).

Add Styles

The application's style sheet is Site.css, located in the Content folder.

Open the file Site.css and replace its contents 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;
}

_ViewStart File

The _ViewStart file in the Shared folder (located in 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.

In later chapters of this tutorial, you will learn more about views.


Other Extensions