.NET MAUI with multiple Blazor webviews

Question

.NET MAUI with multiple Blazor webviews

Federico RUSCONI 1

I'm trying to build an app with .NET MAUI with multiple blazor webviews. The idea is to use the XAML Shell to have tabs, and then in each tab have a XAML page with a Blazor webview component.
I am able to add multiple webviews and to point to different Razor layout files. The problem is that when I click a tab, the blazor router navigates to the "/" route always, so the same page is displayed regardless of the tab being clicked.

I did find sources saying it is possible to have multiple blazor web views, but could not find any code example.

Anonymous

2022-09-14T07:23:35.05+00:00

Hi @Federico RUSCONI , could you please let us know which tutorial you followed to realize the navigation? Or any code snippet for us to reproduce the issue? Thank you very much.

Federico RUSCONI 1

Hey @Anonymous ,

I followed the guide found here to create the tabs, and then just created two XAML ContentPage with the BlazorWebView as it comes from the .NET MAUI Blazor default project template. The two BlazorWebViews point to the same index.html in the wwwroot folder, but uses different ComponentTypes.

AppShell.xaml

<?xml version="1.0" encoding="utf-8" ?>  
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"  
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
       xmlns:dashboard="clr-namespace:BlazorSuite.Dashboard"         
       xmlns:second="clr-namespace:BlazorSuite.SecondApp"  
       x:Class="BlazorSuite.AppShell">  
    <TabBar>   
        <Tab Title="Dashboard">  
            <ShellContent ContentTemplate="{DataTemplate dashboard:MainPage}"  />  
        </Tab>  
        <Tab Title="Second App">  
            <ShellContent ContentTemplate="{DataTemplate second:SecondAppPage}"  />  
        </Tab>  
    </TabBar>  
</Shell>

MainPage and SecondAppPage in next comment

Federico RUSCONI 1 Reputation point

2022-09-14T07:50:37.747+00:00

For some reason it's just not letting me post the rest of the code. The preview remains empty and the submit buttons doesn't do anything
Anonymous

2022-09-14T08:35:47.74+00:00

Here's a test result, so I'm afraid you may take a look at this document to check if the navigation in your blazor component.
Federico RUSCONI 1 Reputation point

2022-09-14T23:11:11.453+00:00

Thank you.
Could you post a screenshot of your MainPage.xaml and NewPage1.xaml? Are you using BlazorWebView in both pages?

Here is my MainPage.xaml:

Here is my second XAML page

I'm applying a different folder structure for this project:

As you can see, I am pointing to the same index.html because I thought it would be an overkill to have two of them, but I am referencing two Main.razor in two different namespaces (each with their own layout file)
I did try to add the parameter Route to my ShellContent elements but didn't do anything different.

Anonymous

If you used same name of Main.razor in the Component, please open your Main.razor, set the full path for DefaultLayout ,for example, you have a razor page called MainLayout.razor in the Shared Folder. you need to change the value of DefaultLayout to @typeof(BlazorSuite.RenameTool.Shared.MainLayout) like following Main.razor, I changed LayoutView as well.

   <Router AppAssembly="@typeof(Main).Assembly">  
                   <Found Context="routeData">  
                                   <RouteView RouteData="@routeData" DefaultLayout="@typeof(BlazorSuite.RenameTool.Shared.MainLayout)" />  
                                   <FocusOnNavigate RouteData="@routeData" Selector="h1" />  
                   </Found>  
                   <NotFound>  
                                   <LayoutView Layout="@typeof(BlazorSuite.RenameTool.Shared.MainLayout)">  
                                                   <p role="alert">Sorry, there's nothing at this address.</p>  
                                   </LayoutView>  
                   </NotFound>  
   </Router>

Federico RUSCONI 1 Reputation point

2022-09-15T05:51:33.403+00:00

Thanks for your answer.

I didn't mention that I did do that and also tried changing the name of one of the layout files. The layout is displaying correctly, i.e. different layouts based on active tab, the problem is the router that always displays the index.razor page that has uri of "/" (@Anonymous "/"). If I set the index.razor files in both namespaces with @Anonymous "/" I get an error, I assume it is because there are two routes that are the same. If I change one of the route, it will not be displayed.

The goal would be to have both index.razor mapped to "/" and each tab's <Router> would point to the correct one. If that is not possible, at least set a default "base" route for each main.razor router. So the default page can be something other than "/".

Thanks
Anonymous

2022-09-15T06:11:18.533+00:00
Did you add @page /yourroute in your MainLayout.razor page? You can refer to this document route templates.

@page "/blazor-route" @page "/different-blazor-route" <h1>Blazor routing</h1>
Federico RUSCONI 1 Reputation point

2022-09-15T06:19:23.787+00:00
Just tried, same issues.

