From 842ab9aa1891eb6ad1b1b7bfe72ca3130e5ea588 Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Fri, 27 Jan 2023 06:13:01 -0600
Subject: [PATCH 1/5] Blazor Hybrid (MAUI) page-component navigation

---
 aspnetcore/blazor/hybrid/routing.md | 125 ++++++++++++++++++++++++++--
 1 file changed, 119 insertions(+), 6 deletions(-)

diff --git a/aspnetcore/blazor/hybrid/routing.md b/aspnetcore/blazor/hybrid/routing.md
index 2495cf40957c..85a98d246545 100644
--- a/aspnetcore/blazor/hybrid/routing.md
+++ b/aspnetcore/blazor/hybrid/routing.md
@@ -13,6 +13,8 @@ zone_pivot_groups: blazor-hybrid-frameworks
 
 This article explains how to manage request routing and navigation in Blazor Hybrid apps.
 
+## URI request routing behavior
+
 Default URI request routing behavior:
 
 * A link is *internal* if the host name and scheme match between the app's origin URI and the request URI. When the host names and schemes don't match or if the link sets `target="_blank"`, the link is considered *external*.
@@ -35,13 +37,11 @@ The <xref:Microsoft.AspNetCore.Components.WebView.UrlLoadingEventArgs.Url?displa
 
 API documentation:
 
-* .NET MAUI: <xref:Microsoft.AspNetCore.Components.WebView.Maui.BlazorWebView.UrlLoading>
-* WPF: <xref:Microsoft.AspNetCore.Components.WebView.Wpf.BlazorWebView.UrlLoading>
-* Windows Forms: <xref:Microsoft.AspNetCore.Components.WebView.WindowsForms.BlazorWebView.UrlLoading>
-
-## Namespace
+* .NET MAUI: <xref:Microsoft.AspNetCore.Components.WebView.Maui.BlazorWebView.UrlLoading?displayProperty=nameWithType>
+* WPF: <xref:Microsoft.AspNetCore.Components.WebView.Wpf.BlazorWebView.UrlLoading?displayProperty=nameWithType>
+* Windows Forms: <xref:Microsoft.AspNetCore.Components.WebView.WindowsForms.BlazorWebView.UrlLoading?displayProperty=nameWithType>
 
-The <xref:Microsoft.AspNetCore.Components.WebView?displayProperty=fullName> namespace is required for the examples in this article:
+The <xref:Microsoft.AspNetCore.Components.WebView?displayProperty=fullName> namespace is required for the following examples:
 
 ```csharp
 using Microsoft.AspNetCore.Components.WebView;
@@ -109,3 +109,116 @@ blazorWebView.UrlLoading +=
 ```
 
 :::zone-end
