WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

ASP.NET MVC - Styles and Layout


To learn ASP.NET MVC, we are Building an Internet Application.

Part III: Adding Styles and a Consistent Look (Layout).


Adding a Layout

The document _Layout.cshtml speak to the design of each page in the application. It is situated in the Shared organizer inside the Views folder.

Open the document and swap the substance with this:

<!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 welookups 2012. All Rights Reserved.</p>
</section>
</body>
</html>

HTML Helpers

In the code above, HTML aides are utilized to change HTML output:

@Url.Content() - URL substance will be embedded here.

@Html.ActionLink() - HTML connection will be embedded here.

You will become familiar with HTML aides in a later section of this tutorial.


Razor Syntax

In the code over, the code checked red are C# utilizing Razor markup.

@ViewBag.Title - The page title will be embedded here.

@RenderBody() - The page substance will be rendered here.

You can find out about Razor markup for both C# and VB (Visual Basic) in our Razor tutorial.


Adding Styles

The template for the application is called Site.css. It is situated in the Content folder.

Open the document Site.css and swap the substance with this:

body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-shading: #5c87b2;
color: #696969;
}
h1
{
border-base: 3px strong #cc9900;
font: Georgia, serif;
color: #996600;
}
#main
{
cushioning: 20px;
background-shading: #ffffff;
border-range: 0 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-shading: #e8eef4;
padding: 10px 20px;
text-enrichment: none;
line-tallness: 2.8em;
/*CSS3 properties*/
border-range: 4px 0 0;
}
ul#menu li a:hover
{
foundation shading: #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 strong #c3c3c3;
border-collapse:collapse;
width:100%;
}
table.data th
{
background-color:#e8eef4;
border:1px strong #c3c3c3;
padding:3px;
}
table.data td
{
border:1px strong #c3c3c3;
padding:3px;
}

The _ViewStart File

The _ViewStart record in the Shared organizer (inside the Views envelope) contains the accompanying content:

@{Layout = "~/Views/Shared/_Layout.cshtml";}

This code is consequently added to all perspectives shown by the application.

If you expel this record, you should add this line to all sees.

You will get familiar with perspectives in a later section of this tutorial.