Layout View – Session 24

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.

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.

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.

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.

View total code

If you need more details, watch this session video. Also, for being updated about our coming sessions, follow us on Instagram, Facebook, Telegram or YouTube and you can have access to list of all sessions HERE.

You can download this Session Slides form HERE

0.00 avg. rating (0% score) - 0 votes


0 0 votes
Article Rating

Inline Feedbacks
View all comments