웹앱을 사용하여 .NET MAUIBlazor Hybrid Blazor 앱 빌드

이 문서에서는 RCL(클래스 라이브러리)을 .NET MAUIBlazor Hybrid Blazor 통해 공유 사용자 인터페이스를 사용하는 웹앱으로 앱을 빌드하는 Razor 방법을 보여 줍니다.

필수 구성 요소 및 예비 단계

필수 구성 요소 및 예비 단계는 앱 빌드를 .NET MAUIBlazor Hybrid 참조하세요. 이 문서의 지침을 사용하기 전에 이 자습서를 사용하여 .NET MAUIBlazor Hybrid 개발용 .NET MAUI 로컬 시스템을 설정하는 것이 좋습니다.

.NET MAUIBlazor Hybrid 및 웹앱 샘플 앱

샘플 GitHub 리포지토리()(dotnet/blazor-samples.NET 8 이상)에서 Blazor 명명된 MauiBlazorWeb 샘플 앱을 가져옵니다.

샘플 앱은 네이티브 및 웹앱에서 사용하는 공유 UI(구성 요소)를 포함하는 (네이티브, 플랫폼 간) 앱Blazor, 웹앱 및 Razor RCL(Razor클래스 라이브러리)을 포함하는 .NET MAUIBlazor Hybrid 시작 솔루션입니다.

.NET MAUIBlazor Hybrid 솔루션 마이그레이션

샘플 앱을 사용하는 대신 Visual Studio를 사용하여 이 섹션의 지침에 따라 기존 .NET MAUIBlazor Hybrid 앱을 마이그레이션할 수 있습니다.

웹앱 프로젝트 템플릿을 사용하여 솔루션에 Blazor 새 프로젝트를 추가합니다. 다음 옵션을 선택합니다.

• 프로젝트 이름: 솔루션 이름이 추가된 상태에서 .Web 사용합니다. 이 문서의 예제에서는 다음 이름을 가정합니다.
  • 용액: MauiBlazorWeb
  • MAUI 프로젝트: MauiBlazorWeb.Maui
  • Blazor 웹앱: MauiBlazorWeb.Web
  • Razor RCL(클래스 라이브러리)(이후 단계에서 추가됨): MauiBlazorWeb.Shared
• 인증 유형: 없음
• HTTPS 구성: 선택됨(사용)
• 대화형 렌더링 모드: 서버
• 대화형 위치: 전역
• 샘플 페이지: 선택되지 않음(사용 안 함)

