Skip to content

Page Embedding Feature (aka Hybrid UI) #23161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 14 commits into
base: dev
Choose a base branch
from
Draft

Page Embedding Feature (aka Hybrid UI) #23161

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
b23a0fa
Add RenderLayout property to control layout rendering
enisn Jun 23, 2025
5a2029d
Add RenderLayoutElements to control layout rendering
enisn Jun 23, 2025
14bfbb4
Add page embedding feature for conditional layout rendering
enisn Jun 25, 2025
3490e72
Update Volo.Abp.sln
enisn Jun 25, 2025
a26388e
Add Embedding project to nupkg build list
enisn Jun 25, 2025
9195962
Merge branch 'dev' into hybrid-ui
enisn Jun 25, 2025
a321857
Initial NPM package for abp-embedding component
enisn Jun 25, 2025
9060ae8
Enhance iframe styling in abp-embedding CSS
enisn Jun 25, 2025
9d7fec9
Add auto-height feature to embedding component
enisn Jun 26, 2025
224ecd7
Add embedded script support for embedding layout
enisn Jun 26, 2025
8873bf2
Update Default.cshtml
enisn Jun 26, 2025
e397dee
Refactor embedding iframe and component for simpler auto-height
enisn Jun 26, 2025
82aad60
Add browser history sync for embedded iframe navigation
enisn Jun 26, 2025
a63fa30
Add URL change detection and reporting for embedded iframes
enisn Jun 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions docs/en/framework/ui/mvc-razor-pages/page-header.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,22 @@

`IPageLayout` can be injected in any page/view to set the page header properties.

### RenderLayoutElements

The `RenderLayoutElements` property controls whether the application layout (navigation menu, toolbar, etc.) should be rendered around the page content:

```csharp
@inject IPageLayout PageLayout
@{
PageLayout.RenderLayoutElements = false; // Hide navigation and layout elements
}
```

* When set to `true` (default), the full application layout including navigation menu is rendered.
* When set to `false`, only the page content is rendered without the surrounding layout elements.
* This is useful for pages public pages, error pages, or embedded content where you want a clean layout without navigation.
* This is not `Empty` Layout, it's still the same layout with related page, but without the navigation menu, toolbar and footer. All the layout hooks are still available.

### Page Title

Page Title can be set as shown in the example below:
Expand Down
5 changes: 5 additions & 0 deletions framework/src/Volo.Abp.AspNetCore.Mvc.UI/Volo/Abp/AspNetCore/Mvc/UI/Layout/IPageLayout.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,9 @@
public interface IPageLayout
{
ContentLayout Content { get; }

/// <summary>
/// Whether the application layout (navigation menu, toolbar, etc.) should be rendered around the page content.
/// </summary>
bool RenderLayoutElements { get; set; }
}
7 changes: 2 additions & 5 deletions framework/src/Volo.Abp.AspNetCore.Mvc.UI/Volo/Abp/AspNetCore/Mvc/UI/Layout/PageLayout.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Layout;

public class PageLayout : IPageLayout, IScopedDependency
{
public ContentLayout Content { get; }
public ContentLayout Content { get; } = new();

public PageLayout()
{
Content = new ContentLayout();
}
public bool RenderLayoutElements { get; set; } = true;
}
7 changes: 6 additions & 1 deletion ...asic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Themes/Basic/Layouts/Account.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@using Microsoft.Extensions.Options
@using Volo.Abp.AspNetCore.MultiTenancy
@using Volo.Abp.AspNetCore.Mvc.UI.Components.LayoutHook
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@using Volo.Abp.AspNetCore.Mvc.UI.MultiTenancy.Localization
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Bundling
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Themes.Basic.Components.MainNavbar
Expand All @@ -19,6 +20,7 @@
@inject IStringLocalizer<AbpUiMultiTenancyResource> MultiTenancyStringLocalizer
@inject ITenantResolveResultAccessor TenantResolveResultAccessor
@inject IOptions<AbpThemingOptions> ThemingOptions
@inject IPageLayout PageLayout

@{
Layout = null;
Expand Down Expand Up @@ -58,7 +60,10 @@
<body class="abp-account-layout @rtl">
@await Component.InvokeLayoutHookAsync(LayoutHooks.Body.First, StandardLayouts.Account)

@(await Component.InvokeAsync<MainNavbarViewComponent>())
@if (PageLayout.RenderLayoutElements)
{
@(await Component.InvokeAsync<MainNavbarViewComponent>())
}

<div class="@containerClass">
<abp-row>
Expand Down
7 changes: 5 additions & 2 deletions ...-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Themes/Basic/Layouts/Application.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

@{
Layout = null;
var containerClass = ViewBag.FluidLayout == true ? "container-fluid" : "container"; //TODO: Better and type-safe options
var containerClass = ViewBag.FluidLayout == true || PageLayout.RenderLayoutElements == false ? "container-fluid" : "container"; //TODO: Better and type-safe options
var pageTitle = ViewBag.Title == null ? BrandingProvider.AppName : ViewBag.Title; //TODO: Discard to get from Title
Expand Down Expand Up @@ -63,7 +63,10 @@
<body class="abp-application-layout @rtl">
@await Component.InvokeLayoutHookAsync(LayoutHooks.Body.First, StandardLayouts.Application)

@(await Component.InvokeAsync<MainNavbarViewComponent>())
@if (PageLayout.RenderLayoutElements)
{
@(await Component.InvokeAsync<MainNavbarViewComponent>())
}

<div class="@containerClass">
@(await Component.InvokeAsync<PageAlertsViewComponent>())
Expand Down