Latest web development tutorials

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:

<!DOCTYPE html>
<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>
<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 W3CSchool 2012. All Rights Reserved.</p>

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;
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;

_ViewStart File

Shared folder (located in the Views folder) in _ViewStart file contains the following:

@{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 the view.