Maui сhange navigation in BlazorWebView

user_11757458 0
Viewed 548

How can I change a page in BlazorWebView using Maui? For example, the page '/' was opened and I need to open '/fetch'.

I found how to return to the previous link via js.

Created a Custom Navigation Manager:

    public class CustomNavigationManager
    {
        private static IJSRuntime JSRuntime { get; set; }
        public CustomNavigationManager(IJSRuntime jSRuntime)
        {
            JSRuntime = jSRuntime;
        }

        public static async Task Navigation(string url)
        {
            //Microsoft.Maui.Platform;
            if (JSRuntime!= null)
            {
                await JSRuntime.InvokeVoidAsync("navigation", url);
            }
        }
    }

Which calls the Js code. Which calls the Js code. Which I placed in wwwroot/index.html

<script type="text/javascript">
        window.navigation = (url) => {
            window.location.href = url; // Error: There is no content at fetch.
            //history.back();
            //window.location="https://0.0.0.0/fetch"; //Error: There is no content at fetch.
        }
</script>

Registering a service

builder.Services.AddTransient<CustomNavigationManager>();

And inject in Shared/MainLayout.razor

@page "/"
@inject CustomNavigationManager navigation

And I use it in maui

await CustomNavigationManager.Navigation("/fetch");

If I use the js code history.back(); then everything works,

but if I want to redirect to /fetch using

window.location.href = url;

then I get an error: There is no content at fetch.

Fetch.razor page

@page "/fetch"
@page "/fetch/{id}"

<h1>Test!</h1>
maui blazor javascript c#
1 Answers

Fetch.razor

@page "/fetch"
@page "/fetch/{text}"

<h3>@Text</h3>

@code
{
    [Parameter]
    public string Text { get; set; }
}

MainLayout.razor

@inherits LayoutComponentBase

@inject CustomNavigationManager navigation

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>

        <div>@Url</div>
    </main>
</div>

@code
{
    [Inject]
    private NavigationManager MyNavigationManager { get; set; }

    private string Url;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        MyNavigationManager.LocationChanged += OnLocationChanges;
        Url = MyNavigationManager.Uri;
    }

    private void OnLocationChanges(object sender, LocationChangedEventArgs e)
    {
        Url = e.Location;
        StateHasChanged();
    }
}

CustomNavigationManager.cs

public class CustomNavigationManager
    {
        private static NavigationManager _navigationManager;
        public CustomNavigationManager(NavigationManager MyNavigationManager)
        {
            _navigationManager = MyNavigationManager;
        }

        public static void Navigation(string url)
        {
            if (_navigationManager!=null)
            {
                _navigationManager.NavigateTo(url);
            }
        }
    }

Decided so: Subscribed to the navigation change event. Implemented the service, and called NavigateTo. It didn't work through Js. Note: BlazorWebView must already download the project, otherwise nothing will work)

user_117574580
Related