Missing basics of navigation for hybrid app

[Christoph1972]

trafficstars

How to create a navigation in a hybrid app? In my opinion, the documentation doesn’t explain that enough.

How to organize the XAML WebView code? How to set the targets?

Please, can someone add the basics to the documentation?

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 48146c6d-f864-0b56-a2d5-0493a843c7a7
• Version Independent ID: 48146c6d-f864-0b56-a2d5-0493a843c7a7
• Content: ASP.NET Core Blazor Hybrid routing and navigation
• Content Source: aspnetcore/blazor/hybrid/routing.md
• Product: aspnet-core
• Technology: aspnetcore-blazor
• GitHub Login: @guardrex
• Microsoft Alias: riande

[guardrex]

Hello @Christoph1972 ... I've asked the product unit to react to this. They supplied the content for this topic, and I merely placed it into the article. The release of Blazor Hybrid is coming up, so they're all busy 🐝🐝🐝🐝 right now getting the framework pieces wrapped up and ready to release. It might take a week or two for them to get to this issue. It won't get lost ... it's on a tracking project for Blazor. We'll get back to you ASAP 🏃.

[Christoph1972]

Perfect, thanks a lot! :-)

[guardrex]

We have some guidance from the PU now ...

... the doc needs some intro material to describe how to handle native client app navigation when using Blazor Hybrid.

Navigation in a native client app means that you can navigate to a specific page in the app by specifying a URI and there might also be a back button.

• How do I think link to a specific page if that page is in a BlazorWebView?
• How do I correctly handle going back to a Blazor page or a native UI page?
• How do you link between the two?

@mkArtakMSFT will probably ask a PU engineer to remark on the scenarios and provide either cross-links to existing coverage or text+examples that we can place into the topic.

If it isn't possible to get PU assistance, I'll see if I can track down cross-links or research the behaviors to include them in the doc.

[stajs]

I'm also struggling with this. Current docs directs to adding an App.razor with a Router component, however then the App.xaml.cs gets confused with:

Partial declarations of 'App' must not specify different base classes

I don't know if App.razor is a specially named (expected) file. I had tried renaming it out of the way but I can't tell if the routes are being registered and ignored or not.

[guardrex]

@davidbritch ... The ask here is about navigating back and forth between .NET MAUI pages and the Razor components of a hybrid .NET MAUI Blazor app. [Forgive me in advance for incorrect terminology as I write this. I'm primarily a web dev and know just enough desktop/mobile dev to get punched 👦🤛😵.]

All of our .NET MAUI Blazor docs assume that the dev isn't creating a hybrid app ... that there's only the MainPage with a BlazorWebView and every other "content page" in the app is a Razor component.

This topic on "routing and navigation" pertains only to controlling how the Web View opens links. It doesn't address back and forth nav (and the back button) for a hybrid app.

Do you know how it would be accomplished because I can't work it out from existing .NET MAUI docs ... they mostly assume the opposite ... that the whole app is .NET MAUI and there are no Razor components to navigate from/to. However, I admit that ...

await Launcher.Default.OpenAsync("counter");

... is tantalizing (perhaps with a Routing.RegisterRoute of some sort) at least for the from .NET MAUI page event handler to Razor component (Counter component) case.

I'll need assistance with the three scenarios in order to get this covered ...

• Navigation from a .NET MAUI page event handler to a Razor component in the Blazor part of the app.
• Navigation from a Blazor Razor component (and the NavMenu component) to a .NET MAUI page in the .NET MAUI part of the app.
• How to handle Back button behaviors in these contexts.

[davidbritch]

@guardrex https://www.youtube.com/watch?v=2dllz4NZC0I

It doesn't answer all your questions but it's a start.

There are two navigation models for .NET MAUI apps. Shell-based apps use a URI-based routing model, and permit the use of Routing.RegisterRoute.

The other approach is to use a NavigationPage to perform modal or modeless navigation. This approach isn't compatible with using Routing.RegisterRoute.

The .NET MAUI Blazor hybrid project template isn't a Shell-based app. So it maybe best to go with the second approach (which is what the YouTube video covers).

Feel free to keep prodding me on this issue until you're 100% unblocked.

[guardrex]

👍 Making progress!

Views/ModalExample.xaml:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiBlazor70"
             x:Class="MauiBlazor70.Views.ModalExample"
             Title="Modal Example"
             BackgroundColor="{DynamicResource PageBackgroundColor}">
    <StackLayout>
        <Label Text="Modal Example"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               FontSize="24" />

        <Button x:Name="btnClose" Text="Close me"></Button>
    </StackLayout>
</ContentPage>

Views/ModalExample.xaml.cs:

namespace MauiBlazor70.Views;

public partial class ModalExample : ContentPage
{
    public ModalExample()
    {
        InitializeComponent();
        btnClose.Clicked += BtnClose_Clicked;
    }

    private async void BtnClose_Clicked(object sender, EventArgs e)
    {
        await Navigation.PopModalAsync();
    }
}

In a Razor component:

@page "/"

<h1>Razor component</h1>

<button class="btn btn-primary" @onclick="OpenModalPage">Open modal</button>

@code {
    private async void OpenModalPage()
    {
        var modalExample = new MauiBlazor70.Views.ModalExample();
        await App.Current.MainPage.Navigation.PushModalAsync(modalExample);
    }
}

[guardrex]

@davidbritch ... All good with modal nav thus far :point_up: ... BUT ... same pattern doesn't work for {Push|Pop}Async. Why can't I just change PushModalAsync/PopModalAsync to PushAsync/PopAsync in the preceding example? When I try, the button just no-ops ... no error ... but no navigation either.

I've also added a button below the BlazorWebView that I try to use to navigate to a ContentPage ... i.e., page to page navigation on the MAUI side. That also only works if I call PushModalAsync.

[guardrex]

cc: @TanayParikh @MackinnonBuck ... Is there a sample app anywhere that demonstrates bidirectional Razor component-to-ContentPage navigation? I have nav working for modals (PushModalAsync/PopModalAsync) :point_up:, but I can't get non-modal nav to work with PushAsync/PopAsync, including component-to-MAUI page and MAUI page-to-MAUI page nav ... it's no-op'ing on me ... no error ... but no navigation either.

[davidbritch]

@guardrex Do you create a NavigationPage in the App class? If not, doing so should make PopAsync work. You'll need something like:

MainPage = new NavigationPage(new MainPage());

[guardrex]

That got it, @davidbritch. Sorry, that was in the article. I see it now.

Sorry for the ping, @TanayParikh and @MackinnonBuck.