ASP.NET Temel Blazor Hybrid yönlendirme ve gezinti

  • Makale

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Bu makalede, uygulamalarda istek yönlendirme ve gezinti Blazor Hybrid yönetimi açıklanmaktadır.

URI isteği yönlendirme davranışı

Varsayılan URI isteği yönlendirme davranışı:

  • Ana bilgisayar adı ve düzeni uygulamanın kaynak URI'si ile istek URI'si arasında eşleşiyorsa bir bağlantı iç bağlantıdır. Konak adları ve düzenleri eşleşmediğinde veya bağlantı ayarlıysatarget="_blank", bağlantı dış olarak kabul edilir.
  • Bağlantı dahiliyse, bağlantı uygulama tarafından içinde BlazorWebView açılır.
  • Bağlantı dış ise, bağlantı, bağlantının şeması için cihazın kayıtlı işleyicisine göre cihaz tarafından belirlenen bir uygulama tarafından açılır.
  • URI'nin son kesimi noktalı gösterimi kullandığından (örneğin, /file.x, /Maryia.Melnyk), /image.gifancak herhangi bir statik içeriğe işaret etmediğinden dosya isteğinde bulunan iç bağlantılar için:
    • WPF ve Windows Forms: Konak sayfası içeriği döndürülür.
    • .NET MAUI: 404 yanıtı döndürülür.

ayarlı target="_blank"olmayan bağlantıların bağlantı işleme davranışını değiştirmek için olayı kaydedin UrlLoading ve özelliğini ayarlayın UrlLoadingEventArgs.UrlLoadingStrategy . Numaralandırma, UrlLoadingStrategy bağlantı işleme davranışını aşağıdaki değerlerden herhangi birine ayarlamaya olanak tanır:

  • OpenExternally: Cihaz tarafından belirlenen bir uygulamayı kullanarak URL'yi yükleyin. Bu, dış konağı olan URI'ler için varsayılan stratejidir.
  • OpenInWebView: içindeki URL'yi BlazorWebViewyükleyin. Bu, uygulama kaynağıyla eşleşen bir konağa sahip URL'ler için varsayılan stratejidir. Hedef URI'ye tam olarak güvenilmediği sürece dış bağlantılar için bu stratejiyi kullanmayın.
  • CancelLoad: Geçerli URL yükleme denemesini iptal eder.

özelliği URL'yi UrlLoadingEventArgs.Url almak veya dinamik olarak ayarlamak için kullanılır.

Uyarı

Varsayılan olarak, dış bağlantılar cihaz tarafından belirlenen bir uygulamada açılır. içinde BlazorWebView dış bağlantıların açılması güvenlik açıklarına neden olabilir ve dış bağlantılara tam olarak güvenilmediği sürece etkinleştirilmemelidir.

API belgeleri:

Ad Microsoft.AspNetCore.Components.WebView alanı aşağıdaki örnekler için gereklidir:

using Microsoft.AspNetCore.Components.WebView;

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

İlk gezinti için yol alma veya ayarlama

Bileşenin BlazorWebView.StartPath yüklenmesi tamamlandığında gezinti bağlamı Razor içinde Blazor ilk gezinti yolunu almak veya ayarlamak için özelliğini kullanın. Varsayılan başlangıç yolu göreli kök URL yoludur (/).

XAML işaretlemesinde MainPage ()MainPage.xaml başlangıç yolunu belirtin. Aşağıdaki örnek adresinde /welcomebir hoş geldiniz sayfasının yolunu ayarlar:

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

Alternatif olarak, başlangıç yolu oluşturucuda MainPage (MainPage.xaml.cs):

blazorWebView.StartPath = "/welcome";

Tasarımcıda MainWindow ()MainWindow.xaml başlangıç yolunu belirtin. Aşağıdaki örnek adresinde /welcomebir hoş geldiniz sayfasının yolunu ayarlar:

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

Form1 Dosyanın oluşturucusunun Form1.cs içinde başlangıç yolunu belirtin. Aşağıdaki örnek adresinde /welcomebir hoş geldiniz sayfasının yolunu ayarlar:

blazorWebView1.StartPath = "/welcome";

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:

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@onclickHTML 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:

Uygulama bağlama (derin bağlama)

Web sitesindeki bağlantıların mobil uygulamayı başlatması ve içeriği mobil uygulamada görüntülemesi için bir web sitesi ve mobil uygulama arasında bağlantı kurmak genellikle tercih edilir. Derin bağlantı olarak da bilinen uygulama bağlama, bir mobil cihazın URI'ye yanıt vermesini ve URI ile temsil edilen bir mobil uygulamada içerik başlatmasını sağlayan bir tekniktir.

Daha fazla bilgi için belgelerde aşağıdaki makalelere .NET MAUI bakın: