ASP.NET MVC - Styles and Layout

To learn ASP.NET MVC, we are Building an Internet Application.

Part III: Adding Styles and a Consistent Look (Layout).

Adding a Layout

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

Open the file and swap the content with this:

<!DOCTYPE html>
<meta charset="utf-8" />
<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>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Movies", "Index", "Movies")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<section id="main">
<p>Copyright W3schools 2012. All Rights Reserved.</p>

HTML Helpers

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

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

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

You will learn more about HTML helpers in a later chapter of this tutorial.

Razor Syntax

In the code above, the code marked red are 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 both C# and VB (Visual Basic) in our Razor tutorial.

Adding Styles

The style sheet for the application is called Site.css. It is located in the Content folder.

Open the file Site.css and swap the content with this:

font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
border-bottom: 3px solid #cc9900;
font: Georgia, serif;
color: #996600;
padding: 20px;
background-color: #ffffff;
border-radius: 0 4px 4px 4px;
color: #034af3;
/* Menu Styles ------------------------------*/
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 ------------------------------*/
padding-left: 12px;
fieldset label
display: block;
padding: 4px;
input[type="text"], input[type="password"]
width: 300px;
padding: 4px;
/* Data Styles ------------------------------*/
border:1px solid #c3c3c3;
} th
border:1px solid #c3c3c3;
} td
border:1px solid #c3c3c3;

The _ViewStart File

The _ViewStart file in the Shared folder (inside 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 remove this file, you must add this line to all views.

You will learn more about views in a later chapter of this tutorial.

Color Picker