Create _Layout.cshtml file in each area!

Mritunjay KumarMritunjay Kumar
2 min read

In an ASP.NET Core MVC application, you can create a separate _Layout.cshtml for each Area to provide specific layouts and designs. Here’s how you can do it:

Steps to Create a _Layout.cshtml for Each Area

  1. Create a Shared Folder for Each Area
    Inside the Views folder of your area (e.g., Owner), create a folder named Shared:

     /Areas
    /Owner
       /Views
          /Shared
             _Layout.cshtml

  2. Add a _Layout.cshtml File
    In the Shared folder of your area, add a _Layout.cshtml file. This layout will apply to all views in the Owner area unless overridden.

    Example _Layout.cshtml for the Owner area:

     <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"] - Owner Area</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
     <link href="~/css/site.css" rel="stylesheet" />
 </head>
 <body>
     <header>
         <h1>Owner Area</h1>
         <nav>
             <a href="/Owner/Home/Index">Home</a>
             <a href="/Owner/Reports/Index">Reports</a>
         </nav>
     </header>
     <main>
         @RenderBody()
     </main>
     <footer>
         <p>&copy; 2024 - CRM</p>
     </footer>
 </body>
 </html>

  3. Set the Layout in Area Views
    In the views of the Owner area, specify the layout path in each view using the Layout property.

    Example for Index.cshtml in the Owner area:

     @page
 @model CRM.Areas.Owner.Controllers.HomeController
 @{
     Layout = "~/Areas/Owner/Views/Shared/_Layout.cshtml";
 }

 <h2>Welcome to the Owner Area</h2>

  4. Use a Default _ViewStart.cshtml for the Area (Optional)
    To avoid specifying the layout in every view, create a _ViewStart.cshtml file inside the Views folder of your area:

     /Areas
    /Owner
       /Views
          _ViewStart.cshtml

    Content of _ViewStart.cshtml:

     @{
     Layout = "~/Areas/Owner/Views/Shared/_Layout.cshtml";
 }

    This will apply the layout to all views in the Owner area automatically.

  5. Verify Razor View Configuration

    In Program.cs, ensure the Razor View Engine is configured correctly:

     builder.Services.AddControllersWithViews();

    If it's missing, add it to the services registration.

Benefits of Area-Specific Layouts

  • Customization: Each area can have a unique layout and design.

  • Isolation: Prevents unintended dependencies between areas.

  • Flexibility: It is easier to apply area-specific styles and scripts.

Final Folder Structure

/Areas
   /Owner
      /Controllers
      /Views
         /Home
            Index.cshtml
         /Shared
            _Layout.cshtml
         _ViewStart.cshtml

Now each area can have its own distinct layout!

0
Subscribe to my newsletter

Read articles from Mritunjay Kumar directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Layout ViewAreasC#.net core mvc

Written by

Mritunjay Kumar
Mritunjay Kumar