Fix templates and layout.

Author: ilonatommy

src/Components/Components/src/LayoutAttribute.cs

@@ -36,5 +36,6 @@ public LayoutAttribute([DynamicallyAccessedMembers(Component)] Type layoutType)
     /// The type of the layout. The type must implement <see cref="IComponent"/>
     /// and must accept a parameter with the name 'Body'.
     /// </summary>
+    [DynamicallyAccessedMembers(Component)]
     public Type LayoutType { get; private set; }
 }

src/Components/Components/src/Routing/Router.cs

@@ -42,6 +42,9 @@ static readonly IReadOnlyDictionary<string, object> _emptyParametersDictionary
 
     private bool _onNavigateCalled;
 
+    [DynamicallyAccessedMembers(LinkerFlags.Component)]
+    private Type? _notFoundLayoutType;
+
     [Inject] private NavigationManager NavigationManager { get; set; }
 
     [Inject] private INavigationInterception NavigationInterception { get; set; }
@@ -156,6 +159,9 @@ public async Task SetParametersAsync(ParameterView parameters)
                 throw new InvalidOperationException($"The type {NotFoundPage.FullName} " +
                     $"does not have a {typeof(RouteAttribute).FullName} applied to it.");
             }
+
+            var layoutAttr = NotFoundPage.GetTypeInfo().GetCustomAttribute<LayoutAttribute>();
+            _notFoundLayoutType = layoutAttr?.LayoutType;
         }
 
         if (!_onNavigateCalled)
@@ -223,7 +229,7 @@ internal virtual void Refresh(bool isNavigationIntercepted)
         var relativePath = NavigationManager.ToBaseRelativePath(_locationAbsolute.AsSpan());
         var locationPathSpan = TrimQueryOrHash(relativePath);
         var locationPath = $"/{locationPathSpan}";
-        Activity? activity = null;
+        Activity? activity;
 
         // In order to avoid routing twice we check for RouteData
         if (RoutingStateProvider?.RouteData is { } endpointRouteData)
@@ -286,7 +292,7 @@ internal virtual void Refresh(bool isNavigationIntercepted)
                 // We did not find a Component that matches the route.
                 // Only show the NotFound content if the application developer programatically got us here i.e we did not
                 // intercept the navigation. In all other cases, force a browser navigation since this could be non-Blazor content.
-                _renderHandle.Render(NotFound ?? DefaultNotFoundContent);
+                RenderNotFound();
             }
             else
             {
@@ -382,23 +388,43 @@ private void OnNotFound(object sender, EventArgs args)
         if (_renderHandle.IsInitialized)
         {
             Log.DisplayingNotFound(_logger);
-            _renderHandle.Render(builder =>
+            RenderNotFound();
+        }
+    }
+
+    private void RenderNotFound()
+    {
+        _renderHandle.Render(builder =>
+        {
+            if (NotFoundPage != null)
             {
-                if (NotFoundPage != null)
+                if (_notFoundLayoutType is Type layoutType)
                 {
-                    builder.OpenComponent(0, NotFoundPage);
+                    // Directly instantiate the layout type, supplying the NotFoundPage as the Body
+                    builder.OpenComponent(0, layoutType);
+                    builder.AddAttribute(1, LayoutComponentBase.BodyPropertyName,
+                        (RenderFragment)(childBuilder =>
+                        {
+                            childBuilder.OpenComponent(2, NotFoundPage);
+                            childBuilder.CloseComponent();
+                        }));
                     builder.CloseComponent();
                 }
-                else if (NotFound != null)
-                {
-                    NotFound(builder);
-                }
                 else
                 {
-                    DefaultNotFoundContent(builder);
+                    builder.OpenComponent(0, NotFoundPage);
+                    builder.CloseComponent();
                 }
-            });
-        }
+            }
+            else if (NotFound != null)
+            {
+                NotFound(builder);
+            }
+            else
+            {
+                DefaultNotFoundContent(builder);
+            }
+        });
     }
 
     async Task IHandleAfterRender.OnAfterRenderAsync()

src/Components/test/E2ETest/ServerRenderingTests/NoInteractivityTest.cs

@@ -136,6 +136,9 @@ public void CanRenderNotFoundPageNoStreaming(bool useCustomNotFoundPage)
         {
             var infoText = Browser.FindElement(By.Id("test-info")).Text;
             Assert.Contains("Welcome On Custom Not Found Page", infoText);
+            // custom page should have a custom layout
+            var aboutLink = Browser.FindElement(By.Id("about-link")).Text;
+            Assert.Contains("About", aboutLink);
         }
         else
         {

src/Components/test/E2ETest/Tests/GlobalInteractivityTest.cs

@@ -39,6 +39,9 @@ public void CanRenderNotFoundInteractive(string renderingMode, bool useCustomNot
         {
             var infoText = Browser.FindElement(By.Id("test-info")).Text;
             Assert.Contains("Welcome On Custom Not Found Page", infoText);
+            // custom page should have a custom layout
+            var aboutLink = Browser.FindElement(By.Id("about-link")).Text;
+            Assert.Contains("About", aboutLink);
         }
         else
         {

src/Components/test/testassets/Components.WasmMinimal/Pages/CustomNotFoundPage.razor

@@ -0,0 +1,5 @@
+@page "/render-custom-not-found-page"
+@layout NotFoundLayout
+
+<h3 id="test-info">Welcome On Custom Not Found Page</h3>
+<p>Sorry, the page you are looking for does not exist.</p>

src/Components/test/testassets/Components.WasmMinimal/Pages/NotFound/CustomNotFoundPage.razor

@@ -0,0 +1,23 @@
+@inherits LayoutComponentBase
+
+<div class="page">
+    <header class="top-bar">
+        <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+    </header>
+    <main>
+        <article class="content px-4">
+            @Body
+        </article>
+    </main>
+</div>
+
+<style>
+    .top-bar {
+        background-color: #0078d4;
+        color: white;
+        padding: 10px;
+        text-align: center;
+        width: 100%;
+        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+    }
+</style>

src/Components/test/testassets/Components.WasmMinimal/Pages/NotFound/NotFoundLayout.razor

@@ -10,3 +10,6 @@
 @using Microsoft.AspNetCore.Components.Web.Virtualization
 @using Microsoft.JSInterop
 @using BlazorWeb_CSharp.Client
+@*#if (!UseServer && UseWebAssembly && InteractiveAtRoot) -->
+@using BlazorWeb_CSharp.Client.Layout
+##endif*@

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp.Client/_Imports.razor

@@ -1,4 +1,5 @@
 @page "/not-found"
+@layout MainLayout
 
 <h3>Not Found</h3>
 <p>Sorry, the content you are looking for does not exist.</p>

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Pages/NotFound.razor

@@ -17,6 +17,6 @@
 @using BlazorWeb_CSharp.Client.Layout
 ##endif*@
 @using BlazorWeb_CSharp.Components
-@*#if (UseServer && (!UseWebAssembly || !InteractiveAtRoot)) -->
+@*#if (UseServer || !InteractiveAtRoot) -->
 @using BlazorWeb_CSharp.Components.Layout
 ##endif*@