ASP.NET Core Blazor Hybrid routing and navigation

Add the following event handler to the constructor of the Page where the BlazorWebView is created, which is MainPage.xaml.cs in an app created from the .NET MAUI project template.

blazorWebView.UrlLoading += 
    (sender, urlLoadingEventArgs) =>
    {
        if (urlLoadingEventArgs.Url.Host != "0.0.0.0")
        {
            urlLoadingEventArgs.UrlLoadingStrategy = 
                UrlLoadingStrategy.OpenInWebView;
        }
    };

Add the UrlLoading="Handle_UrlLoading" attribute to the BlazorWebView control in the .xaml file:

<blazor:BlazorWebView HostPage="wwwroot\index.html" 
    Services="{StaticResource services}" 
    x:Name="blazorWebView" 
    UrlLoading="Handle_UrlLoading">

Add the event handler in the .xaml.cs file:

private void Handle_UrlLoading(object sender, 
    UrlLoadingEventArgs urlLoadingEventArgs)
{
    if (urlLoadingEventArgs.Url.Host != "0.0.0.0")
    {
        urlLoadingEventArgs.UrlLoadingStrategy = 
            UrlLoadingStrategy.OpenInWebView;
    }
}

In the constructor of the form containing the BlazorWebView control, add the following event registration:

blazorWebView.UrlLoading += 
    (sender, urlLoadingEventArgs) =>
    {
        if (urlLoadingEventArgs.Url.Host != "0.0.0.0")
        {
            urlLoadingEventArgs.UrlLoadingStrategy = 
                UrlLoadingStrategy.OpenInWebView;
        }
    };

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, so the URI-based navigation for Shell-based apps isn't suitable for a project based on the project template. The examples in this section use a 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 Build a .NET MAUI Blazor Hybrid app tutorial.
• A ContentPage is placed in a new folder added to the app named Views.

In App.xaml.cs, create the MainPage as a NavigationPage by making the following change:

- MainPage = new MainPage();
+ MainPage = new NavigationPage(new MainPage());

Views/NavigationExample.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="CloseButton" 
                Clicked="CloseButton_Clicked" 
                Text="Close" />
    </StackLayout>
</ContentPage>

In the following NavigationExample code file, the CloseButton_Clicked event handler for the close button calls PopAsync to pop the ContentPage off of the navigation stack.

Views/NavigationExample.xaml.cs:

namespace MauiBlazor.Views;

public partial class NavigationExample : ContentPage
{
    public NavigationExample()
    {
        InitializeComponent();
    }

    private async void CloseButton_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 to open the content page. The event handler method is named OpenPage.
• In the event handler, call PushAsync to push the 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:

@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 CloseButton_Clicked method (Views/NavigationExample.xaml.cs), change PopAsync to PopModalAsync:

  - await Navigation.PopAsync();
  + await Navigation.PopModalAsync();
  

• In the OpenPage method (Pages/Index.razor), change PushAsync to PushModalAsync:

  - 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)
• NavigationPage (API documentation)