A workaround that I am doing is injecting the NavigationManager in MainLayout in one of the two namespaces, and navigate to my desired route on initialization

override protected void OnInitialized() { navManager.NavigateTo("/rename"); }

Although it seems more like a patch rather than a solution.
Anonymous

2022-09-19T09:20:29.677+00:00

Thanks for your sharing. Please open a feature request in MAUI Github page.

Your answer

Anonymous

2022-09-14T07:23:35.05+00:00

Hi @Federico RUSCONI , could you please let us know which tutorial you followed to realize the navigation? Or any code snippet for us to reproduce the issue? Thank you very much.
Federico RUSCONI 1 Reputation point

2022-09-14T07:39:34.82+00:00

Hey @Anonymous ,

I followed the guide found here to create the tabs, and then just created two XAML ContentPage with the BlazorWebView as it comes from the .NET MAUI Blazor default project template. The two BlazorWebViews point to the same index.html in the wwwroot folder, but uses different ComponentTypes.

AppShell.xaml

<?xml version="1.0" encoding="utf-8" ?> <Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:dashboard="clr-namespace:BlazorSuite.Dashboard" xmlns:second="clr-namespace:BlazorSuite.SecondApp" x:Class="BlazorSuite.AppShell"> <TabBar> <Tab Title="Dashboard"> <ShellContent ContentTemplate="{DataTemplate dashboard:MainPage}" /> </Tab> <Tab Title="Second App"> <ShellContent ContentTemplate="{DataTemplate second:SecondAppPage}" /> </Tab> </TabBar> </Shell>

MainPage and SecondAppPage in next comment
Federico RUSCONI 1 Reputation point

2022-09-14T07:50:37.747+00:00

For some reason it's just not letting me post the rest of the code. The preview remains empty and the submit buttons doesn't do anything
Anonymous

2022-09-14T08:35:47.74+00:00

Here's a test result, so I'm afraid you may take a look at this document to check if the navigation in your blazor component.
Federico RUSCONI 1 Reputation point

2022-09-14T23:11:11.453+00:00

Thank you.
Could you post a screenshot of your MainPage.xaml and NewPage1.xaml? Are you using BlazorWebView in both pages?

Here is my MainPage.xaml:

Here is my second XAML page

I'm applying a different folder structure for this project:

As you can see, I am pointing to the same index.html because I thought it would be an overkill to have two of them, but I am referencing two Main.razor in two different namespaces (each with their own layout file)
I did try to add the parameter Route to my ShellContent elements but didn't do anything different.
Anonymous

2022-09-15T05:40:58.97+00:00

If you used same name of Main.razor in the Component, please open your Main.razor, set the full path for DefaultLayout ,for example, you have a razor page called MainLayout.razor in the Shared Folder. you need to change the value of DefaultLayout to @typeof(BlazorSuite.RenameTool.Shared.MainLayout) like following Main.razor, I changed LayoutView as well.

<Router AppAssembly="@typeof(Main).Assembly"> <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="@typeof(BlazorSuite.RenameTool.Shared.MainLayout)" /> <FocusOnNavigate RouteData="@routeData" Selector="h1" /> </Found> <NotFound> <LayoutView Layout="@typeof(BlazorSuite.RenameTool.Shared.MainLayout)"> <p role="alert">Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router>
Federico RUSCONI 1 Reputation point

2022-09-15T05:51:33.403+00:00

Thanks for your answer.

I didn't mention that I did do that and also tried changing the name of one of the layout files. The layout is displaying correctly, i.e. different layouts based on active tab, the problem is the router that always displays the index.razor page that has uri of "/" (@Anonymous "/"). If I set the index.razor files in both namespaces with @Anonymous "/" I get an error, I assume it is because there are two routes that are the same. If I change one of the route, it will not be displayed.

The goal would be to have both index.razor mapped to "/" and each tab's <Router> would point to the correct one. If that is not possible, at least set a default "base" route for each main.razor router. So the default page can be something other than "/".

Thanks
Anonymous

2022-09-15T06:11:18.533+00:00

Did you add @page /yourroute in your MainLayout.razor page? You can refer to this document route templates.

@page "/blazor-route" @page "/different-blazor-route" <h1>Blazor routing</h1>
Federico RUSCONI 1 Reputation point

2022-09-15T06:19:23.787+00:00

Just tried, same issues.

A workaround that I am doing is injecting the NavigationManager in MainLayout in one of the two namespaces, and navigate to my desired route on initialization

override protected void OnInitialized() { navManager.NavigateTo("/rename"); }

Although it seems more like a patch rather than a solution.
Anonymous

2022-09-19T09:20:29.677+00:00

Thanks for your sharing. Please open a feature request in MAUI Github page.

Share via

.NET MAUI with multiple Blazor webviews

Your answer