Working With Layout and CSS in ASP.Net Web Pages 2

Introduction

In this article, we'll learn how to create a layout and use it in the site using WebMatrix. We've created a Cricketer Site so far. Now we need to change the layout of our site.

In that context, we'll learn how to create a layout page, associate it with dynamic content and pass values through it. So, let's proceed with the following sections:

Layout Brief
Working with Layout
Working with CSS
Add CSS with Page
Run the Site Page

Layout Brief

So far the site we've created does not have a standard look or any common elements. The sites in the current scenario have the persistent look and layout.

For example, in the following screenshot there is a perfect layout for the website.

WebSite Layout

It means that this layout has the header, content and the footer. The layout is shared with all the pages. In our site if we need to change it then we need to change it in each page. This is the reason for improving the Layout pages.

We can define the layout page in the ASP.NET Web Pages that provide an overall container for the pages on the site. We create the layout page only and that page is shared with all the content pages. The content page has a line of code that tells ASP.NET what layout page you want to display in the content.

Working with Layout

So, here we'll add the layout page using the following steps:

Step 1: Create a CSHTML page named _LayoutPage.

Creating Layout Page

Step 2: Replace the HTML code with the code below:

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Cricketer Site</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>My Cricketer Site</h1>
</div>
<div id="content">
@RenderBody()
</div>
<div id="footer">
© @DateTime.Now.Year My Cricketer Site
</div>
</div>
</body>
</html>

In the code above are the three sections header, content and footer in the container. In the head part of the page a reference of the CSS file (to be created later) is added. In the header part the site name is placed. In the content part the @RenderBody() is used that is the placeholder where the content will go when this layout is merged with the another page. In the footer part the Razor code is used to get the current date and year.

Working with CSS

So, here we'll add the CSS file for presenting the layout theme. So, proceed with the following.

Step 1: Create a New Folder to add the Styles Folder to contain the CSS.

Adding New Folder in WebMatrix

Step 2: Just right-click on that folder to add a CSS file.

Adding File in WebMatrix

Step 3: Select the CSS file and enter the named as Site.

Adding Css File in WebMatrix

Step 4: Replace the content with the following code:

html{ height:100%; margin:0; padding:0; }
body {
height:60%;
font-family: 'Segoe UI', 'Times New Roman', 'Helvetica', 'sans-serif';
font-size:10pt;
background-color: LightGray;
line-height:1.6em;
}
h1{ font-size:1.6em; }
h2{ font-size:1.4em; }
#container{
min-height:100%;
position:relative;
left:10%;
}
#header{
padding:8px;
width:80%;
background-color:#4b6c9e;
color:White;
}
#content{
width:80%;
padding: 8px;
padding-bottom:4em;
background-color:White;
}
#footer{
width:80%;
height:2em;
padding:8px;
margin-top:-2em;
background-color:LightGray;
}
.head { background-color: #0ff; font-weight: bold; color: #FFF; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 10px; }
.alt { background-color: #E8E8E8; color: #000; }
.selected {background-color:Yellow;}
span.caption {width:100px;}
span.dataDisplay {font-weight:bold;}

Add CSS with Page

Now we need to create the CSS file and Layout page. In this section we add the layout page to our main page.

Open the Cricketers.cshtml page and add the following code at the top of the code block:

Layout = "~/_LayoutPage.cshtml";

In the code above, we merged the Layout page to the Cricketers Page. You can remove the <!DOCTYPE>, <html>, <body> opening and closing tags because this page now uses the layout page. I didn't remove them in my site.

Run the Site Page

Its time to check out the new page with the layout page and CSS. Launch the Cricketers.cshtml page in the browser.

Page with CSS

Edit the Update Page

If you added any CSS in the CreateCricketer.cshtml page then remove it and add the following code at the top inside the code block:

Layout = "~/_LayoutPage.cshtml";

Run the page in the browser.

Create Cricketer Page with Layout

Pass Title to Layout Page

We have written the title in the main page as "Cricketer Site". Most browsers display it as shown below:

Site Title

Add the following code in the Cricketer.cshtml page

Page.Title = "Cricketers List";

Now modify the title in the _LayoutPage.cshtml with the highlighted code below:

<title>@Page.Title</title>

You will see the updated title in the browsers as shown below:

Updated Page Title

Now add the Page.title code in the remaining pages like DeleteCricketer.cshtml, UpdateCricketer.cshtml and so on.

Now if your have given the Title in the pages so please remove the title tag in the head part.

Summary

We've created a site with a layout shared with all the content pages and we've given a CSS file to present the layout for the page. In the next part we'll publish the site. Thanks for reading.