perutean dan navigasi inti Blazor Hybrid ASP.NET

Tambahkan penanganan aktivitas berikut ke konstruktor Page tempat BlazorWebView dibuat, yang ada MainPage.xaml.cs di aplikasi yang dibuat dari .NET MAUI templat proyek.

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

UrlLoading="Handle_UrlLoading" Tambahkan atribut ke BlazorWebView kontrol dalam .xaml file:

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

Tambahkan penanganan aktivitas dalam .xaml.cs file:

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

Dalam konstruktor formulir yang berisi BlazorWebView kontrol, tambahkan pendaftaran peristiwa berikut:

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

Navigasi di antara halaman dan Razor komponen

Bagian ini menjelaskan cara menavigasi di antara .NET MAUI halaman konten dan Razor komponen.

.NET MAUIBlazor Templat proyek hibrid bukan aplikasi berbasis Shell, sehingga navigasi berbasis URI untuk aplikasi berbasis Shell tidak cocok untuk proyek berdasarkan templat proyek. Contoh di bagian ini menggunakan NavigationPage untuk melakukan navigasi modeless atau modal.

Dalam contoh berikut:

• Namespace aplikasi adalah MauiBlazor, yang cocok dengan nama proyek yang disarankan dari tutorial Membangun .NET MAUIBlazor Hybrid aplikasi .
• ContentPage ditempatkan di folder baru yang ditambahkan ke aplikasi bernama Views.

Di App.xaml.cs, buat MainPage sebagai dengan NavigationPage membuat perubahan berikut:

- 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>

Dalam file kode berikut NavigationExample , CloseButton_Clicked penanganan aktivitas untuk panggilan PopAsync tombol tutup untuk memunculkan ContentPage tumpukan navigasi.

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();
    }
}

Razor Dalam komponen:

• Tambahkan namespace layanan untuk halaman konten aplikasi. Dalam contoh berikut, namespace adalah MauiBlazor.Views.
• Tambahkan elemen HTML button dengan @onclick penanganan aktivitas untuk membuka halaman konten. Metode penanganan aktivitas diberi nama OpenPage.
• Di penanganan aktivitas, panggil PushAsync untuk mendorong ContentPage, NavigationExample, ke tumpukan navigasi.

Contoh berikut didasarkan pada Index komponen dalam .NET MAUIBlazor templat proyek.

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());
    }
}

Untuk mengubah contoh sebelumnya ke navigasi modal:

• CloseButton_Clicked Dalam metode (Views/NavigationExample.xaml.cs), ubah PopAsync menjadi PopModalAsync:

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

• OpenPage Dalam metode (Pages/Index.razor), ubah PushAsync menjadi PushModalAsync:

  - await App.Current.MainPage.Navigation.PushAsync(new NavigationExample());
  + await App.Current.MainPage.Navigation.PushModalAsync(new NavigationExample());
  

Untuk informasi selengkapnya, lihat sumber daya berikut:

• NavigationPage artikel (.NET MAUI dokumentasi)
• NavigationPage (Dokumentasi API)