TOC

The community is working on translating this tutorial into Thai, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".

Layout:

Sections

A Layout allows you to re-use common content across multiple pages, but sometimes you might need to slightly vary the content rendered from the Layout based on the actual page. Common scenarios for this would be to include some extra JavaScript code in the HEAD section, add an extra menu item to the menu or implement a custom sidebar based on which part of the website the user has navigated to. This is where Sections comes into the picture - they simply allow you to define a spot in the Layout file where the Page/View may inject custom markup. Let's jump straight to an example so you can see what I mean.

First, we add a RenderSection() call to our existing Layout file (if you haven't added a Layout to your project yet, just go back to one of the previous articles to learn how to do it):

_Layout.cshtml:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>_Layout</title>
</head>
<body>

    @RenderBody()
    
    <p>Lots of Layout content goes here...</p>

    @RenderSection("Footer")

</body>
</html>

Notice the call to RenderSection() - it's pretty much like RenderBody(), because it simply defines the place where a certain type of content should be rendered. In this case we want to render a Section called "Footer" near the bottom of the view. We should now define this Section in the pages/views using the Layout. Here are two different Views, which uses the Layout, but each of them will have a separate piece of content for our Footer section:

About.cshtml:

@{
    ViewData["Title"] = "About";
}

@section Footer {
    Hello from the About page!
}

<h2>About</h2>

Notice the middle part, where we define content for the Footer section - the syntax is quite simple: The Razor-at character, followed by the section keyword and then the name of the Section we want to define. Inside the set of curly braces we can then define the content of the Section. In this case, we just use have a simple piece of text but you are of course free to include markup as well. Let's do just that for our Products view:

Products.cshtml:

@{
    ViewData["Title"] = "Products";
}

@section Footer {
    <span>
        Hello from the <b>Products</b> page!
    </span>
}

<h2>Products</h2>

If you have already defined a _ViewStart file, as described previously, the two views will automatically use our Layout page, including the section. With that in place, you will now see these views re-use the content from the Layout file, but with varying content in our Footer section.

Optional Sections

By default, all sections are required, just like the body is. This means that if your page uses a Layout with one or several defined Sections, your page/view needs to define all of these sections - if they don't, you will receive an error. This is a great way to make sure that all your pages implements the required content. However, you can very easily transform a required section into an optional section when defining it:

@RenderSection("Footer", required : false)

Notice the extra parameter when calling the RenderSection() command - it simply states that this section is no longer required, meaning that your pages can define this section or not. If the section is not defined, nothing will be rendered.

Checking if a Section has been defined

When declaring a Section as optional, it can be useful to know whether the calling page/view defines this Section or not. This allows you to define some fallback content, in case the content is not supplied by the page/view, like this:

@RenderSection("Footer", required : false)

@if(!IsSectionDefined("Footer"))
{
    <span>Generic footer message!</span>
}

Now, if the Footer Section is not defined by the page/view, our default, fallback message will be rendered instead.

Summary

Sections allow you to define specific areas in your Layout where you can inject content from the page/view using the Layout. This can be used in a wide range of scenarios, as seen in the above examples.

This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!