maui - BlazorWebView in a Shell app opens, but after exit and navigate back into it, it hangs (does not open) - Stack Overflow

I have a Shell App that has many pages for demostration, I have one page BlazorWebViewPage that opens a Blazor website, succesfully, but only the first time. If I revisit the page, it does not open again, it freezes the app.

I have used a combination the following:

• Documentation from Microsoft: .0
• Code from .NET MAUI Blazor Hybrid App

In my Shell, I have a ShellContent item that hosts the Button and GoToAsync command for the BlazorWebViewPage:

<ShellContent
    Title="Views"
    ContentTemplate="{DataTemplate viewPages:MainViewsPage}"
    Route="MainViewsPage" />

I register in DI (hoping to return to the page in the state when exited):

mauiAppBuilder.Services.AddSingleton<BlazorWebViewPage>();

and add the route for the Blazor page

AddPage<BlazorWebViewPage>();

private void AddPage<TPage>() where TPage : ContentPage
{
    Routes.Add(typeof(TPage).Name, typeof(TPage));
    Routing.RegisterRoute(typeof(TPage).Name, typeof(TPage));
}

Then define the page that works the "first time" only:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
        x:Class="Learning.Pages.UserInterface.Controls.Views.BlazorWebViewPage"
    xmlns=";
    xmlns:x=";
    xmlns:local="clr-namespace:Learning"
    Title="Blazor Web View">
    
    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent ComponentType="{x:Type local:Components.Routes}" Selector="#app" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>
    
</ContentPage>

Simple setup for code-behind:

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

Blazor menu has this item:

<div class="nav-item px-3">
    <a class="nav-link" @onclick="NavigateToShellRoute">
        <span class="bi bi-exit-nav-menu" aria-hidden="true"></span> Exit Blazor
    </a>
</div>

Executing GoToAsync:

@code {
    private async Task NavigateToShellRoute()
    {
        await Shell.Current.GoToAsync("..");
    }
}

Navigation from MainViewsPage toBlazorWebViewPage:

<Button
    Command="{Binding GoToRouteCommand}"
    CommandParameter="BlazorWebViewPage"
    Text="Blazor WebView" />

public ICommand GoToRouteCommand { get; private set; }

GoToRouteCommand = new Command<string>(async (route) => await GoToAsync(route));

When I exit the Blazor page, it returns to MainViewsPage correctly. I am able to navigate to other pages, they continue to work properly. If I click the Button (Command) to back into the BlazorWebView again, nothing happens, at this point, I am unable to use the app as it is frozen.

Edit: Added code on MainViewsPage to navigate to BlazorWebViewPage.

I have a Shell App that has many pages for demostration, I have one page BlazorWebViewPage that opens a Blazor website, succesfully, but only the first time. If I revisit the page, it does not open again, it freezes the app.

I have used a combination the following:

• Documentation from Microsoft: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/blazorwebview?view=net-maui-8.0
• Code from .NET MAUI Blazor Hybrid App

In my Shell, I have a ShellContent item that hosts the Button and GoToAsync command for the BlazorWebViewPage:

<ShellContent
    Title="Views"
    ContentTemplate="{DataTemplate viewPages:MainViewsPage}"
    Route="MainViewsPage" />

I register in DI (hoping to return to the page in the state when exited):

mauiAppBuilder.Services.AddSingleton<BlazorWebViewPage>();

and add the route for the Blazor page

AddPage<BlazorWebViewPage>();

private void AddPage<TPage>() where TPage : ContentPage
{
    Routes.Add(typeof(TPage).Name, typeof(TPage));
    Routing.RegisterRoute(typeof(TPage).Name, typeof(TPage));
}

Then define the page that works the "first time" only:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
        x:Class="Learning.Pages.UserInterface.Controls.Views.BlazorWebViewPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Learning"
    Title="Blazor Web View">
    
    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent ComponentType="{x:Type local:Components.Routes}" Selector="#app" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>
    
</ContentPage>

Simple setup for code-behind:

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

Blazor menu has this item:

<div class="nav-item px-3">
    <a class="nav-link" @onclick="NavigateToShellRoute">
        <span class="bi bi-exit-nav-menu" aria-hidden="true"></span> Exit Blazor
    </a>
</div>

Executing GoToAsync:

@code {
    private async Task NavigateToShellRoute()
    {
        await Shell.Current.GoToAsync("..");
    }
}

Navigation from MainViewsPage toBlazorWebViewPage:

<Button
    Command="{Binding GoToRouteCommand}"
    CommandParameter="BlazorWebViewPage"
    Text="Blazor WebView" />

public ICommand GoToRouteCommand { get; private set; }

GoToRouteCommand = new Command<string>(async (route) => await GoToAsync(route));

When I exit the Blazor page, it returns to MainViewsPage correctly. I am able to navigate to other pages, they continue to work properly. If I click the Button (Command) to back into the BlazorWebView again, nothing happens, at this point, I am unable to use the app as it is frozen.

Edit: Added code on MainViewsPage to navigate to BlazorWebViewPage.

• maui
• maui-blazor
• maui-shell

Share Improve this question Follow edited Jan 6 at 3:31 Derek asked Jan 2 at 1:46 DerekDerek 70211 gold badge77 silver badges2121 bronze badges 3

• adding a page as singleton doesn't sound like a good idea – Bhavanesh N Commented Jan 2 at 6:17
• Please provide the code for the command . I test the code ,and it worked fine.Besides, try setting the HeightRequest and WidthRequest properties of the blazorwebview. – liyu Commented Jan 3 at 7:06
• @liyu, added to navigating to BlazorWebViewPage – Derek Commented Jan 6 at 3:32

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I reproduced your problem:

• On the .net 8, this problem only appear on Android platform and it worked well on Windows and iOS.

For the workaround on the .net 8, you can use Shell.Current.Navigation.PushAsync and PopAsync instead of GotoAsync. This will not freeze the app when you go to blazor webview page second time.

PushAsync:

GoToRouteCommand = new Command<string>(async (route) => 
                      await Shell.Current.Navigation.PushAsync(new BlazorWebViewPage());

PopAsync:

@code {
    private async Task NavigateToShellRoute()
    {
        await Shell.Current.Navigation.PopAsync();
    }
}

• On the .net 9, this problem will happen on all the platforms and I can't find any workaround. You can report this as a new issue on the github repo.