ASP.NET Core Blazor Hybrid 라우팅 및 탐색

이 문서에서는 Blazor Hybrid 앱에서 요청 라우팅 및 탐색을 관리하는 방법을 설명합니다.

URI 요청 라우팅 동작

기본 URI 요청 라우팅 동작:

• 호스트 이름과 구성표가 앱의 원본 URI와 요청 URI 간에 일치하는 경우 링크는 내부 입니다. 호스트 이름 및 스키마가 일치하지 않거나 링크가 설정target="_blank"되면 링크가 외부로 간주됩니다.
• 링크가 내부인 경우 앱이 해당 링크를 BlazorWebView에서 엽니다.
• 링크가 외부인 경우 해당 링크는 디바이스에서 링크 구성표에 대한 등록된 처리기를 기반으로 결정하는 앱에서 열립니다.
• URI의 마지막 세그먼트가 점 표기법(예/file.x: , ) /Maryia.Melnyk/image.gif을 사용하지만 정적 콘텐츠를 가리키지 않으므로 파일을 요청하는 것처럼 보이는 내부 링크의 경우:
  • WPF 및 Windows Forms: 호스트 페이지 콘텐츠가 반환됩니다.
  • .NET MAUI: 404 응답이 반환됩니다.

target="_blank"를 설정하지 않는 링크에 대한 링크 처리 동작을 변경하려면 UrlLoading 이벤트를 등록하고 UrlLoadingEventArgs.UrlLoadingStrategy 속성을 설정합니다. UrlLoadingStrategy 열거형을 사용하면 링크 처리 동작을 다음 값 중 하나로 설정할 수 있습니다.

• OpenExternally: 디바이스에서 결정하는 앱을 사용하여 URL을 로드합니다. 외부 호스트를 사용하는 URI의 기본 전략입니다.
• OpenInWebView: BlazorWebView 내에서 URL을 로드합니다. 호스트가 앱 원본과 일치하는 URL의 기본 전략입니다. 대상 URI를 완전히 신뢰할 수 있는 경우가 아니면 외부 링크에 이 전략을 사용하지 마세요.
• CancelLoad: 현재 URL 로드 시도를 취소합니다.

UrlLoadingEventArgs.Url 속성은 URL을 가져오거나 동적으로 설정하는 데 사용됩니다.

Warning

기본적으로 외부 링크는 디바이스에서 결정하는 앱에서 열립니다. BlazorWebView 내의 외부 링크를 열면 보안 취약성이 발생할 수 있으므로 외부 링크를 완전히 신뢰할 수 없는 한 사용하도록 설정해서는 안 됩니다.

API 설명서:

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

Microsoft.AspNetCore.Components.WebView 네임스페이스는 다음 예제에 필요합니다.

using Microsoft.AspNetCore.Components.WebView;

BlazorWebView이(가) 생성되는 Page의 생성자에 다음 이벤트 처리기를 추가하며, 이는 .NET MAUI 프로젝트 템플릿에서 만든 앱에서 MainPage.xaml.cs됩니다.

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

UrlLoading="Handle_UrlLoading" 특성을 .xaml 파일의 BlazorWebView 컨트롤에 다음과 같이 추가합니다.

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

.xaml.cs 파일에 이벤트 처리기를 다음과 같이 추가합니다.

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

BlazorWebView 컨트롤을 포함하는 양식의 생성자에서 다음 이벤트 등록을 추가합니다.

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

초기 탐색에 대한 경로 가져오기 또는 설정

구성 요소 로드가 BlazorWebView.StartPath 완료되면 이 속성을 사용하여 탐색 컨텍스트 내에서 Blazor 초기 탐색 경로를 Razor 얻거나 설정합니다. 기본 시작 경로는 상대 루트 URL 경로(/)입니다.

MainPage XAML 태그(MainPage.xaml)에서 시작 경로를 지정합니다. 다음 예제에서는 시작 페이지의 /welcome경로를 다음과 같이 설정합니다.

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

또는 시작 경로를 생성자(MainPage.xaml.cs)에서 MainPage 설정할 수 있습니다.

blazorWebView.StartPath = "/welcome";

MainWindow 디자이너(MainWindow.xaml)에서 시작 경로를 지정합니다. 다음 예제에서는 시작 페이지의 /welcome경로를 다음과 같이 설정합니다.

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

파일의 Form1Form1.cs 생성자 내에서 시작 경로를 지정합니다. 다음 예제에서는 시작 페이지의 /welcome경로를 다음과 같이 설정합니다.

blazorWebView1.StartPath = "/welcome";

페이지 및 Razor 구성 요소 간 탐색

이 섹션에서는 콘텐츠 페이지와 Razor 구성 요소 간 .NET MAUI 을 탐색하는 방법을 설명합니다.

하이브리드 프로젝트 템플릿은 .NET MAUIBlazor 셸 기반 앱이 아니므로 셸 기반 앱에 대한 URI 기반 탐색은 프로젝트 템플릿을 기반으로 하는 프로젝트에 적합하지 않습니다. 이 섹션의 예제에서는 모덜리스 또는 모달 탐색을 수행하는 데 사용합니다 NavigationPage .

다음 예제에서

• 앱의 네임스페이스는 MauiBlazor앱 빌드 .NET MAUIBlazor Hybrid 자습서의 제안된 프로젝트 이름과 일치합니다.
• A ContentPage 는 앱에 추가된 새 폴더에 배치됩니다 Views.

에서 App.xaml.cs다음과 같이 변경하여 as를 NavigationPage 만듭니 MainPage 다.

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

다음 NavigationExample 코드 파일 CloseButton_Clicked 에서 닫기 단추에 대한 이벤트 처리기는 탐색 스택의 끄기를 ContentPage 호출 PopAsync 합니다.

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 구성 요소에서:

• 앱의 콘텐츠 페이지에 대한 네임스페이스를 추가합니다. 다음 예제에서 네임스페이스는 .입니다 MauiBlazor.Views.
• 이벤트 처리기를 사용하여 @onclick HTML button 요소를 추가하여 콘텐츠 페이지를 엽니다. 이벤트 처리기 메서드의 이름은 OpenPage.입니다.
• 이벤트 처리기에서 , NavigationExample를 탐색 스택에 푸시ContentPage하기 위해 호출 PushAsync 합니다.

다음 예제는 프로젝트 템플릿의 Index 구성 요소를 기반으로 합니다 .NET MAUIBlazor .

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

앞의 예제를 모달 탐색으로 변경하려면 다음을 수행합니다.

• 메서드(CloseButton_ClickedViews/NavigationExample.xaml.cs)에서 다음으로 변경 PopAsync 합니다PopModalAsync.

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

• 메서드(OpenPagePages/Index.razor)에서 다음으로 변경 PushAsync 합니다PushModalAsync.

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

자세한 내용은 다음 리소스를 참조하세요.

• NavigationPage 문서(.NET MAUI 설명서)
• NavigationPage (API 설명서)

앱 연결(딥 링크)

웹 사이트의 링크가 모바일 앱을 시작하고 모바일 앱에 콘텐츠를 표시하도록 웹 사이트와 모바일 앱을 연결하는 것이 바람직한 경우가 많습니다. 딥 링크라고도 하는 앱 연결은 모바일 디바이스가 URI에 응답하고 URI로 표시되는 모바일 앱에서 콘텐츠를 시작할 수 있도록 하는 기술입니다.

자세한 내용은 설명서의 다음 문서를 .NET MAUI 참조하세요.

• Android 앱 링크
• Apple 유니버설 링크