Open Closed

Question Regarding Nested Layouts in Blazor #1132


User avatar
0
kbowma created
  • ABP Framework version: v4.2.2
  • UI type: Blazor
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes
  • Exception message and stack trace:
  • Steps to reproduce the issue:

I have a client side Blazor application where I am trying to nest layouts per the below diagram. I have an Abp.io module that contains a "TestLayout" component that inherits from LayoutComponentBase. It is rendered from a menu item on the main application sidebar. In the TestLayout component I have a Telerik Drawer component that uses NavigationManager to render a separate page (Page1/2) into its content @Body. Each page component defines a @layout of TestLayout. Now, the initial state loads fine and when I select the TestLayout from the main sidebar menu, it will load the TestLayout correctly. When I select Page 1 from the Telerik Drawer the Page 1 is rendered in the Content @Body correctly, but the TestLayout component replaces all application components so it is the only component rendered on the page (I loose the Apb.io Sidebar and Toolbar). I am assuming this is because I have not defined a @layout in the TestLayout component to render in the @body of the main application. Because I am in a module I don't think I have access to the main layouts  (MainLayout?). How do I ensure my TestLayout component in module A will render in the main applications @body when I have nested layouts?

Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

2 Answer(s)
  • User Avatar
    0
    mladen.macanovic created

    Hi,

    You must have a reference to the MainLayout in order to use: eg.

    @layout MainLayout
    @inherits LayoutComponentBase
    

    But since you said you don't have access to MainLayout than the only other way I can think of is to repeat the same structure and code from Mainlayout and move it into your TestLayout or any other layout that you have.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    kbowma created

    Thank you for the response. I am confused on how we can use modules in a Blazor application if we cannot render content into the main application. This seems like a fairly staight forward UI flow. Are there any plan to provide access to the MainLayout in a module?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 16, 2026, 14:50
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.