+
+:::zone pivot="maui"
+
+## Navigation among pages and Razor components
+
+This section explains how to navigate among .NET MAUI content pages and Razor components.
+
+The .NET MAUI Blazor hybrid project template isn't a [Shell-based app](/dotnet/maui/fundamentals/shell/), so the [URI-based navigation for Shell-based apps](/dotnet/maui/fundamentals/shell/navigation) isn't the simplest approach to implement in a project based on the project template. The examples in this section use a <xref:Microsoft.Maui.Controls.NavigationPage> to perform modeless or modal navigation.
+
+In the following example:
+
+* The namespace of the app is `MauiBlazor`, which matches the suggested project name of the <xref:blazor/hybrid/tutorials/maui> tutorial.
+* A <xref:Microsoft.Maui.Controls.ContentPage> is placed in a new folder added to the app named `Views`.
+
+In `App.xaml`, create the `MainPage` as a <xref:Microsoft.Maui.Controls.NavigationPage> by making the following change:
+
+```diff
+- MainPage = new MainPage();
++ MainPage = new NavigationPage(new MainPage());
+```
+
+`Views/NavigationExample.xaml`:
+
+```xaml
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:local="clr-namespace:MauiBlazor"
+             x:Class="MauiBlazor.Views.NavigationExample"
+             Title="Navigation Example"
+             BackgroundColor="{DynamicResource PageBackgroundColor}">
+    <StackLayout>
+        <Label Text="Navigation Example"
+               VerticalOptions="Center"
+               HorizontalOptions="Center"
+               FontSize="24" />
+        <Button x:Name="OnCloseButtonClicked" 
+                Text="Close" />
+    </StackLayout>
+</ContentPage>
+```
+
+`Views/NavigationExample.xaml.cs`:
+
+```csharp
+namespace MauiBlazor.Views;
+
+public partial class NavigationExample : ContentPage
+{
+    public NavigationExample()
+    {
+        InitializeComponent();
+        OnCloseButtonClicked.Clicked += CloseButtonClicked_Clicked;
+    }
+
+    private async void CloseButtonClicked_Clicked(object sender, EventArgs e)
+    {
+        await Navigation.PopAsync();
+    }
+}
+```
+
+In a Razor component:
+
+* Add the namespace for the app's content pages. In the following example, the namespace is `MauiBlazor.Views`.
+* Add an HTML `button` element with an [`@onclick` event handler](xref:blazor/components/event-handling) to open the content page. The event handler method is named `OpenPage`.
+* In the event handler, call <xref:Microsoft.Maui.Controls.INavigation.PushAsync%2A> to push the <xref:Microsoft.Maui.Controls.ContentPage>, `NavigationExample`, onto the navigation stack.
+
+The following example is based on the `Index` component in the .NET MAUI Blazor project template.
+
+`Pages/Index.razor`:
+
+```razor
+@page "/"
+@using MauiBlazor.Views
+
+<h1>Hello, world!</h1>
+
+Welcome to your new app.
+
+<SurveyPrompt Title="How is Blazor working for you?" />
+
+<button class="btn btn-primary" @onclick="OpenPage">Open</button>
+
+@code {
+    private async void OpenPage()
+    {
+        await App.Current.MainPage.Navigation.PushAsync(new NavigationExample());
+    }
+}
+```
+
+To change the preceding example to modal navigation:
+
+* In the `CloseButtonClicked_Clicked` method (`Views/NavigationExample.xaml.cs`), change <xref:Microsoft.Maui.Controls.INavigation.PopAsync%2A> to <xref:Microsoft.Maui.Controls.INavigation.PopModalAsync%2A>:
+
+  ```diff
+  - await Navigation.PopAsync();
+  + await Navigation.PopModalAsync();
+  ```
+
+* In the `OpenPage` method (`Pages/Index.razor`), change <xref:Microsoft.Maui.Controls.INavigation.PushAsync%2A> to <xref:Microsoft.Maui.Controls.INavigation.PushModalAsync%2A>:
+
+  ```diff
+  - await App.Current.MainPage.Navigation.PushAsync(new NavigationExample());
+  + await App.Current.MainPage.Navigation.PushModalAsync(new NavigationExample());
+  ```
+
+For more information, see the following resources:
+
+* [`NavigationPage` article (.NET MAUI documentation)](/dotnet/maui/user-interface/pages/navigationpage)
+* [`NavigationPage` (API documentation)](xref:Microsoft.Maui.Controls.NavigationPage)
+
+:::zone-end

From 4729ba5c4bb99cd39715b9eb33312c19f49ab5de Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Fri, 27 Jan 2023 06:20:49 -0600
Subject: [PATCH 2/5] Updates

---
 aspnetcore/blazor/hybrid/routing.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/aspnetcore/blazor/hybrid/routing.md b/aspnetcore/blazor/hybrid/routing.md
index 85a98d246545..5a2296c19048 100644
--- a/aspnetcore/blazor/hybrid/routing.md
+++ b/aspnetcore/blazor/hybrid/routing.md
@@ -144,7 +144,7 @@ In `App.xaml`, create the `MainPage` as a <xref:Microsoft.Maui.Controls.Navigati
                VerticalOptions="Center"
                HorizontalOptions="Center"
                FontSize="24" />
-        <Button x:Name="OnCloseButtonClicked" 
+        <Button x:Name="CloseButton" 
                 Text="Close" />
     </StackLayout>
 </ContentPage>
@@ -160,10 +160,10 @@ public partial class NavigationExample : ContentPage
     public NavigationExample()
     {
         InitializeComponent();
-        OnCloseButtonClicked.Clicked += CloseButtonClicked_Clicked;
+        CloseButton.Clicked += CloseButton_Clicked;
     }
 
-    private async void CloseButtonClicked_Clicked(object sender, EventArgs e)
+    private async void CloseButton_Clicked(object sender, EventArgs e)
     {
         await Navigation.PopAsync();
     }
@@ -202,7 +202,7 @@ Welcome to your new app.
 
 To change the preceding example to modal navigation:
 
-* In the `CloseButtonClicked_Clicked` method (`Views/NavigationExample.xaml.cs`), change <xref:Microsoft.Maui.Controls.INavigation.PopAsync%2A> to <xref:Microsoft.Maui.Controls.INavigation.PopModalAsync%2A>:
+* In the `CloseButton_Clicked` method (`Views/NavigationExample.xaml.cs`), change <xref:Microsoft.Maui.Controls.INavigation.PopAsync%2A> to <xref:Microsoft.Maui.Controls.INavigation.PopModalAsync%2A>:
 
   ```diff
   - await Navigation.PopAsync();

From 5c18d5913359789ccb94fd0ed9ce9c068c9d4d55 Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Fri, 27 Jan 2023 06:38:06 -0600
Subject: [PATCH 3/5] Updates

---
 aspnetcore/blazor/hybrid/routing.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/aspnetcore/blazor/hybrid/routing.md b/aspnetcore/blazor/hybrid/routing.md
index 5a2296c19048..7dfb8f284d09 100644
--- a/aspnetcore/blazor/hybrid/routing.md
+++ b/aspnetcore/blazor/hybrid/routing.md
@@ -150,6 +150,8 @@ In `App.xaml`, create the `MainPage` as a <xref:Microsoft.Maui.Controls.Navigati
 </ContentPage>
 ```
 
