ASP.NET MVC and page layout
In order to learn ASP.NET MVC, we will build an Internet application.
Part 3: Adding styles and uniform appearance (layout).
Add layout
_Layout.cshtml File represents the application layout of each page. It is located in Views folder Shared folders.
Open the file _Layout.cshtml, to replace the contents to:
<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 above code, HTML Help is used to modify the HTML output:
@ Url.Content () - URL content will be inserted here.
@ Html.ActionLink () - HTML link will be inserted here.
In a later chapter of this tutorial, you will learn more about HTML helper knowledge.
Razor Syntax
In the above code, the code is marked in red markers using Razor C #.
@ ViewBag.Title - page title will be inserted here.
@RenderBody () - Page content will be presented here.
You can in our Razor tutorial learn about Razor C # and VB (Visual Basic) of the tag.
Adding Style
Application style sheet is Site.css, located in Content folder.
Open the file Site.css, to replace the contents to:
{
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
Shared folder (located in the Views folder) in _ViewStart file contains the following:
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 the view.