MAUI 앱은 항상 대화형으로 실행되고 렌더링 모드를 명시적으로 지정하는 구성 요소 페이지에서 오류를 Razor throw하기 때문에 전역으로의 대화형 위치 설정이 중요합니다. 전역 렌더링 모드를 사용하지 않는 경우 이 섹션의 지침에 따라 렌더링 모드 사용 Blazor 섹션에 설명된 접근 방식을 구현해야 합니다. 자세한 내용은 BlazorResolveComponentForRenderMode(dotnet/aspnetcore #51235)를 재정의할 수 있는 방법이 필요한 WebView를 참조하세요.

솔루션에 새 Razor RCL(클래스 라이브러리 ) 프로젝트를 추가합니다. 이 문서의 예제에서는 프로젝트의 이름이 지정 MauiBlazorWeb.Shared되어 있다고 가정합니다. 솔루션에 프로젝트를 추가할 때 지원 페이지 및 보기를 선택하지 마세요.

MAUI 프로젝트와 웹앱 프로젝트 모두에서 RCL에 프로젝트 참조를 Blazor 추가합니다.

Components 폴더와 모든 내용을 MAUI 프로젝트에서 RCL로 이동합니다. 폴더가 Components MAUI 프로젝트에서 삭제되어 있는지 확인합니다.

팁

Visual Studio에서 폴더 또는 파일을 이동할 때 잘라내기 및 붙여넣기 작업을 위해 마우스 오른쪽 단추를 클릭하여 키보드 명령 또는 바로 가기 메뉴를 사용합니다. Visual Studio에서 폴더를 끌면 한 위치에서 다른 위치로만 복사되며 원본을 삭제하려면 추가 단계가 필요합니다.

css MAUI 프로젝트의 폴더에서 wwwroot RCL의 wwwroot 폴더로 폴더를 이동합니다.

RCL의 wwwroot 폴더에서 다음 파일을 삭제합니다.

• background.png
• exampleJsInterop.js

RCL에서 루트 _Imports.razor 파일을 RCL의 폴더에 있는 파일로 바꾸고 RCL의 Components 기존 파일을 덮어쓰고 폴더의 Components 원본을 삭제합니다. 파일을 이동한 후 파일을 열고 RCL의 네임스페이스와 일치하도록 마지막 두 @using 문의 이름을 바꿉니다. 다음 예제에서 RCL의 네임스페이스는 다음과 같습니다 MauiBlazorWeb.Shared.

@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components

RCL 프로젝트의 루트에서 다음 파일을 삭제합니다.

• Component1.razor
• ExampleJsInterop.cs

RCL에서 파일을 열고 Components/Routes.razor 다음으로 Routes변경 MauiProgram 합니다.

- <Router AppAssembly="@typeof(MauiProgram).Assembly">
+ <Router AppAssembly="@typeof(Routes).Assembly">

MainPage.xaml MAUI 프로젝트에서 파일을 엽니다. 특성에서 xmlns:shared RCL에 대한 참조를 추가합니다 ContentPage . 다음 예제에서 RCL의 네임스페이스는 .입니다 MauiBlazorWeb.Shared. 및 assembly다음 둘 다에 clr-namespace 대해 올바른 값을 설정합니다.

xmlns:shared="clr-namespace:MauiBlazorWeb.Shared;assembly=MauiBlazorWeb.Shared"

또한 파일에서 MainPage.xaml 루트 구성 요소를 ComponentType 다음으로 local 업데이트 BlazorWebView 합니다shared.

- <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
+ <RootComponent Selector="#app" ComponentType="{x:Type shared:Components.Routes}" />

MAUI 프로젝트에서 파일을 열고 wwwroot/index.html 스타일시트를 변경하여 RCL의 정적 자산 경로를 가리킵니다.

다음 줄을 제거합니다.

- <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
- <link rel="stylesheet" href="css/app.css" />

앞의 줄을 다음 태그로 바꿉다. 다음 예제에서 RCL의 정적 자산 경로는 다음과 같습니다 _content/MauiBlazorWeb.Shared/.

<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />

웹앱에서 Blazor 파일을 열고 _Imports.razor RCL에 대해 다음 두 @using 문을 추가합니다. 다음 예제에서 RCL의 네임스페이스는 다음과 같습니다 MauiBlazorWeb.Shared.

@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components

Blazor 웹앱 프로젝트에서 구성 요소(Components/App.razor)를 App 엽니다. 스타일시트를 제거합니다.app.css

- <link rel="stylesheet" href="app.css" />

이전 줄을 RCL의 정적 자산 스타일시트 참조로 바꿉니다. 다음 예제에서 RCL의 정적 자산 경로는 다음과 같습니다 _content/MauiBlazorWeb.Shared/.

<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />

Blazor 웹앱 프로젝트에서 다음 폴더 및 파일을 삭제합니다.

• Components/Layout 폴더
• Components/Routes.razor
• Components/Pages/Home.razor
• wwwroot/app.css

Blazor 웹앱의 Program.cs 파일을 열고 RCL에 대한 추가 어셈블리를 앱에 추가합니다. 다음 예제에서 RCL의 네임스페이스는 다음과 같습니다 MauiBlazorWeb.Shared.

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly);

솔루션 탐색기 프로젝트를 선택하고 Visual Studio의 시작 단추를 사용하여 MAUI 프로젝트를 실행합니다.

Blazor 솔루션 탐색기 웹앱 프로젝트를 선택하고 Blazor 빌드 구성과 함께 https Visual Studio의 시작 단추를 사용하여 웹앱 프로젝트를 실행합니다.

RCL의 어셈블리를 확인할 수 없다는 빌드 오류가 표시되는 경우 먼저 RCL 프로젝트를 빌드합니다. 빌드 시 MAUI 프로젝트 리소스 오류가 발생하면 MAUI 프로젝트를 다시 빌드하여 오류를 지웁니다.

렌더링 모드 사용 Blazor

웹앱에서 지정된 대화형 위치에 Blazor 렌더링 모드를 적용하기 Blazor위해 앱의 사양과 일치하는 다음 하위 섹션 중 하나의 지침을 사용하지만 MAUI 프로젝트에서 렌더링 모드 할당은 무시합니다.

렌더링 모드 및 대화형 작업 사양 하위 섹션:

• 전역 서버 대화형 작업
• 전역 자동 또는 WebAssembly 대화형 작업
• 페이지별/구성 요소 서버 대화형 작업
• 페이지별/구성 요소 자동 대화형 작업
• 페이지별/구성 요소 WebAssembly 대화형 작업

전역 서버 대화형 작업

• 대화형 렌더링 모드: 서버
• 대화형 위치: 전역
• 솔루션 프로젝트
  • MAUI(MauiBlazorWeb.Maui)
  • Blazor 웹앱(MauiBlazorWeb.Web)
  • RCL(MauiBlazorWeb.Shared): 각 구성 요소에서 렌더링 모드를 설정하지 않고 공유 Razor 구성 요소를 포함합니다.

프로젝트 참조: MauiBlazorWeb.Maui 및 MauiBlazorWeb.Web 에 대한 프로젝트 참조가 있습니다 MauiBlazorWeb.Shared.

전역 자동 또는 WebAssembly 대화형 작업

• 대화형 렌더링 모드: 자동 또는 WebAssembly
• 대화형 위치: 전역
• 솔루션 프로젝트
  • MAUI(MauiBlazorWeb.Maui)
  • Blazor 웹앱
    • 서버 프로젝트: MauiBlazorWeb.Web
    • 클라이언트 프로젝트: MauiBlazorWeb.Web.Client
  • RCL(MauiBlazorWeb.Shared): 각 구성 요소에서 렌더링 모드를 설정하지 않고 공유 Razor 구성 요소를 포함합니다.

프로젝트 참조:

• MauiBlazorWeb.Maui, MauiBlazorWeb.Web및 MauiBlazorWeb.Web.Client 프로젝트에는 .에 대한 프로젝트 참조가 있습니다 MauiBlazorWeb.Shared.
• MauiBlazorWeb.Web에는 MauiBlazorWeb.Web.Client에 대한 프로젝트 참조가 있습니다.

페이지별/구성 요소 서버 대화형 작업

• 대화형 렌더링 모드: 서버
• 대화형 위치: 페이지별/구성 요소
• 솔루션 프로젝트
  • MAUI (MauiBlazorWeb.Maui): 호출 InteractiveRenderSettings.ConfigureBlazorHybridRenderModes 합니다 MauiProgram.cs.
  • Blazor웹앱(): 구성 요소(MauiBlazorWeb.WebComponents/App.razor)의 App 구성 요소 및 Routes 구성 요소에 지시 HeadOutlet 문 특성을 설정 @rendermode 하지 않습니다.
  • RCL(MauiBlazorWeb.Shared): 각 구성 요소에서 렌더링 모드를 InteractiveServer 설정하는 공유 Razor 구성 요소를 포함합니다.

MauiBlazorWeb.Maui 에 MauiBlazorWeb.Web 대한 프로젝트 참조가 있습니다 MauiBlazorWeb.Shared.

RCL에 다음 InteractiveRenderSettings 클래스를 추가합니다. 클래스 속성은 구성 요소 렌더링 모드를 설정하는 데 사용됩니다.

MAUI 프로젝트는 기본적으로 대화형이므로 MAUI 프로젝트의 프로젝트 수준에서 호출 InteractiveRenderSettings.ConfigureBlazorHybridRenderModes이외의 작업은 수행되지 않습니다.

웹 클라이언트의 Blazor 웹앱에 대해 속성 값은 .에서 RenderMode할당됩니다. 구성 요소가 MAUI 프로젝트의 네이티브 클라이언트에 로드되면 BlazorWebView MAUI 프로젝트가 렌더링 모드 속성을 호출할 때 ConfigureBlazorHybridRenderModes 명시적으로 설정하기 null 때문에 렌더링 모드는 할당되지 않습니다(null).

InteractiveRenderSettings.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } = 
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } = 
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

In MauiProgram.CreateMauiApp of MauiProgram.cs, call ConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

RCL의 _Imports.razor 파일에서 다음 전역 정적 @using 지시문을 추가하여 클래스의 속성을 구성 요소에 사용할 수 있도록 합니다.

@using static InteractiveRenderSettings

참고 항목

RCL InteractiveRenderSettings 의 클래스 속성을 통한 렌더링 모드 할당은 일반적인 독립 실행형 Blazor 웹앱과 다릅니다. Blazor 웹앱에서 렌더링 모드는 일반적으로 웹앱 파일의 _Import 문을 Blazor 통해 @using static Microsoft.AspNetCore.Components.Web.RenderMode 제공됩니다RenderMode.

페이지별/구성 요소 자동 대화형 작업

• 대화형 렌더링 모드: 자동
• 대화형 위치: 페이지별/구성 요소
• 솔루션 프로젝트
  • MAUI (MauiBlazorWeb.Maui): 호출 InteractiveRenderSettings.ConfigureBlazorHybridRenderModes 합니다 MauiProgram.cs.
  • Blazor 웹앱
    • 서버 프로젝트: MauiBlazorWeb.Web구성 요소(Components/App.razor)의 App 구성 요소 및 Routes 구성 요소에 지시 HeadOutlet 문 특성을 설정 @rendermode 하지 않습니다.
    • 클라이언트 프로젝트: MauiBlazorWeb.Web.Client
  • RCL(MauiBlazorWeb.Shared): 각 구성 요소에서 렌더링 모드를 InteractiveAuto 설정하는 공유 Razor 구성 요소를 포함합니다.

프로젝트 참조:

• MauiBlazorWeb.Maui, MauiBlazorWeb.Web및 MauiBlazorWeb.Web.Client 에 대한 프로젝트 참조가 있습니다 MauiBlazorWeb.Shared.
• MauiBlazorWeb.Web에는 MauiBlazorWeb.Web.Client에 대한 프로젝트 참조가 있습니다.

다음 InteractiveRenderSettings 클래스를 RCL에 추가합니다. 클래스 속성은 구성 요소 렌더링 모드를 설정하는 데 사용됩니다.

MAUI 프로젝트는 기본적으로 대화형이므로 MAUI 프로젝트의 프로젝트 수준에서 호출 InteractiveRenderSettings.ConfigureBlazorHybridRenderModes이외의 작업은 수행되지 않습니다.

웹 클라이언트의 Blazor 웹앱에 대해 속성 값은 .에서 RenderMode할당됩니다. 구성 요소가 MAUI 프로젝트의 네이티브 클라이언트에 로드되면 BlazorWebView MAUI 프로젝트가 렌더링 모드 속성을 호출할 때 ConfigureBlazorHybridRenderModes 명시적으로 설정하기 null 때문에 렌더링 모드는 할당되지 않습니다(null).

InteractiveRenderSettings.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } = 
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } = 
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

In MauiProgram.CreateMauiApp of MauiProgram.cs, call ConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

RCL의 _Imports.razor 파일에서 다음 전역 정적 @using 지시문을 추가하여 클래스의 속성을 구성 요소에 사용할 수 있도록 합니다.

@using static InteractiveRenderSettings

참고 항목

RCL InteractiveRenderSettings 의 클래스 속성을 통한 렌더링 모드 할당은 일반적인 독립 실행형 Blazor 웹앱과 다릅니다. Blazor 웹앱에서 렌더링 모드는 일반적으로 웹앱 파일의 _Import 문을 Blazor 통해 @using static Microsoft.AspNetCore.Components.Web.RenderMode 제공됩니다RenderMode.

페이지별/구성 요소 WebAssembly 대화형 작업

• 대화형 렌더링 모드: WebAssembly
• 대화형 위치: 페이지별/구성 요소
• 솔루션 프로젝트
  • MAUI(MauiBlazorWeb.Maui)
  • Blazor 웹앱
    • 서버 프로젝트: MauiBlazorWeb.Web구성 요소(Components/App.razor)의 App 구성 요소 및 Routes 구성 요소에 지시 HeadOutlet 문 특성을 설정 @rendermode 하지 않습니다.
    • 클라이언트 프로젝트: MauiBlazorWeb.Web.Client
  • RCL
    • MauiBlazorWeb.Shared
    • MauiBlazorWeb.Shared.Client: 각 구성 요소에서 렌더링 모드를 InteractiveWebAssembly 설정하는 공유 Razor 구성 요소를 포함합니다. 앱은 .Shared.Client 서버에서 .Shared 실행되고 서버에 남아 있는 구성 요소와 별도로 WebAssembly에서 실행하는 데 필요한 구성 요소를 유지 관리해야 하므로 RCL은 RCL과 별도로 유지 관리됩니다.

프로젝트 참조:

• MauiBlazorWeb.Maui 에 MauiBlazorWeb.Web 대한 프로젝트 참조가 있습니다 MauiBlazorWeb.Shared.
• MauiBlazorWeb.Web에는 MauiBlazorWeb.Web.Client에 대한 프로젝트 참조가 있습니다.
• MauiBlazorWeb.Web.Client 에 MauiBlazorWeb.Shared 대한 프로젝트 참조가 있습니다 MauiBlazorWeb.Shared.Client.

