ASP.NET Temel Blazor Hybrid yönlendirme ve gezinti

Aşağıdaki olay işleyicisiniPage, proje şablonundan oluşturulan bir uygulamada bulunan MainPage.xaml.cs öğesinin oluşturulduğu oluşturucuya BlazorWebView .NET MAUI ekleyin.

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

özniteliğini UrlLoading="Handle_UrlLoading" dosyadaki BlazorWebView denetime .xaml ekleyin:

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

Dosyaya olay işleyicisini .xaml.cs ekleyin:

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

Denetimi içeren formun oluşturucusunda BlazorWebView aşağıdaki olay kaydını ekleyin:

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

Sayfalar ve Razor bileşenler arasında gezinme

Bu bölümde, içerik sayfaları ve Razor bileşenler arasında .NET MAUI gezinme açıklanmaktadır.

.NET MAUIBlazor Karma proje şablonu Kabuk tabanlı bir uygulama olmadığından, Kabuk tabanlı uygulamalar için URI tabanlı gezinti, proje şablonunu temel alan bir proje için uygun değildir. Bu bölümdeki örnekler, modsuz veya kalıcı gezinti gerçekleştirmek için öğesini NavigationPage kullanır.

Aşağıdaki örnekte:

• Uygulamanın ad alanı, Uygulama derleme öğreticisinin önerilen proje adıyla eşleşen şeklindedir.MauiBlazor.NET MAUIBlazor Hybrid
• , ContentPage adlı Viewsuygulamaya eklenen yeni bir klasöre yerleştirilir.

içindeApp.xaml.cs, aşağıdaki değişikliği yaparak öğesini olarak NavigationPage oluşturunMainPage:

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

Aşağıdaki NavigationExample kod dosyasında, kapat düğmesinin CloseButton_Clicked olay işleyicisi gezinti yığınını ContentPage kapatmak için çağrı yaparPopAsync.

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

Bir Razor bileşende:

• Uygulamanın içerik sayfaları için ad alanını ekleyin. Aşağıdaki örnekte ad alanı şeklindedir MauiBlazor.Views.
• İçerik sayfasını açmak için olay işleyicisi olan bir@onclick HTML button öğesi ekleyin. Olay işleyici yöntemi olarak adlandırılır OpenPage.
• Olay işleyicisinde , öğesini NavigationExamplegezinti yığınına ContentPagegöndermek için çağrısında PushAsync bulunur.

Aşağıdaki örnek, proje şablonundaki Index .NET MAUIBlazor bileşeni temel alır.

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

Önceki örneği kalıcı gezinti olarak değiştirmek için:

• yönteminde CloseButton_Clicked ()Views/NavigationExample.xaml.cs olarak PopModalAsyncdeğiştirinPopAsync:

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

• yönteminde OpenPage ()Pages/Index.razor olarak PushModalAsyncdeğiştirinPushAsync:

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

Daha fazla bilgi edinmek için aşağıdaki kaynaklara bakın:

• NavigationPage article (.NET MAUI belgeler)
• NavigationPage (API belgeleri)