ASP.NET MVC - Styles and Layout
To learn ASP.NET MVC, we will build an Internet application.
Part 3: Adding Styles and a Uniform Appearance (Layout).
Adding Layout
The file _Layout.cshtml represents the layout for each page in the application. It is located in the Shared folder within the Views folder.
Open the file _Layout.cshtml and replace its content with:
<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>
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Movies", "Index", "Movies")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
@RenderBody()
HTML Helpers
In the above code, HTML helpers are used to modify the HTML output:
@Url.Content() - The URL content will be inserted here.
@Html.ActionLink() - The HTML link will be inserted here.
You will learn more about HTML helpers in later sections of this tutorial.
Razor Syntax
In the above code, the highlighted code is C# marked with Razor.
@ViewBag.Title - The page title will be inserted here.
@RenderBody() - The page content will be rendered here.
You can learn about Razor markup for C# and VB (Visual Basic) in our Razor Tutorial.
Adding Styles
The stylesheet for the application is Site.css, located in the Content folder.
Open the file Site.css and replace its content with:
_ViewStart File
The _ViewStart file in the Shared folder (within the Views folder) contains the following content:
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.
You will learn more about views in later sections of this tutorial.