Back to: ASP.NET Core Tutorials For Beginners and Professionals
Sections in Layout Page in ASP.NET Core MVC
In this article, I am going to discuss the Sections in Layout Page in ASP.NET Core MVC Application. Please read our previous article where we discussed the Layout View in ASP.NET Core MVC Application. As part of this article, we are going to discuss the following pointers.
- What are Sections?
- What is the need for Sections in Layout View in ASP.NET Core MVC Application?
- Understanding the RenderSection Method.
- How to use the RenderSection Method in ASP.NET Core MVC?
- How to Provide section Content in a View?
- Understanding How to make the layout section optional in ASP.NET Core MVC?
Sections in Layout View in ASP.NET Core MVC Application:
In ASP.NET Core MVC, the layout view contains one or more sections in it. The Sections in a layout view are used to organize where certain page elements should be placed. The sections in a layout view can be optional or mandatory.
Understanding the need for Sections with an Example:
In order to understand this, let us first create a custom javascript file. First, create a folder at the root level of the application with the name “wwwroot”. In generally all the static files we need to be placed within this folder. Once you created the “wwwroot” folder create a subfolder within this with the name “js” and then add a javascript file with the name “CustomJavascript.js” within the js folder as shown in the below image.
Situation1:
If we have a custom javascript file (i.e. CustomJavascript.js) and that file is being required by all the views of our application, then we need to place it in the Layout View of our application as shown below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<table border="1" style="width:800px; font-family:Arial">
<tr>
<td colspan="2" style="text-align:center">
<h3>Website Header</h3>
</td>
</tr>
<tr>
<td style="width:200px">
<h3>Left Navigation Menus</h3>
</td>
<td style="width:600px">
@RenderBody()
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center; font-size:x-small">
<h3>Website Footer</h3>
</td>
</tr>
</table>
<script src="~/js/CustomJavascript.js"></script>
</body>
</html> Note: It is always a good programming practice to put all the script files before the closing body tag.
Situation2:
If you have a custom javascript file (i.e. CustomJavascript.js) and you want that file in some specific views. Let assume you want that file in the Index view but not in the Details view of Home Controller. In such scenarios, you can make use of the section.
Understanding the RenderSection Method:
Let us have a look at the signature of the RenderSection() method which is shown below.
As you can see there are two overloaded versions of the RenderSection Method. The same is the case for the RenderSectionAsync method. The first version of the Render section method takes a single parameter (i.e. name) which specifies the name of the section. The second overloaded version takes two parameters. The first parameter (name) specifies the name of the section while the second parameter (required) specifies whether the section is required or optional.
How to use the RenderSection Method in ASP.NET Core MVC?
In your layout view, you need to call the RenderSection() method at the location where you want the section content to be rendered. In our example, we want the script file to be included just before the closing </body> tag. So, we are calling the @RenderSection() method just before the closing </body> tag as shown below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<table border="1" style="width:800px; font-family:Arial">
<tr>
<td colspan="2" style="text-align:center">
<h3>Website Header</h3>
</td>
</tr>
<tr>
<td style="width:200px">
<h3>Left Navigation Menus</h3>
</td>
<td style="width:600px">
@RenderBody()
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center; font-size:x-small">
<h3>Website Footer</h3>
</td>
</tr>
</table>
@RenderSection("Scripts")
</body>
</html>
In the above code, we are using the first overloaded version of the RenderSection method which takes only the name parameter.
How to Provide section Content in a View?
In our layout view, we have created a section. Now let us understand how to provide section content in a view. Each and every view which wants to provide section content must include a section within the same. Here, you need to use the @section directive to include the section and provide the content.
In our example, we want to provide the section content from the Index view. So, modify the index view as shown below.
@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Home Page</h1>
@section Scripts {
<script src="~/js/CustomJavascript.js"></script>
}
Modify the Startup class as shown below.
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
namespace FirstCoreMVCApplication
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseMvcWithDefaultRoute();
}
}
}
Now run the application and navigate to Home/Index URL and you will see the out as expected. But, when you navigate to Home/Details URL, you will get the following error page.
The reason for getting the above exception is the section is mandatory and we have not specified the section content in the Details view.
How to make the layout section optional in ASP.NET Core MVC?
We can make a layout section optional in ASP.NET Core MVC in two ways. They are as follows:
Way1: Use the RenderSection method which takes two parameters. Set the second parameter (i.e. the required) to false.
@RenderSection(“Scripts”, required: false)
Way2: Using the IsSectionDefined() method. This method returns a value that indicates whether the specified section is defined in the content page.
@if (IsSectionDefined(“Scripts”))
{
@RenderSection(“Scripts”, required: false)
}
So, modify the _Layout.cshtml file as shown below to make the section as optional.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<table border="1" style="width:800px; font-family:Arial">
<tr>
<td colspan="2" style="text-align:center">
<h3>Website Header</h3>
</td>
</tr>
<tr>
<td style="width:200px">
<h3>Left Navigation Menus</h3>
</td>
<td style="width:600px">
@RenderBody()
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center; font-size:x-small">
<h3>Website Footer</h3>
</td>
</tr>
</table>
@RenderSection("Scripts", false)
</body>
</html>
With the above changes in place, run the application and navigate to both the URL and you should get the output as expected.
In the next article, I am going to discuss the _ViewStart.cshtml in ASP.NET Core MVC Application. Here, in this article, I try to explain the Sections in the Layout Page in ASP.NET Core MVC Application.
i need book of asp.net mvc core ..same topics as cover on website.
Not for publish :
“CustomJavascript.js” within the js folder as shown in the below image.
instead of
“CustomJavascript.cs” within the js folder as shown in the below image.
As you can see there are two overloaded versions of the RenderSection Method.
instead of
As you can there are two overloaded versions of the RenderSection Method.
Hi,
Thanks for identifying the typographical error. We have corrected it.
Thanks it was useful for me