ASP.NET MVC Pages and Layout

## ASP.NET Tutorial

ASP.NET HOME ASP.NET Intro

## WP Tutorial

WebPages Intro WebPages Razor WebPages Layout WebPages Folders WebPages Global WebPages Forms WebPages Objects WebPages Files WebPages Databases WebPages Helpers WebPages WebGrid WebPages Charts WebPages Email WebPages PHP WebPages Publish WebPages Examples

## WP References

WebPages Classes WebPages Security WebPages Database WebPages WebMail WebPages Helpers

## ASP.NET Razor

Razor Intro Razor Syntax Razor C# Variables Razor C# Loops Razor C# Logic Razor VB Variables Razor VB Loops Razor VB Logic

## ASP.NET MVC

MVC Intro MVC Application MVC Folders MVC Layout MVC Controllers MVC Views MVC Database MVC Models MVC Security MVC HTML Helpers MVC Publish MVC Reference

## WF Tutorials

WebForms Intro WebForms Pages WebForms Controls WebForms Events WebForms Forms WebForms ViewState WebForms TextBox WebForms Button WebForms Data Binding WebForms ArrayList WebForms Hashtable WebForms SortedList WebForms XML Files WebForms Repeater WebForms DataList WebForms DbConnection WebForms Master Pages WebForms Navigation WebForms Examples

## WF References

WebForms HTML WebForms Controls WebForms Validation

# ASP.NET MVC - Styles and Layout

« Previous
Next Chapter »

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>
<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 W3schools 2012. All Rights Reserved.</p>
</section>
</body>
</html>

## 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:

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

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.

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE