다음을 통해 공유

ASP.NET Core Blazor Hybrid

  • 아티클

참고 항목

이 문서의 최신 버전은 아닙니다. 현재 릴리스는 이 문서의 .NET 8 버전을 참조 하세요.

Warning

이 버전의 ASP.NET Core는 더 이상 지원되지 않습니다. 자세한 내용은 .NET 및 .NET Core 지원 정책을 참조 하세요. 현재 릴리스는 이 문서의 .NET 8 버전을 참조 하세요.

Important

이 정보는 상업적으로 출시되기 전에 실질적으로 수정될 수 있는 시험판 제품과 관련이 있습니다. Microsoft는 여기에 제공된 정보에 대해 어떠한 명시적, 또는 묵시적인 보증을 하지 않습니다.

현재 릴리스는 이 문서의 .NET 8 버전을 참조 하세요.

이 문서에서는 ASP.NET Core 앱에서 .NET을 사용하여 대화형 클라이언트 쪽 웹 UI를 빌드하는 방법인 ASP.NET Core Blazor Hybrid를 설명합니다.

Blazor Hybrid를 사용하여 데스크톱 및 모바일 네이티브 클라이언트 프레임워크를 .NET 및 Blazor와 혼합합니다.

Blazor Hybrid 앱에서 Razor 구성 요소는 기본적으로 디바이스에서 실행됩니다. 구성 요소는 로컬 interop 채널을 통해 포함된 Web View 컨트롤에 렌더링됩니다. 구성 요소는 브라우저에서 실행되지 않으며 WebAssembly는 관련되지 않습니다. Razor 구성 요소는 코드를 빠르게 로드 및 실행하고, 구성 요소는 .NET 플랫폼을 통해 디바이스의 네이티브 기능에 대한 전체 액세스 권한을 갖습니다. Web View에서 렌더링되는 구성 요소 스타일은 플랫폼에 따라 다르며, 사용자 지정 스타일시트를 사용하여 플랫폼 간 차이를 렌더링해야 할 수 있습니다.

Blazor Hybrid 문서에서는 Razor 구성 요소를 네이티브 클라이언트 프레임워크로 통합하는 것과 관련된 주제를 다룹니다.

.NET MAUI를 사용하는 Blazor Hybrid 앱

Blazor Hybrid 지원은 .NET Multi-platform App UI (.NET MAUI) 프레임워크에 기본 제공됩니다. .NET MAUI에는 Razor 구성 요소를 포함된 Web View로 렌더링할 수 있도록 하는 BlazorWebView 컨트롤이 포함되어 있습니다. .NET MAUI 및 Blazor를 함께 사용하면 모바일, 데스크톱 및 웹에서 하나의 웹 UI 구성 요소 집합을 다시 사용할 수 있습니다.

WPF 및 Windows Forms를 사용하는 Blazor Hybrid 앱

Blazor Hybrid 앱은 WPF(Windows Presentation Foundation) 및 Windows Forms를 사용하여 빌드할 수 있습니다. Blazor는 이러한 두 프레임워크(WPF BlazorWebView, Windows Forms BlazorWebView)에 대한 BlazorWebView 컨트롤을 제공합니다. Razor 구성 요소는 Windows 데스크톱에서 기본적으로 실행되고 포함된 Web View로 렌더링됩니다. WPF 및 Windows Forms에서 Blazor를 사용하면 .NET MAUI 또는 웹에서 플랫폼 간에 재사용할 수 있는 기존 Windows 데스크톱 앱에 새 UI를 추가할 수 있습니다.

Web View 구성

Blazor Hybrid는 BlazorWebView 컨트롤의 이벤트를 통해 여러 플랫폼에 대한 기본 Web View 구성을 노출합니다.

  • BlazorWebViewInitializing은 설정이 제공되는 경우 각 플랫폼에서 Web View를 생성하는 데 사용되는 설정에 대한 액세스를 제공합니다.
  • BlazorWebViewInitialized는 설정의 추가 구성이 가능하도록 Web View에 대한 액세스를 제공합니다.

