ASP.NET základní Blazor Hybrid směrování a navigace

Tento článek vysvětluje, jak spravovat směrování požadavků a navigaci v Blazor Hybrid aplikacích.

Chování směrování požadavků URI

Výchozí chování směrování požadavků URI:

• Propojení je interní , pokud se název hostitele a schéma shodují mezi identifikátorem URI zdroje aplikace a identifikátorem URI požadavku. Pokud se názvy hostitelů a schémata neshodují nebo pokud se sada target="_blank"propojení nastaví, považuje se odkaz za externí.
• Pokud je odkaz interní, otevře se v BlazorWebView aplikaci.
• Pokud je odkaz externí, otevře se odkaz aplikací určenou zařízením na základě registrované obslužné rutiny zařízení pro schéma odkazu.
• Pro interní odkazy, které se zdá požadovat soubor, protože poslední segment identifikátoru URI používá tečku (například /file.x, /Maryia.Melnyk), /image.gifale neodkazuje na žádný statický obsah:
  • WPF a model Windows Forms: Vrátí se obsah stránky hostitele.
  • .NET MAUI: Vrátí se odpověď 404.

Chcete-li změnit chování zpracování odkazů pro odkazy, které nenastavují target="_blank", zaregistrujte UrlLoading událost a nastavte UrlLoadingEventArgs.UrlLoadingStrategy vlastnost. Výčet UrlLoadingStrategy umožňuje nastavit chování zpracování odkazů na některou z následujících hodnot:

• OpenExternally: Načtěte adresu URL pomocí aplikace určené zařízením. Toto je výchozí strategie pro identifikátory URI s externím hostitelem.
• OpenInWebView: Načtěte adresu URL v souboru BlazorWebView. Toto je výchozí strategie pro adresy URL s hostitelem, který odpovídá původu aplikace. Tuto strategii nepoužívejte pro externí odkazy, pokud nemůžete zajistit, aby cílový identifikátor URI byl plně důvěryhodný.
• CancelLoad: Zruší aktuální pokus o načtení adresy URL.

Vlastnost UrlLoadingEventArgs.Url se používá k získání nebo dynamickému nastavení adresy URL.

Upozorňující

Ve výchozím nastavení se externí odkazy otevírají v aplikaci určené zařízením. Otevírání externích odkazů v rámci můžou BlazorWebView představovat ohrožení zabezpečení a nemělo by být povoleno, pokud nebudete moct zajistit, aby externí odkazy byly plně důvěryhodné.

Dokumentace k rozhraní API:

• .NET MAUI: BlazorWebView.UrlLoading
• WPF: BlazorWebView.UrlLoading
• model Windows Forms:BlazorWebView.UrlLoading

Obor Microsoft.AspNetCore.Components.WebView názvů se vyžaduje pro následující příklady:

using Microsoft.AspNetCore.Components.WebView;

Do konstruktoru, kde PageBlazorWebView se vytvoří, přidejte následující obslužnou rutinu události, která je MainPage.xaml.cs v aplikaci vytvořené ze .NET MAUI šablony projektu.

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

UrlLoading="Handle_UrlLoading" Přidejte atribut do BlazorWebView ovládacího prvku v .xaml souboru:

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

Do souboru přidejte obslužnou rutinu .xaml.cs události:

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

Do konstruktoru formuláře obsahujícího BlazorWebView ovládací prvek přidejte následující registraci události:

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

Získání nebo nastavení cesty pro počáteční navigaci

BlazorWebView.StartPath Vlastnost slouží k získání nebo nastavení cesty pro počáteční navigaci v rámci navigačního Blazor kontextu po Razor dokončení načítání komponenty. Výchozí počáteční cesta je relativní kořenová cesta URL (/).

MainPage V kódu XAML (MainPage.xaml) zadejte počáteční cestu. Následující příklad nastaví cestu na úvodní stránku na adrese /welcome:

<BlazorWebView ... StartPath="/welcome" ...>
    ...
<BlazorWebView>

Alternativně lze počáteční cestu nastavit v konstruktoru MainPage (MainPage.xaml.cs):

blazorWebView.StartPath = "/welcome";

V návrháři MainWindow (MainWindow.xaml) zadejte počáteční cestu. Následující příklad nastaví cestu na úvodní stránku na adrese /welcome:

<blazor:BlazorWebView ... StartPath="/welcome" ...>
    ...
</blazor:BlazorWebView>

Form1 Uvnitř konstruktoru Form1.cs souboru zadejte počáteční cestu. Následující příklad nastaví cestu na úvodní stránku na adrese /welcome:

blazorWebView1.StartPath = "/welcome";

Navigace mezi stránkami a Razor komponentami

Tato část vysvětluje, jak přecházet mezi .NET MAUI stránkami a Razor komponentami obsahu.

Hybridní .NET MAUIBlazor šablona projektu není aplikace založená na prostředí, takže navigace založená na identifikátorech URI pro aplikace založené na prostředích není vhodná pro projekt založený na šabloně projektu. Příklady v této části slouží NavigationPage k provádění bezmodální nebo modální navigace.

V následujícím příkladu:

• Obor názvů aplikace je MauiBlazor, který odpovídá navrhovanému názvu projektu kurzu Sestavení .NET MAUIBlazor Hybrid aplikace .
• A ContentPage se umístí do nové složky přidané do aplikace s názvem Views.

V App.xaml.cspříkazu vytvořte jako MainPage vzorec NavigationPage provedením následující změny:

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

V následujícím NavigationExample souboru kódu obslužná CloseButton_Clicked rutina události pro volání PopAsync tlačítka zavřít, aby se vysunul ContentPage z navigačního zásobníku.

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

V komponentě Razor :

• Přidejte obor názvů pro stránky obsahu aplikace. V následujícím příkladu je MauiBlazor.Viewsobor názvů .
• Přidejte element HTML button s obslužnou rutinou @onclick události pro otevření stránky obsahu. Metoda obslužné rutiny události má název OpenPage.
• V obslužné rutině události volání PushAsync nasdílení NavigationExampleContentPage, , do navigačního zásobníku.

Následující příklad je založen na Index komponentě .NET MAUIBlazor v šabloně projektu.

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

Změna předchozího příkladu na modální navigaci:

• CloseButton_Clicked V metodě (Views/NavigationExample.xaml.cs), změňte PopAsync na PopModalAsync:

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

• OpenPage V metodě (Pages/Index.razor), změňte PushAsync na PushModalAsync:

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

Další informace naleznete v následujících zdrojích:

• NavigationPage article (.NET MAUI dokumentace)
• NavigationPage (Dokumentace k rozhraní API)

Propojení aplikací (přímé propojení)

Často je žádoucí připojit web a mobilní aplikaci, aby odkazy na webu spustily mobilní aplikaci a zobrazovaly obsah v mobilní aplikaci. Propojení aplikací, označované také jako hloubkové propojení, je technika, která mobilnímu zařízení umožňuje reagovat na identifikátor URI a spustit obsah v mobilní aplikaci reprezentované identifikátorem URI.

Další informace najdete v následujících článcích v .NET MAUI dokumentaci:

• Odkazy na aplikace pro Android
• Univerzální odkazy Apple