ASP.NET MVC
- Style and layout
This section describes ASP.NET layout of each page in an MVC application and how to set the style.
To learn ASP.NET MVC, we'll build an Internet application.
Part 3: Add styles and uniform appearances (layouts).
Add a layout
File _Layout.cshtml represents the layout of each page in the application.
It is located in the Shared folder in the Views folder.
Open the _Layout.cshtml and replace the 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 W3CSchool 2012. All Rights Reserved.</p>
</section>
</body>
</html>
HTML helper
In the code above, the HTML helper is used to modify the HTML output:
@Url.Content() - URL content will be inserted here.
@Html.ActionLink() - HTML links will be inserted here.
You'll learn more about HTML helpers later in this tutorial.
Razor syntax
In the code above, the code marked in red is the code that uses the Razor tag.
@ViewBag.Title - The page title will be inserted here.
@RenderBody () - The page content will be rendered here.
You can
learn about razor
tags for C# and VB in our Razor tutorial.
Add a style
The style sheet for the application is a site .css in the Content folder.
Open the site .css file and replace the 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 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 file in the Shared folder (located within the Views folder) _ViewStart contains the following:
@{Layout = "~/Views/Shared/_Layout.cshtml";}
This code is automatically added to all views displayed by the application.
If you delete the file, you must add this line of code to all views.
You'll learn more about views later in this tutorial.
ViewStart views generally exist directly with Views views below. O
f course, other folders below can also have ViewStart.
View page (provided the folder is under the Views folder).