각 플랫폼에서 기본 설정 패턴을 사용하여 이벤트 처리기를 이벤트에 연결하고 사용자 지정 코드를 실행합니다.

API 설명서:

Windows Forms 및 WPF 앱에서 처리되지 않은 예외

이 섹션은 Windows Forms 및 WPF Blazor Hybrid 앱에만 적용됩니다.

UnhandledException 속성에 System.AppDomain.CurrentDomain에 대한 콜백을 만듭니다. 다음 예제에서는 컴파일러 지시문을 사용하여 사용자에게 오류가 발생했음을 알리거나 개발자에게 오류 정보를 표시하는 MessageBox를 표시합니다. error.ExceptionObject에 오류 정보를 기록합니다.

AppDomain.CurrentDomain.UnhandledException += (sender, error) =>
{
#if DEBUG
    MessageBox.Show(text: error.ExceptionObject.ToString(), caption: "Error");
#else
    MessageBox.Show(text: "An error has occurred.", caption: "Error");
#endif
    
    // Log the error information (error.ExceptionObject)
};

세계화 및 지역화

‘이 섹션은 .NET MAUIBlazor Hybrid 앱에만 적용됩니다.’

.NET MAUI는 디바이스의 주변 정보에 따라 CurrentCulture 및 CurrentUICulture를 구성합니다.

Microsoft.Extensions.Localization 네임스페이스의 IStringLocalizer 및 기타 API는 사용자의 문화권에 의존하는 세계화 형식 지정, 구문 분석, 바인딩과 함께 일반적으로 예상대로 작동합니다.

런타임에 앱 문화권을 동적으로 변경하는 경우, 루트 구성 요소를 다시 렌더링하고 새 문화권을 다시 렌더링된 자식 구성 요소에 전달하는 문화권의 변화를 반영하도록 앱을 다시 로드해야 합니다.

.NET의 리소스 시스템은 지역화된 이미지(Blob)를 앱에 포함할 수 있지만, Blazor Hybrid는 현재 Razor 구성 요소에 포함된 이미지를 표시할 수 없습니다. 사용자가 ResourceManager를 사용하여 이미지의 바이트를 Stream으로 읽어도, 프레임워크는 현재 Razor 구성 요소에서 검색된 이미지 렌더링을 지원하지 않습니다.

현지화된 이미지를 포함하는 플랫폼별 접근 방식은 .NET 리소스 시스템의 기능이지만, .NET MAUIBlazor Hybrid 앱의 Razor 구성 요소 브라우저 요소는 이러한 이미지와 상호 작용할 수 없습니다.

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

네이티브 UI에서 범위가 지정된 서비스에 액세스

BlazorWebView 에는 TryDispatchAsync 지정된 Action<ServiceProvider> 비동기적으로 호출하고 구성 요소에서 사용할 수 Razor 있는 범위가 지정된 서비스를 전달하는 메서드가 있습니다. 이렇게 하면 네이티브 UI의 코드가 다음과 같은 NavigationManager범위가 지정된 서비스에 액세스할 수 있습니다.

private async void MyMauiButtonHandler(object sender, EventArgs e)
{
    var wasDispatchCalled = await _blazorWebView.TryDispatchAsync(sp =>
    {
        var navMan = sp.GetRequiredService<NavigationManager>();
        navMan.CallSomeNavigationApi(...);
    });

    if (!wasDispatchCalled)
    {
        ...
    }
}

언제 wasDispatchCalled , false호출이 디스패치되지 않은 경우 수행할 작업을 고려합니다. 일반적으로 디스패치는 실패하지 않아야 합니다. 실패하면 OS 리소스가 소진될 수 있습니다. 리소스가 소진된 경우 메시지 로깅, 예외 throw 및 사용자에게 경고하는 것이 좋습니다.

추가 리소스