프로젝트 Routes.razor 파일의 Router 프로젝트 어셈블리에 대한 MauiBlazorWeb.Shared.Client 구성 요소 인스턴스(해당 _Imports 파일을 통해)에 다음 AdditionalAssemblies 매개 변수를 MauiBlazorWeb.Shared 추가합니다.

<Router AppAssembly="@typeof(Routes).Assembly" 
        AdditionalAssemblies="new [] { typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Components.Layout.MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

프로젝트 파일에서 MauiBlazorWeb.Shared.Client 다음 AddAdditionalAssemblies 호출을 사용하여 프로젝트 Program.cs 어셈블리 _Imports 를 MauiBlazorWeb.Web 파일로 추가합니다.

app.MapRazorComponents<App>()    
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly)
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly); 

다음 InteractiveRenderSettings 클래스를 RCL에 .Shared.Client 추가합니다. 클래스 속성은 서버 기반 구성 요소에 대한 구성 요소 렌더링 모드를 설정하는 데 사용됩니다.

MAUI 프로젝트는 기본적으로 대화형이므로 MAUI 프로젝트의 프로젝트 수준에서 호출 InteractiveRenderSettings.ConfigureBlazorHybridRenderModes이외의 작업은 수행되지 않습니다.

웹 클라이언트의 Blazor 웹앱에 대해 속성 값은 .에서 RenderMode할당됩니다. 구성 요소가 MAUI 프로젝트의 네이티브 클라이언트에 로드되면 BlazorWebView MAUI 프로젝트가 렌더링 모드 속성을 호출할 때 ConfigureBlazorHybridRenderModes 명시적으로 설정하기 null 때문에 렌더링 모드는 할당되지 않습니다(null).

InteractiveRenderSettings.cs (.Shared.Client RCL):

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } = 
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } = 
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

클래스의 InteractiveRenderSettings 약간 다른 버전이 RCL에 .Shared 추가됩니다. RCL InteractiveRenderSettings.ConfigureBlazorHybridRenderModes 에 추가된 .Shared 클래스에서 RCL이 .Shared.Client 호출됩니다. 이렇게 하면 MAUI 클라이언트에서 렌더링된 WebAssembly 구성 요소의 렌더링 모드는 기본적으로 네이티브 클라이언트에서 대화형이므로 할당되지 않습니다(null).

InteractiveRenderSettings.cs (.Shared RCL):

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared
{
    public static class InteractiveRenderSettings
    {
        public static IComponentRenderMode? InteractiveServer { get; set; } = 
            RenderMode.InteractiveServer;
        public static IComponentRenderMode? InteractiveAuto { get; set; } = 
            RenderMode.InteractiveAuto;
        public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
            RenderMode.InteractiveWebAssembly;

        public static void ConfigureBlazorHybridRenderModes()
        {
            InteractiveServer = null;
            InteractiveAuto = null;
            InteractiveWebAssembly = null;
            MauiBlazorWeb.Shared.Client.InteractiveRenderSettings
                .ConfigureBlazorHybridRenderModes();
        }
    }
}

In MauiProgram.CreateMauiApp of MauiProgram.cs, call ConfigureBlazorHybridRenderModes:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

_Imports.razor RCL 파일에서 클래스의 .Shared.Client 속성을 구성 요소에 InteractiveRenderSettings 사용할 수 있도록 추가 @using static InteractiveRenderSettings 합니다.

@using static InteractiveRenderSettings

참고 항목

RCL InteractiveRenderSettings 의 클래스 속성을 통한 렌더링 모드 할당은 일반적인 독립 실행형 Blazor 웹앱과 다릅니다. Blazor 웹앱에서 렌더링 모드는 일반적으로 웹앱 파일의 _Import 문을 Blazor 통해 @using static Microsoft.AspNetCore.Components.Web.RenderMode 제공됩니다RenderMode.

인터페이스를 사용하여 다양한 디바이스 구현 지원

다음 예제에서는 인터페이스를 사용하여 웹앱과 MAUI(네이티브) 앱에서 다양한 구현을 호출하는 방법을 보여 줍니다. 다음 예제에서는 디바이스 폼 팩터를 표시하는 구성 요소를 만듭니다. 네이티브 앱에 MAUI 추상화 계층을 사용하고 웹앱에 대한 구현을 제공합니다.

Razor RCL(클래스 라이브러리)에서 폴더에는 Interfaces 인터페이스가 IFormFactor 포함됩니다.

