What principle do we follow in the Layout?

We follow the principle of DRY, which means Don't Repeat Yourself.

Which compiler is used in ASP.NET?

Roslyn compiler is used in ASP.NET to compile programs.

State Servers windows are used to store sessions.

Why do we use the layouts in ASP.NET?

We use Layouts in ASP.NET to reduce the redundancy in the code and follow the DRY principle.

Table of contents

Introduction

What is Layout and its Need

2.1.

Need of Layout

2.2.

Layout View in ASP.NET Core MVC Application:

Creating Layout File with Example

3.1.

Understanding the _Layout.cshtml file:

3.2.

Modifying the Startup Class

3.3.

Modifying the Home Controller

3.4.

Using Layout View

3.4.1.

Index.cshtml

3.4.2.

Details.cshtml

FAQs

Key Takeaways

Last Updated: Mar 27, 2024

ASP.NET Layout View

Author Naman Kukreja

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

When you visit a website, you see that some part of the page remains the same whenever you scroll the website or redirect to some part of the same website.

So if the part has to be exact, why do we need to write the whole code again and again? Is there any solution to this problem?

The answer is Yes. We can use layouts to solve this problem and how to use that we will see in this blog.

So without wasting any further time, let’s get on with our topic.

What is Layout and its Need

One can understand Layout as the Common UI between different pages and views. These can be compared with the master pages in Webforms applications. In simple words, the Layout is a common view while moving within a webpage or across the same web page.

Need of Layout

Most of the websites in today’s time have the following four components:

Website Handler
Left Navigation Menus
Main Content Area
Website Footer

Suppose you do not follow the Layout. You have to write code for all these four components when creating a view. This will increase your code length multiple times and make your application difficult to maintain. This will violate the DRY principle, i.e., Don't Repeat Yourself, as we repeatedly repeat the code.

Let’s understand this with an example. Suppose you want to add or delete something in the navigation bar, then you have to change it for each view you have created till now.

So instead of copying the same HTML content in every view file, it is advisable to add the HTML code in a layout file and inherit that layout file in every view. This will drastically save time and reduce the code length. So if now you want to make any changes, you have to do that in the layout file, and it will automatically be reflected in every view which has inherited the layout file.

Layout View in ASP.NET Core MVC Application:

It is also a file with a .cshtml extension like the regular files in ASP.NET.
You can relate it with the master page in the web forms application of ASP.NET.
We place the Layout in the subfolder in the Views folder with the name shared as they are not specific to any controller.
The default name for the layout view file in ASP.NET is _Layout.cshtml.
The underscore before the name describes that these files cannot be served/ used directly by the browser.
One of the advantages of using ASP.NET is that we can create many layouts files for a single application.

Creating Layout File with Example

You must follow the following steps to create the layout file in ASP.NET.

First, we must create the shared folder in the view folder, so make it by right-clicking on view folders and adding a new folder.
Next, we will add the shared folder so right-click on it and then select the ADD new item option. It will open a new window in front of you.
Select the Layout and your file from the open window and click on the ADD button.

Understanding the _Layout.cshtml file:

The _Layout.cshtml file will have some auto-generated HTML code that is given below:

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

As you can understand from the above code that it contains the head, title, and body elements. So we do not need to write them every time a view is created.

The @Viewbag.Title expression will find to retrieve the page or view-specific title. To specify the location where a page or view-specific page is injected, we will use @RenderBody().

Now, we will modify the _Layout.cshtml file to include all those four sections mentioned above, i.e., Header, footer, left navigation menu, and main content.

<!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>
</body>
</html>

Modifying the Startup Class

Modify the startup class as exactly as we have done below to configure required services.

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)
       {
           app.UseMvcWithDefaultRoute();
       }
   }
}

Modifying the Home Controller

Follow the following code to modify your Home Controller:

using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCApplication.Controllers
{
   public class HomeController: Controller
   {
       public ViewResult Index()
       {
           return View();
       }
      
       public ViewResult Details()
       {
           return View();
       }
   }
}

Using Layout View

Now we will create the details and index view using the layout view.

Index.cshtml

Modify the index.cshtml file as shown below:

@{
   ViewBag.Title = "Home Page";
   Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Home Page</h1>

Details.cshtml

Modify the details.cshtml file as shown below:

@{
   ViewBag.Title = "Details Page";
   Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Details Page</h1>

Now run the application. This will be your output:

FAQs

What principle do we follow in the Layout?
We follow the principle of DRY, which means Don't Repeat Yourself.
Which compiler is used in ASP.NET?
Roslyn compiler is used in ASP.NET to compile programs.
What is StateServer?
State Servers windows are used to store sessions.
Why do we use the layouts in ASP.NET?
We use Layouts in ASP.NET to reduce the redundancy in the code and follow the DRY principle.

Key Takeaways

In this blog, we have learned what layouts are, why we need to use them, about different sections of a web page, how to use them with Layout, and how to create a layout.

Recommended Reading:

If you want to learn about scaffolding in ASP.NET, then you must read this blog. Here you will get a complete overview of the topic from scratch, like creating a project to create and edit a scaffold.

Live masterclass

ChatGPT Google Search Architecture – Explained by Amazon SDE2

by Anubhav Sinha

09 Jun, 2025

01:30 PM

250+ registered

Amazon Data Analyst roadmap – From Resume to Interview

by Abhishek Soni

10 Jun, 2025

01:30 PM

2149+ registered

Build AI Interview Q&A Generator using LLM

by Shantanu Shubham

11 Jun, 2025

01:30 PM

55+ registered

JioHotstar Sports Analytics using python: IPL Dataset

by Ashwin Goyal

12 Jun, 2025

01:30 PM

170+ registered

ChatGPT Google Search Architecture – Explained by Amazon SDE2

by Anubhav Sinha

09 Jun, 2025

01:30 PM

250+ registered

Amazon Data Analyst roadmap – From Resume to Interview

by Abhishek Soni

10 Jun, 2025

01:30 PM

2149+ registered

View more events