feat: out of band example using SectionContent and SectionOutlet comp…

…oents

samples/HtmxorExamples/Components/Layout/MainLayout.razor

@@ -1,4 +1,4 @@
 @inherits LayoutComponentBase
-<main class="container-fluid p-3">
+<main class="container p-3">
     @Body
 </main>

samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/Index.razor

@@ -0,0 +1,37 @@
+@inherits ConditionalComponentBase
+@attribute [HtmxLayout(typeof(OutOfBandHtmxLayout), Priority = 1)]
+@layout OutOfBandMainLayout
+@page "/examples/out-of-band-outlets"
+@code {
+    [SupplyParameterFromForm]
+    private int CurrentCount { get; set; } = 0;
+
+    private void IncrementCount(HtmxEventArgs args)
+    {
+        CurrentCount++;
+    }
+}
+<PageTitle>Htmxor - Examples - Out of Band Outlets</PageTitle>
+
+<p>This is an example of a counter updating and a element in the header also updating out of bounds.</p>
+
+<div id="counter" class="border p-3 d-inline-block text-center">
+    <HtmxPartial>
+        <SectionContent SectionName="toast">
+            <span id="toasts" hx-swap-oob=@SwapStyles.OuterHTML class="text-warning">
+                The count is @(CurrentCount % 2 == 0 ? "even" : "odd")!
+            </span>
+        </SectionContent>
+
+        <p role="status">
+            Current count: @CurrentCount
+        </p>
+        <button class="btn btn-primary"
+                hx-put="/examples/out-of-band-outlets"
+                hx-vals='{ "CurrentCount": @(CurrentCount) }'
+                hx-target="#counter"
+                @onput="IncrementCount">
+            Click me
+        </button>
+    </HtmxPartial>
+</div>

samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/OutOfBandHtmxLayout.razor

@@ -0,0 +1,3 @@
+@inherits HtmxLayoutComponentBase
+<SectionOutlet SectionName="toast" />
+@Body

samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/OutOfBandMainLayout.razor

@@ -0,0 +1,8 @@
+@inherits LayoutComponentBase
+<header class="container p-3 bg-secondary text-white shadow">
+    This header contains content that can be updated out of bounds:
+    <SectionOutlet SectionName="toast" />
+</header>
+<main class="container p-3">
+    @Body
+</main>

samples/HtmxorExamples/Components/Pages/Home.razor

@@ -23,11 +23,25 @@
         </tr>
         <tr>
             <td><a href="/examples/updating-other-content/triggering-events">Updating Other Content - Triggering Events</a></td>
-            <td>Demonstrates how to update content beyond just the target elements by triggering events on the client using HX-Trigger response header.</td>
+            <td>
+                Demonstrates how to update content beyond just the target elements by
+                triggering events on the client using HX-Trigger response header.
+            </td>
         </tr>
         <tr>
             <td><a href="/examples/updating-other-content/triggering-events-indirectly">Updating Other Content - Triggering Events Indirectly</a></td>
-            <td>Demonstrates how to update content beyond just the target elements by triggering events on the client using HX-Trigger response header from another routable component.</td>
+            <td>
+                Demonstrates how to update content beyond just the target elements by
+                triggering events on the client using HX-Trigger response header from another routable component.
+            </td>
+        </tr>
+        <tr>
+            <td><a href="/examples/out-of-band-outlets">Out of Band Outlets</a></td>
+            <td>
+                Shows how you can leverage <code>SectionContent</code> and <code>SectionOutlet</code> components in Blazor to dynamically
+                add out-of-band content to a htmx response. The key is to have the <code>SectionOutlet</code> component in both
+                the MainLayout and in the Htmx specific layout.
+            </td>
         </tr>
     </tbody>
 </table>

samples/HtmxorExamples/Components/_Imports.razor

@@ -2,6 +2,7 @@
 @using System.Net.Http
 @using System.Net.Http.Json
 @using HtmxorExamples.Components.Layout
+@using Microsoft.AspNetCore.Components.Sections
 @using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.AspNetCore.Components.Web