+In the `NavigationExample` code file, an event handler for the close button calls <xref:Microsoft.Maui.Controls.INavigation.PopAsync%2A> to pop the <xref:Microsoft.Maui.Controls.ContentPage> off of the navigation stack.
+
 `Views/NavigationExample.xaml.cs`:
 
 ```csharp

From 91b1c0676b63a4ab8d7c36ab93f18d79b15c25a8 Mon Sep 17 00:00:00 2001
From: Luke Latham <1622880+guardrex@users.noreply.github.com>
Date: Fri, 27 Jan 2023 11:33:11 -0600
Subject: [PATCH 4/5] Update aspnetcore/blazor/hybrid/routing.md

Co-authored-by: David Britch <davidbritch@users.noreply.github.com>
---
 aspnetcore/blazor/hybrid/routing.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aspnetcore/blazor/hybrid/routing.md b/aspnetcore/blazor/hybrid/routing.md
index 7dfb8f284d09..c37a4d49783f 100644
--- a/aspnetcore/blazor/hybrid/routing.md
+++ b/aspnetcore/blazor/hybrid/routing.md
@@ -116,7 +116,7 @@ blazorWebView.UrlLoading +=
 
 This section explains how to navigate among .NET MAUI content pages and Razor components.
 
-The .NET MAUI Blazor hybrid project template isn't a [Shell-based app](/dotnet/maui/fundamentals/shell/), so the [URI-based navigation for Shell-based apps](/dotnet/maui/fundamentals/shell/navigation) isn't the simplest approach to implement in a project based on the project template. The examples in this section use a <xref:Microsoft.Maui.Controls.NavigationPage> to perform modeless or modal navigation.
+The .NET MAUI Blazor hybrid project template isn't a [Shell-based app](/dotnet/maui/fundamentals/shell/), so the [URI-based navigation for Shell-based apps](/dotnet/maui/fundamentals/shell/navigation) isn't suitable for a project based on the project template. The examples in this section use a <xref:Microsoft.Maui.Controls.NavigationPage> to perform modeless or modal navigation.
 
 In the following example:
 

From 4bf3f6a9b57c97274399945e5a662d5b445c9979 Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Fri, 27 Jan 2023 11:39:43 -0600
Subject: [PATCH 5/5] Updates

---
 aspnetcore/blazor/hybrid/routing.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/aspnetcore/blazor/hybrid/routing.md b/aspnetcore/blazor/hybrid/routing.md
index c37a4d49783f..43caa65d9e2b 100644
--- a/aspnetcore/blazor/hybrid/routing.md
+++ b/aspnetcore/blazor/hybrid/routing.md
@@ -123,7 +123,7 @@ In the following example:
 * The namespace of the app is `MauiBlazor`, which matches the suggested project name of the <xref:blazor/hybrid/tutorials/maui> tutorial.
 * A <xref:Microsoft.Maui.Controls.ContentPage> is placed in a new folder added to the app named `Views`.
 
-In `App.xaml`, create the `MainPage` as a <xref:Microsoft.Maui.Controls.NavigationPage> by making the following change:
+In `App.xaml.cs`, create the `MainPage` as a <xref:Microsoft.Maui.Controls.NavigationPage> by making the following change:
 
 ```diff
 - MainPage = new MainPage();
@@ -145,12 +145,13 @@ In `App.xaml`, create the `MainPage` as a <xref:Microsoft.Maui.Controls.Navigati
                HorizontalOptions="Center"
                FontSize="24" />
         <Button x:Name="CloseButton" 
+                Clicked="CloseButton_Clicked" 
                 Text="Close" />
     </StackLayout>
 </ContentPage>
 ```
 
-In the `NavigationExample` code file, an event handler for the close button calls <xref:Microsoft.Maui.Controls.INavigation.PopAsync%2A> to pop the <xref:Microsoft.Maui.Controls.ContentPage> off of the navigation stack.
+In the following `NavigationExample` code file, the `CloseButton_Clicked` event handler for the close button calls <xref:Microsoft.Maui.Controls.INavigation.PopAsync%2A> to pop the <xref:Microsoft.Maui.Controls.ContentPage> off of the navigation stack.
 
 `Views/NavigationExample.xaml.cs`:
 
@@ -162,7 +163,6 @@ public partial class NavigationExample : ContentPage
     public NavigationExample()
     {
         InitializeComponent();
-        CloseButton.Clicked += CloseButton_Clicked;
     }
 
     private async void CloseButton_Clicked(object sender, EventArgs e)