HTML5 Master Pages

Lecture



To create a uniform view of the site apply the master page. Master pages are essentially the same views. We can define on the master page some elements that will be displayed on all pages of the site. We can also define placeholders or placeholders, the content of which is provided by other views.

When creating the first application in previous chapters, we used the following _Layout.chtml master page:

one
2
3
four
five
6
7
eight
9
ten
eleven
12
13
14
15
sixteen
17
<!DOCTYPE html>
< html >
< head >
     < meta charset = "utf-8" />
     < title >@ViewBag.Title</ title >
     < link href = "@Url.Content(" ~/Content/Site.css")" rel = "stylesheet" type = "text/css" />
</ head >
< body >
     < nav >
         < ul class = "menu" >
             < li >@Html.ActionLink("Главная", "Index", "Home")</ li >
         </ ul >
     </ nav >
     @RenderBody()
</ body >
</ html >

It looks like a normal view with one exception - calling the @RenderBody() method. This call is a placeholder, in which other views that use this master page will replace their content. And in this way, we can easily set a uniform style for web application views.

To apply the master page to the view, we must specify the path to the master page in the Layout section. For example, our Index.cshtml view using this master page starts like this:

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

If we do not use the master page, then we specify Layout = null; .

A master page can have several sections where views can put their content. For example, add the footer section to the master page:

one
2
3
four
five
6
7
eight
9
ten
eleven
12
13
14
15
sixteen
17
18
<!DOCTYPE html>
< html >
< head >
     < meta charset = "utf-8" />
     < title >@ViewBag.Title</ title >
     < link href = "@Url.Content(" ~/Content/Site.css")" rel = "stylesheet" type = "text/css" />
</ head >
< body >
     < nav >
         < ul class = "menu" >
             < li >@Html.ActionLink("Главная", "Index", "Home")</ li >
         </ ul >
     </ nav >
     @RenderBody()
     < footer >@RenderSection("Footer")</ footer >
</ body >
</ html >

Now, when starting the previous Index view, we get an error, since the Footer section is not defined. By default, the presentation should transmit content for each section of the master page. Therefore, we will add down the Index view the footer section. We can do this with the @section expression:

one
2
3
four
five
6
7
@{
     Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- здесь остальное содержание -->
@section Footer {
     Все права защищены. Syte Corp. 2012.
}

However, with this approach, if we have a lot of views, and we suddenly wanted to define a new section on the master page, we will have to change all the existing views, which is not very convenient. But the master pages offer us options for flexible section configuration.

The first option is to use the overloaded version of the RenderSection method, which allows you to specify that this section does not have to be defined in the view. To mark the Footer section as optional, pass false to the method as the second parameter:

one
< footer >@RenderSection("Footer", false)</ footer >

The second option allows you to set the contents of the section by default, if this section is not defined in the view:

one
2
3
four
five
6
7
eight
9
< footer >
     @if (IsSectionDefined("Footer")) {
         @RenderSection("Footer")
     }
     else
     {
         < span >Содержание элемента footer по умолчанию.</ span >
     }
</ footer >

Viewstart

If we have a couple of views in the project, we can easily change the description of the master page in the Layout section for each if, for example, we decide to use a different master page. However, if we have a lot of ideas, it will not be very convenient to do it.

For more flexible customization of views, use the _ViewStart.cshtml page. The code for this page is executed before the code for any of the views located in the same directory. This file is consistently applied to each view that is in the same directory.

When creating an ASP.NET MVC 3/4 project using a Basic or Internet template, the _ViewStart.cshtml file is already in the Views _ViewStart.cshtml . This file defines the default master page. When creating a new ASP.NET MVC 3/4 project using the Empty template, we need to add a new _ViewStart.cshtml view to the Views folder and delete all previously generated text and add the following lines:

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

This code is executed before any other code defined in the view, so we can remove the Layout section from other views. If the view should use a different master page, then we simply override the Layout property by Layout its definition to the beginning of the view.

if you do not use microsoft then

<! DOCTYPE html>

<html>

<head>

<meta charset = utf-8>

<title> my site </ title>

</ head>

<body>

<header>

Site header

</ header>

<nav>

site menu

</ nav>

<section>

<article>

<header>

Article title

</ header>

Article with fish text

</ article>

<article>

<header>

Article title

</ header>

Article with fish text

</ article>

</ section>

<aside>

sidebar with additional blocks

</ aside>

<footer>

Site footer

</ footer>

</ body>

</ html>

Comments

To leave a comment
If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

design software UI and Web design

Terms: design software UI and Web design