Interfaces/IFormFactor.cs:

namespace MauiBlazorWeb.Shared.Interfaces;

public interface IFormFactor
{
    public string GetFormFactor();
    public string GetPlatform();
}

다음 DeviceFormFactor 구성 요소는 RCL의 Components 폴더에 있습니다.

Components/Pages/DeviceFormFactor.razor:

@page "/device-form-factor"
@using MauiBlazorWeb.Shared.Interfaces
@inject IFormFactor FormFactor

<PageTitle>Form Factor</PageTitle>

<h1>Device Form Factor</h1>

<p>You are running on:</p>

<ul>
    <li>Form Factor: @factor</li>
    <li>Platform: @platform</li>
</ul>

<p>
    <em>This component is defined in the MauiBlazorWeb.Shared library.</em>
</p>

@code {
    private string factor => FormFactor.GetFormFactor();
    private string platform => FormFactor.GetPlatform();
}

RCL에서 구성 요소에 DeviceFormFactor 대한 항목은 구성 요소의 탐색 메뉴에 NavMenu 포함됩니다.

Components/Layout/NavMenu.razor의 경우

<div class="nav-item px-3">
    <NavLink class="nav-link" href="device-form-factor">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Form Factor
    </NavLink>
</div>

웹 및 네이티브 앱에는 에 대한 IFormFactor구현이 포함되어 있습니다.

웹앱에서 Blazor 명명된 Services 폴더에는 웹앱 사용을 위한 구현이 FormFactor 포함된 다음 FormFactor.cs 파일이 포함됩니다.

Services/FormFactor.cs (Blazor 웹앱 프로젝트):

using MauiBlazorWeb.Shared.Interfaces;

namespace MauiBlazorWeb.Web.Services;

public class FormFactor : IFormFactor
{
    public string GetFormFactor()
    {
        return "Web";
    }
    public string GetPlatform()
    {
        return Environment.OSVersion.ToString();
    }
}

MAUI 프로젝트에서 명명된 Services 폴더에는 네이티브 사용을 위한 구현이 FormFactor 포함된 다음 FormFactor.cs 파일이 포함됩니다. MAUI 추상화 계층은 모든 네이티브 디바이스 플랫폼에서 작동하는 코드를 작성하는 데 사용됩니다.

Services/FormFactor.cs (MAUI 프로젝트):

using MauiBlazorWeb.Shared.Interfaces;

namespace MauiBlazorWeb.Maui.Services;

public class FormFactor : IFormFactor
{
    public string GetFormFactor()
    {
        return DeviceInfo.Idiom.ToString();
    }
    public string GetPlatform()
    {
        return DeviceInfo.Platform.ToString() + " - " + DeviceInfo.VersionString;
    }
}

종속성 주입은 이러한 서비스의 구현을 가져오는 데 사용됩니다.

MAUI 프로젝트에서 MauiProgram.cs 파일에는 파일 맨 위에 다음 using 문이 있습니다.

using MauiBlazorWeb.Maui.Services;
using MauiBlazorWeb.Shared.Interfaces;

호출 바로 전에 RCL에서 builder.Build()FormFactor 사용하는 디바이스별 서비스를 추가하도록 등록됩니다.

builder.Services.AddSingleton<IFormFactor, FormFactor>();

웹앱 Program 에서 Blazor 파일에는 파일 맨 위에 다음 using 문이 있습니다.

using MauiBlazorWeb.Shared.Interfaces;
using MauiBlazorWeb.Web.Services;  

호출 builder.Build()FormFactor 바로 전에 웹앱에서 사용하는 Blazor 디바이스별 서비스를 추가하도록 등록됩니다.

builder.Services.AddScoped<IFormFactor, FormFactor>();

솔루션이 프로젝트를 통해 WebAssembly를 대상으로 하는 .Web.Client 경우 프로젝트에서 이전 API의 구현도 필요합니다 .Web.Client .

RCL에서 컴파일러 전처리기 지시문을 사용하여 앱이 실행 중인 디바이스에 따라 다른 UI를 구현할 수도 있습니다. 이 시나리오의 경우 앱은 MAUI 앱과 마찬가지로 RCL을 다중 대상으로 지정해야 합니다. 예를 들어 GitHub 리포지토리를 참조 BethMassi/BethTimeUntil 하세요.

추가 리소스

• ASP.NET Core Blazor 렌더링 모드
• ASP.NET Core Blazor Hybrid 앱에서 구성 요소 다시 사용 Razor