Layout View – Session 24

Home » Training Courses » ASP.Net Core MVC » Layout View – Session 24

During this session of ASP.NET Core Tutorial, we discuss about Layout View. Also we show you the steps of creation and then using of this feature in your Views. During previous sessions, you reviewed that we added all the HTML file tags(<html></html> <body></body> and etc.) for each one of the Views. Then within Body tag we input our View necessary tags and Razor codes.

Default Website/Web App structure and Layout View

Moreover, each website and web application has its own format and structure that is same in all the requests (Views). for instance, header, footer, navigation bar and left/right side menu are same in all the pages and just a specific part of web app is changed during each request. Hence, to prevent repetition of immutable part of our web app format, we can use Layout View. Also, using this feature, facilitates code maintenance in future. For example, imagine a web app with more than hundred Views, if we decide to make some changes in navigation bar, footers, headers or left/right side menu without using this feature, We must implement all the changes to all the views, but if we have a Layout View, we should just modify a single view and see the result everywhere.

What is Layout View?

Generally, Layout View is a View that contains all the immutable part of our website structure. Also, this feature prevents us from repeating unchangeable part of our web app codes and facilitates code maintenance in future. Moreover, there is two important methods RenderBody() and RenderSection() that help us to render our Views inside our Layout View.

Create and Use Layout View

As we use this web app format in most of our Views, it is better to create it inside Views/Shared path. Thus, we create it inside Shared folder by right clicking on the mentioned folder, then select Add->New Item.

Then, select Razor Layout from Add New Item window and enter a meaningful name for our Layout View.



<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

</head>

<body>

<div>

@RenderBody()

</div>

</body>

</html>

Afterward, if we use this Layout within our Views, content of our Views will be rendered in the place that @RenderBody() method exists. For using this feature in our Views, we should add the piece of code which is written below, in our View just after @model directive, if exists. Furthermore, we can pass our View title to the Layout View with ViewBag.Title.



@{
    Layout = "~/Views/Shared/_MainLayout.cshtml";
    ViewBag.Title = "Welcome to Cost Web Application";
}

Layout = "~/Views/Shared/_MainLayout.cshtml";

ViewBag.Title = "Welcome to Cost Web Application";

}

Moreover, with RenderSection() method, we can render a specific part of our View or load CSS/JS file. For this purpose below code should be added to the place of Layout View that we want to have the result.



    @RenderSection("Scripts", required: false)

OR

    @if (IsSectionDefined("Scripts"))
    {
        @RenderSection("Scripts", required: true)
    }

@RenderSection("Scripts", required: false)

@if (IsSectionDefined("Scripts"))

{

@RenderSection("Scripts", required: true)

}

Having said that, without required:false input parameter or @if (IsSectionDefined(“Scripts”)) this section is mandatory and should be existed in all the views. Thus for making this section optional we can use either one of the above mentioned ways.

Also for using Section inside View, we can use below code.



@section Scripts{ 
    <script src="~/js/MyScripts.js"></script>
}

@section Scripts{

}

View total code



<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
    @if (IsSectionDefined("Scripts"))
    {
        @RenderSection("Scripts", required: true)
    }
</body>
</html>