Easy Tutorial
❮ Prop Webcontrol Standard Tooltip Control Htmlinputimage ❯

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.

❮ Prop Webcontrol Standard Tooltip Control Htmlinputimage ❯