Layouts and Sections in ASP.NET MVC Core

The Layouts and sections in ASP.NET MVC core help us to maintain a consistent look across all the pages or views of our application. In this tutorial, we will learn how to create a Layout page, which is shared between the views. We will use the Renderbody to render the view. We will also see how to define sections and render it using the RenderSection. Finally, We will take a look at _viewstart to define the layout Page.

The Layout of a Web Page

The design of the most websites includes a menu, a header, footer and sidebars.  As you go from one page to another the content of the page changes.  But the contents of the menu, header, footer, colour schemes do not change. This gives the web pages a consistent look.

A Typical page of an application looks as follows.

page-layouts in ASP.NET Core

What is a Layout Page in ASP.NET Core

The Views in ASP.NET Core is rendered from the View file (.cshtml) generally located in the Views folder.

To give a consistent look to our web pages, we need to include the header, footer & navigation menu to every view. However, that is often very cumbersome and error-prone especially if you have a large number of views.

The layouts page in ASP.NET Core helps us to define the common user interface elements like header, footer & navigation menu etc on the page at one place and use it everywhere else.

Example Project

Open the ASP.NET Core app, which we created in the Building your First Web Application

You can download the code from the GitHub. The initial code is in the folder start and final code in the Layouts folder

Location of the Layout Page

By convention ASP.NET Core MVC stores all the views inside the Views folder. Each Controller gets a folder in the Views folder with the name same as the Controller but without the Controller Suffix. All the Views associated with the controller are stored in this folder.

View Locations in ASP.NET Core

The Views folder also contains a shared folder, where views shared across multiple views are shared. Since layouts are shared across the other views, they are stores in the Views/Shared folder.

How to Create the Layout Page

Create a folder named Shared under Views folder

Right Click on the Shared folder and click on Add View

Enter the view name as _Layout.

Select the Empty Template and do not select Create as a partial view & Use a layout page as shown in the image below

How to Create a Layout Page

Click on Add to create the View. This will create the _Layout.cshtml under the Views/Shared folder. Open it and copy the following Content.

This is simple HTML markup, with three sections Header, Content, and Footer. The Content is a place where we want the views to be inserted.

RenderBody

The RenderBody is a special method that marks the location where views using this layout will have their content rendered. This basically acts as a placeholder for the Views.

The only one RenderBody method can exist in a Layout page.

Specifying the Layout to Use in the View

Change the Index action method of the HomeController as below

Open the index.cshtml from the Views/Home folder and copy the following code

The index view has become very simpler. We have removed the <html>, <head> & <body> tags. These tags are now coming from the layout page.

The first line of code is the Razor code block, which lets us define the Layout page to use in this view.

Run the app and you should see the following result

Layout Example

Now, let us add another Action method AboutUs in the HomeController

Now, Add the View and select the Layout Page as shown below

Now, run the App and go to the URL /Home/AboutUs. You will notice that the content has changed, while the header and footer filled from the Layout Page

Layout Example 2

The Layout Path

We used the full path ~/Views/Shared/_Layout.cshtml in the AboutUs View, while in index action we used the partial path _Layout.

When a Partial path is provided the Razor view engine searches for the layout file in the Views/{controller} folder first, and followed by the Shared folder. This Process is identical to the searching for the Views

Sections

The ASP.NET Core allows you to create custom sections in the layout pages. The Custom Section expects a name of the section and whether the section is required

The RenderSection(string name, bool required:false) method defines the named section.

Adding a Section to Layout Page

Open the layout page and copy the following code after the content

We have defined a section “Test” and required as false using the RenderSection method

Defining the Section in View

Now go to the Index View and copy the following code

The sections are defined with a razor block @section followed by the name of the section.

Run the app and verify that the section is displayed after the content.

Making the Section Required

Make the required:true, while defining the section in the layout page as shown below

Now, run the App and query the URL /Home/AboutUs and you will see the following error message

InvalidOperationException: The layout page ‘/Views/Shared/_Layout.cshtml’ cannot find the section ‘Test’ in the content page ‘/Views/Home/AboutUs.cshtml’.

That is because we haven’t defined the test section in the AboutUs View

_ViewStart

In the above examples, we defined the layouts to use in the View itself. defining the layout in every view is harder to maintain. The simpler way is to define the layout in the _ViewStart.html file

The purpose of the _ViewStart.cshtml is to set up default values to the other Views in the folder and its subfolders.

Now, go to the Views folder and create a view _ViewStart under the folder Views and copy the following code

Remove or comment out the above code from the index and AboutUs View.

Run the app and check yourself

Removing the Layout from a View

Since we added the _viewStart at the root of the Views folder, the layout becomes applicable to every view under root folder and all its subfolder

There are circumstances where you may not want to use a layout or may want to use another layout for a specific page. In such cases just add the Layout back and set it to Null

Or set it to Some other Layout as shown below.

You can also create a separate _viewStart file under the Controller folder, which will override the _ViewStart settings from the parent folder

Summary

We have learned how to create a layout page and share the common UI elements across the various views in our Application.  The Renderbody method renders the main View, while we can use the RenderSection to load any other UI elements. Finally, We looked at how to specify the layout page in the _viewstart to so that it can be shared by all the Views.

More On Views

Introduction to Views
The Razor View Engine

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top