Designing Layout Pages That Have Multiple Content Sections

A content page can have multiple sections, which is useful if you want to use layouts that have multiple areas with replaceable content. In the content page, you give each section a unique name. (The default section is left unnamed.) In the layout page, you add a RenderBody method to specify where the unnamed (default) section should appear. You then add separate RenderSection methods in order to render named sections individually.
The following diagram shows how ASP.NET handles content that's divided into multiple sections. Each named section is contained in a section block in the content page. (They're named Header and List in the example.) The framework inserts content section into the layout page at the point where the RenderSection method is called. The unnamed (default) section is inserted at the point where the RenderBody method is called, as you saw earlier.

This procedure shows how to create a content page that has multiple content sections and how to render it using a layout page that supports multiple content sections.

In the Shared folder, create a file named _Layout2.cshtml.

Replace any existing content with the following:

<!DOCTYPE html>
<html>
    <head>
      <title>Multisection Content</title>
      <link href="@Href("/Styles/Site.css")" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div id="header">
        @RenderSection("header")
      </div>
      <div id="list">
        @RenderSection("list")
      </div>
      <div id="main">
        @RenderBody()
      </div>
      <div id="footer">
        &copy; 2010 Contoso Pharmaceuticals. All rights reserved.
      </div>
    </body>
</html>

You use the RenderSection method to render both the header and list sections.

In the root folder, create a file named Content2.cshtml and replace any existing content with the following:

@{
    Layout = "/Shared/_Layout2.cshtml";
}

@section header {
    <div id="header">
        Chapter 3: Creating a Consistent Look
    </div>
}

@section list {
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Consecte</li>
        <li>Eiusmod</li>
        <li>Tempor</li>
        <li>Incididu</li>
    </ul>
}
<h1>Multisection Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

This content page contains a code block at the top of the page. Each named section is contained in a section block. The rest of the page contains the default (unnamed) content section.

Run the page in a browser.

Making Content Sections Optional

Normally, the sections that you create in a content page have to match sections that are defined in the layout page. You can get errors if any of the following occur:

The content page contains a section that has no corresponding section in the layout page.
The layout page contains a section for which there's no content.
The layout page includes method calls that try to render the same section more than once.

However, you can override this behavior for a named section by declaring the section to be optional in the layout page. This lets you define multiple content pages that can share a layout page but that might or might not have content for a specific section.

Open Content2.cshtml and remove the following section:

@section header {
  <div id="header">
    Chapter 3: Creating a Consistent Look
  </div>
}

Save the page and then run it in a browser. An error message is displayed, because the content page doesn't provide content for a section defined in the layout page, namely the header section.
In the Shared folder, open the _Layout2.cshtml page and replace this line:
```
@RenderSection("header")
```
with the following code:
```
@RenderSection("header", required: false)
```
As an alternative, you could replace the previous line of code with the following code block, which produces the same results:
```
@if (IsSectionDefined("header")) {
    @RenderSection("header")
}
```
Run the Content2.cshtml page in a browser again. (If you still have this page open in the browser, you can just refresh it.) This time the page is displayed with no error, even though it has no header.

software collections

Sunday, 4 September 2011

Designing Layout Pages That Have Multiple Content Sections

Making Content Sections Optional

No comments:

Post a Comment