ASP.NET Core Razor 구성 요소를 ASP.NET Core 앱에 통합

  • 아티클

이 문서에서는 Razor ASP.NET Core 앱에 대한 구성 요소 통합 시나리오를 설명합니다.

Razor 구성 요소 통합

Razor 구성 요소는 Pages, MVC 및 기타 유형의 ASP.NET Core 앱에 Razor 통합할 수 있습니다. Razor 구성 요소는 ASP.NET Core를 기반으로 하지 않는 앱을 비롯한 모든 웹앱에 사용자 지정 HTML 요소로 통합할 수도 있습니다.

프로젝트의 요구 사항에 따라 다음 섹션의 지침을 사용합니다.

ASP.NET Core 앱에 지원 추가 Blazor

이 섹션에서는 ASP.NET Core 앱에 지원을 추가하는 Blazor 방법을 설명합니다.

참고 항목

이 섹션의 예제에서 예제 앱의 이름과 네임스페이스는 다음과 같습니다 BlazorSample.

정적 서버 쪽 렌더링 추가(정적 SSR)

앱에 Components 폴더를 추가합니다.

구성 요소에서 사용하는 Razor 네임스페이스에 대해 다음 _Imports 파일을 추가합니다.

Components/_Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components

네임스페이스 자리 표시자({APP NAMESPACE})를 앱의 네임스페이스로 변경합니다. 예시:

@using BlazorSample
@using BlazorSample.Components

앱 폴더에 Blazor 배치되는 구성 요소의 Components 앱에 Routes 라우터(<Router>, Router)를 추가합니다.

Components/Routes.razor:

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

구성 요소의 매개 변수를 사용하여 기본 레이아웃을 RouteView.DefaultLayout 제공할 수 있습니다.RouteView

<RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />

자세한 내용은 ASP.NET CoreBlazor 레이아웃을 참조하세요.

앱이 App 로드하는 첫 번째 구성 요소인 루트 구성 요소 역할을 하는 구성 요소를 앱에 추가합니다.

Components/App.razor:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="BlazorSample.styles.css" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

앞의 <link> 예제의 요소에 대해 스타일시트의 파일 이름을 앱의 프로젝트 이름과 일치하도록 변경 BlazorSample 합니다. 예를 들어 이름이 지정된 ContosoApp 프로젝트는 스타일시트 파일 이름을 사용합니다 ContosoApp.styles.css .

<link rel="stylesheet" href="ContosoApp.styles.css" />

폴더에 Pages 폴더를 Components 추가하여 라우팅 가능한 Razor 구성 요소를 저장합니다.

정적 SSR을 보여 주는 다음 Welcome 구성 요소를 추가합니다.

Components/Pages/Welcome.razor:

@page "/welcome"

<PageTitle>Welcome!</PageTitle>

<h1>Welcome to Blazor!</h1>

<p>@message</p>

@code {
    private string message = 
        "Hello from a Razor component and welcome to Blazor!";
}

ASP.NET Core 프로젝트의 파일에서 다음을 Program 수행합니다.

  • using 프로젝트 구성 요소의 파일 맨 위에 문을 추가합니다.

    using {APP NAMESPACE}.Components;

    앞줄에서 자리 표시자를 앱의 네임스페이스로 변경 {APP NAMESPACE} 합니다. 예시:

    using BlazorSample.Components;

  • 또한 자동으로 위조 방지 서비스(AddRazorComponents)를 추가하는 구성 요소 서비스(AddAntiforgery)를 추가 Razor 합니다. 다음 줄을 호출 builder.Build()하는 줄 앞에 추가합니다.

    builder.Services.AddRazorComponents();

  • 를 사용하여 요청 처리 파이프라인UseAntiforgery에 위조 방지 미들웨어를 추가합니다. UseAntiforgery 는 호출 후 호출됩니다 UseRouting. 호출 UseRoutingUseEndpoints이 있는 경우 호출은 해당 호출 UseAntiforgery 간에 이동해야 합니다. 호출 후 UseAntiforgery 호출해야 UseAuthentication 합니다.UseAuthorization

    app.UseAntiforgery();

  • 기본 루트 구성 요소(로드된 첫 번째 구성 요소)로 지정된 구성 요소(App.razor)를 사용하여 앱의 요청 처리 파이프라인 App 에 추가 MapRazorComponents 합니다. 다음 코드를 호출 app.Run하는 줄 앞에 배치합니다.

    app.MapRazorComponents<App>();

앱이 실행 Welcome 되면 구성 요소는 엔드포인트에서 /welcome 액세스됩니다.

대화형 서버 쪽 렌더링 사용(대화형 SSR)

정적 서버 쪽 렌더링 추가(정적 SSR) 섹션의 지침을 따릅니다.

앱의 Program 파일에서 구성 요소 서비스가 다음을 사용하여 AddInteractiveServerComponents 추가AddRazorComponents되는 위치에 Razor 대한 호출을 추가합니다.

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

구성 요소가 다음과 매핑MapRazorComponents되는 위치에 Razor 대한 호출 AddInteractiveServerRenderMode 을 추가합니다.

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

대화형 서버 쪽 렌더링(대화형 SSR)을 채택하는 앱에 다음 Counter 구성 요소를 추가합니다.

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

앱이 실행 Counter 되면 구성 요소는 .에서 /counter액세스됩니다.

대화형 자동(자동) 또는 클라이언트 쪽 렌더링 사용(CSR)

정적 서버 쪽 렌더링 추가(정적 SSR) 섹션의 지침을 따릅니다.

대화형 자동 렌더링 모드를 사용하는 구성 요소는 처음에 대화형 SSR을 사용합니다. .NET 런타임 및 앱 번들은 백그라운드에서 클라이언트에 다운로드되고 나중에 방문할 때 사용할 수 있도록 캐시됩니다. Interactive WebAssembly 렌더링 모드를 사용하는 구성 요소는 번들이 다운로드되고 런타임이 활성화된 후에 Blazor 만 클라이언트에서 Blazor 대화형으로 렌더링됩니다. 대화형 자동 또는 대화형 WebAssembly 렌더링 모드를 사용하는 경우 클라이언트에 다운로드된 구성 요소 코드는 비공개가 아닙니다 . 자세한 내용은 ASP.NET Core Blazor 렌더링 모드를 참조하세요.

채택할 렌더링 모드를 결정한 후:

  • 대화형 자동 렌더링 모드를 채택하려는 경우 대화형 SSR(대화형 서버 쪽 렌더링) 사용 섹션의 지침을 따릅니다.
  • 대화형 WebAssembly 렌더링만 채택하려는 경우 대화형 SSR을 추가하지 않고 계속합니다.

NuGet 패키지에 Microsoft.AspNetCore.Components.WebAssembly.Server 대한 패키지 참조를 앱에 추가합니다.

참고 항목

.NET 앱에 패키지를 추가하는 방법에 대한 지침은 패키지 사용 워크플로에서 패키지 설치 및 관리의 문서(NuGet 설명서)를 참조하세요. NuGet.org에서 올바른 패키지 버전을 확인합니다.

앱에 자산을 제공하는 기부자 Blazor 웹앱을 만듭니다. ASP.NET Core Blazor 용 도구 문서의 지침에 따라 웹앱을 생성 Blazor 할 때 다음 템플릿 기능에 대한 지원을 선택합니다.

앱 이름의 경우 ASP.NET Core 앱과 동일한 이름을 사용합니다. 그러면 구성 요소에서 앱 이름 태그가 일치하고 코드에서 네임스페이스가 일치합니다. 자산이 기부자 앱에서 ASP.NET Core 앱으로 이동한 후 네임스페이스를 조정할 수 있으므로 동일한 이름/네임스페이스를 사용하는 것은 반드시 필요하지 않습니다. 그러나 처음에 네임스페이스를 일치시켜 시간을 절약합니다.

Visual Studio:

  • 대화형 렌더링 모드의 경우 자동(서버 및 WebAssembly)을 선택합니다.
  • 대화형 작업 위치를페이지/구성 요소별로 설정합니다.
  • 포함 샘플 페이지의 검사 상자를 선택 취소합니다.

.NET CLI:

  • -int Auto 옵션을 사용합니다.
  • 옵션을 사용하지 -ai|--all-interactive 마세요.
  • 옵션을 전달합니다 -e|--empty .

기부자 Blazor 웹앱에서 전체 .Client 프로젝트를 ASP.NET Core 앱의 솔루션 폴더에 복사합니다.

Important

폴더를 .Client ASP.NET Core 프로젝트의 폴더에 복사하지 마세요. .NET 솔루션을 구성하는 가장 좋은 방법은 솔루션의 각 프로젝트를 최상위 솔루션 폴더 내의 자체 폴더에 배치하는 것입니다. ASP.NET Core 프로젝트의 폴더 위에 솔루션 폴더가 없으면 만듭니다. 다음으로, 기부자 Blazor 웹앱에서 솔루션 폴더로 프로젝트의 폴더를 복사 .Client 합니다. 최종 프로젝트 폴더 구조에는 다음과 같은 레이아웃이 있어야 합니다.

  • BlazorSampleSolution (최상위 솔루션 폴더)
    • BlazorSample (원래 ASP.NET Core 프로젝트)
    • BlazorSample.Client (.Client 기부자 Blazor 웹앱의 프로젝트 폴더)

ASP.NET Core 솔루션 파일의 경우 ASP.NET Core 프로젝트의 폴더에 그대로 둘 수 있습니다. 또는 프로젝트 참조가 솔루션 폴더에 있는 두 프로젝트의 프로젝트 파일(.csproj)을 올바르게 가리키는 한 솔루션 파일을 이동하거나 최상위 솔루션 폴더에 새로 만들 수 있습니다.

ASP.NET Core 앱과 동일한 기부자 프로젝트를 만들 때 기부자 Blazor 웹앱의 이름을 지정한 경우 기부된 자산에서 사용하는 네임스페이스는 ASP.NET Core 앱의 네임스페이스와 일치합니다. 네임스페이스를 일치시키는 추가 단계를 수행할 필요가 없습니다. 기부자 Blazor 웹앱 프로젝트를 만들 때 다른 네임스페이스를 사용한 경우 제공된 대로 이 지침의 나머지 부분을 정확하게 사용하려는 경우 기부된 자산에서 네임스페이스를 일치하도록 조정해야 합니다. 네임스페이스가 일치하지 않는 경우 계속하기 전에 네임스페이스를 조정하거나 이 섹션의 다시 기본 지침에 따라 네임스페이스를 조정합니다.

이 프로세스에서 더 이상 사용되지 않으므로 기부자 Blazor 웹앱을 삭제합니다.

솔루션에 .Client 프로젝트를 추가합니다.

  • Visual Studio: 솔루션 탐색기 솔루션을 마우스 오른쪽 단추로 클릭하고 기존 프로젝트 추가>를 선택합니다. 폴더로 .Client 이동하여 프로젝트 파일(.csproj)을 선택합니다.

  • .NET CLI: 명령을 사용하여 dotnet sln add 솔루션에 .Client 프로젝트를 추가합니다.

ASP.NET Core 프로젝트의 프로젝트 참조를 클라이언트 프로젝트에 추가합니다.

  • Visual Studio: ASP.NET Core 프로젝트를 마우스 오른쪽 단추로 클릭하고 프로젝트 참조 추가>를 선택합니다. .Client 프로젝트를 선택하고 확인을 선택합니다.

  • .NET CLI: ASP.NET Core 프로젝트의 폴더에서 다음 명령을 사용합니다.

    dotnet add reference ../BlazorSample.Client/BlazorSample.Client.csproj

    위의 명령은 다음을 가정합니다.

    • 프로젝트 파일 이름은 .입니다 BlazorSample.Client.csproj.
    • 프로젝트는 .ClientBlazorSample.Client 솔루션 폴더 내의 폴더에 있습니다. 폴더는 .Client ASP.NET Core 프로젝트의 폴더와 나란히 있습니다.

    명령에 대한 dotnet add reference 자세한 내용은 (.NET 설명서)를 참조 dotnet add reference 하세요.

ASP.NET Core 앱의 Program 파일을 다음과 같이 변경합니다.

  • 구성 요소 서비스가 추가되는 대화 Razor 형 WebAssembly 구성 요소 서비스를 AddInteractiveWebAssemblyComponents 추가AddRazorComponents합니다.

    대화형 자동 렌더링의 경우:

    builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

    대화형 WebAssembly 렌더링만:

    builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();

  • 구성 요소가 매핑MapRazorComponents되는 Razor 프로젝트에 대한 .Client Interactive WebAssembly 렌더링 모드(AddInteractiveWebAssemblyRenderMode) 및 추가 어셈블리를 추가합니다.

    대화형 자동(자동) 렌더링의 경우:

    app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);

    대화형 WebAssembly 렌더링만:

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

    앞의 예제에서 프로젝트의 네임스페이 .Client 스에 맞게 변경 BlazorSample.Client 합니다.

Pages 프로젝트에 폴더를 추가합니다.Client.

ASP.NET Core 프로젝트에 기존 Counter 구성 요소가 있는 경우:

  • 구성 요소를 프로젝트의 폴더로 Pages.Client 이동합니다.
  • @rendermode 구성 요소 파일의 맨 위에 있는 지시문을 제거합니다.

ASP.NET Core 앱에 Counter 구성 요소가 없는 경우 프로젝트에 다음 Counter 구성 요소(Pages/Counter.razor)를 .Client 추가합니다.

@page "/counter"
@rendermode InteractiveAuto

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

앱이 Interactive WebAssembly 렌더링만 채택하는 경우 지시문 및 값을 제거 @rendermode 합니다.

- @rendermode InteractiveAuto

ASP.NET Core 앱 프로젝트에서 솔루션을 실행합니다.

  • Visual Studio: 앱을 실행할 때 솔루션 탐색기 ASP.NET Core 프로젝트가 선택되어 있는지 확인합니다.

  • .NET CLI: ASP.NET Core 프로젝트의 폴더에서 프로젝트를 실행합니다.

구성 요소를 /counter로드 Counter 하려면 .

페이지 또는 뷰에서 라우팅할 수 없는 구성 요소 사용

구성 요소 태그 도우미를 사용하여 구성 요소를 기존 Razor Pages 또는 MVC 앱의 페이지 및 보기에 통합 Razor 하려면 다음 지침을 사용합니다.

서버 미리 렌더링을 사용하고 페이지 또는 뷰가 렌더링되는 경우:

  • 구성 요소가 페이지 또는 뷰와 함께 미리 렌더링됩니다.
  • 미리 렌더링하는 데 사용된 초기 구성 요소 상태가 손실됩니다.
  • SignalR 연결이 완료되면 새 구성 요소 상태가 생성됩니다.

비대화형 정적 구성 요소 렌더링을 포함하여 렌더링 모드에 대한 자세한 내용은 ASP.NET Core의 구성 요소 태그 도우미를 참조 하세요. 미리 렌더링된 Razor 구성 요소의 상태를 저장하려면 ASP.NET Core에서 구성 요소 상태 태그 도우미 유지를 참조하세요.

Components 프로젝트의 루트 폴더에 폴더를 추가합니다.

다음 콘텐츠를 사용하여 폴더에 Components 가져오기 파일을 추가합니다. {APP NAMESPACE} 자리 표시자를 프로젝트의 네임스페이스로 변경합니다.

Components/_Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components

프로젝트의 레이아웃 파일(Razor Pages 앱의 Pages/Shared/_Layout.cshtml 또는 MVC 앱의 Views/Shared/_Layout.cshtml)에서

  • 태그에 구성 요소에 대한 다음 <base> 태그 및 구성 요소 태그 도우미를 <head> 추가 HeadOutlet 합니다.

    <base href="~/" />
<component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)" 
    render-mode="ServerPrerendered" />

    위의 예제에서 href 값(‘앱 기본 경로’)은 앱이 루트 URL 경로(/)에 있는 것으로 가정합니다. 앱이 하위 애플리케이션인 경우, ASP.NET Core Blazor 호스트 및 배포 문서의 앱 기본 경로 섹션에 설명된 지침을 따르세요.

    HeadOutlet 구성 요소는 Razor 구성 요소에서 설정한 페이지 제목(PageTitle 구성 요소) 및 기타 헤드 요소(HeadContent 구성 요소)에 대한 헤드(<head>) 콘텐츠를 렌더링하는 데 사용됩니다. 자세한 내용은 ASP.NET Core Blazor 앱의 헤드 콘텐츠 제어를 참조하세요.

  • Scripts 렌더링 섹션(@await RenderSectionAsync(...)) 바로 앞에 blazor.web.js 스크립트의 <script> 태그를 추가합니다.

    <script src="_framework/blazor.web.js"></script>

    프레임워크가 앱에 스크립트를 blazor.web.js 추가하므로 앱에 스크립트를 Blazorblazor.web.js 수동으로 추가할 필요가 없습니다.

참고 항목

일반적으로 레이아웃은 _ViewStart.cshtml 파일을 통해 로드됩니다.

비작동(no-op) App 구성 요소를 프로젝트에 추가합니다.

Components/App.razor:

@* No-op App component *@

서비스가 등록된 경우 구성 요소 및 서비스에 대한 Razor 서비스를 추가하여 대화형 서버 구성 요소 렌더링을 지원합니다.

파일 맨 Program 위에 프로젝트 구성 요소에 대한 파일 맨 위에 문을 추가 using 합니다.

using {APP NAMESPACE}.Components;

앞줄에서 자리 표시자를 앱의 네임스페이스로 변경 {APP NAMESPACE} 합니다. 예시:

using BlazorSample.Components;

Program 앱을 빌드하는 줄 앞의 파일에서(builder.Build())

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

대화형 서버 및 WebAssembly 구성 요소에 대한 지원을 추가하는 방법에 대한 자세한 내용은 ASP.NET Core Blazor 렌더링 모드를 참조하세요.

Pages 앱에서 Program Pages(MapRazorPages)를 매핑 Razor 하거나 MVC 앱에서 Razor 기본 컨트롤러 경로(MapControllerRoute)를 매핑하기 위해 호출 MapRazorComponents 한 직후 파일에서 사용 가능한 구성 요소를 검색하고 앱의 루트 구성 요소(로드된 첫 번째 구성 요소)를 지정합니다. 기본적으로 앱의 루트 구성 요소는 구성 요소(App.razor)입니다App. 앱에 AddInteractiveInteractiveServerRenderMode 대한 대화형 서버 쪽 렌더링(대화형 SSR)을 구성하기 위한 호출을 연결합니다.

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

참고 항목

위조 방지 미들웨어를 포함하도록 앱이 아직 업데이트되지 않은 경우 호출된 후 UseAuthorization 다음 줄을 추가합니다.

app.UseAntiforgery();

페이지 또는 뷰에 구성 요소를 통합합니다. 예를 들어 프로젝트의 Components 폴더에 구성 요소를 추가 EmbeddedCounter 합니다.

Components/EmbeddedCounter.razor:

<h1>Embedded Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Razor 페이지:

Razor 페이지 앱의 프로젝트 Index 페이지에서 EmbeddedCounter 구성 요소의 네임스페이스를 추가하고 이 구성 요소를 페이지에 포함합니다. Index 페이지가 로드되면 EmbeddedCounter 구성 요소가 페이지에 미리 렌더링됩니다. 다음 예제에서는 {APP NAMESPACE} 자리 표시자를 프로젝트의 네임스페이스로 바꿉니다.

Pages/Index.cshtml:

@page
@using {APP NAMESPACE}.Components
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

MVC:

MVC 앱의 프로젝트 Index뷰에서 EmbeddedCounter 구성 요소 네임스페이스를 추가하고 해당 구성 요소를 뷰에 포함합니다. Index 뷰가 로드되면 EmbeddedCounter 구성 요소가 페이지에서 미리 렌더링됩니다. 다음 예제에서는 {APP NAMESPACE} 자리 표시자를 프로젝트의 네임스페이스로 바꿉니다.

Views/Home/Index.cshtml:

@using {APP NAMESPACE}.Components
@{
    ViewData["Title"] = "Home Page";
}

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

라우팅 가능한 구성 요소 사용

다음 지침을 사용하여 라우팅 가능한 Razor 구성 요소를 기존 Razor Pages 또는 MVC 앱에 통합합니다.

이 섹션의 지침에서는 다음을 가정합니다.

  • 앱의 제목은 .입니다 Blazor Sample.
  • 앱의 네임스페이스는 BlazorSample입니다.

라우팅 가능한 Razor 구성 요소를 지원하려면 다음을 수행합니다.

Components 프로젝트의 루트 폴더에 폴더를 추가합니다.

다음 콘텐츠를 사용하여 폴더에 Components 가져오기 파일을 추가합니다.

Components/_Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components

{APP NAMESPACE} 자리 표시자를 프로젝트의 네임스페이스로 변경합니다. 예시:

@using BlazorSample
@using BlazorSample.Components

폴더에 Layout 폴더를 추가합니다 Components .

폴더에 바닥글 구성 요소 및 스타일시트를 추가합니다 Layout .

Components/Layout/Footer.razor:

<footer class="border-top footer text-muted">
    <div class="container">
        &copy; 2023 - {APP TITLE} - <a href="/privacy">Privacy</a>
    </div>
</footer>

앞의 태그에서 자리 표시자를 앱의 제목으로 설정합니다 {APP TITLE} . 예시:

&copy; 2023 - Blazor Sample - <a href="/privacy">Privacy</a>

Components/Layout/Footer.razor.css:

.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}

폴더에 탐색 메뉴 구성 요소를 추가합니다 Layout .

Components/Layout/NavMenu.razor:

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
    <a class="navbar-brand" href="/">{APP TITLE}</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
        <ul class="navbar-nav flex-grow-1">
            <li class="nav-item">
                <a class="nav-link text-dark" href="/">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="/privacy">Privacy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="/counter">Counter</a>
            </li>
        </ul>
    </div>
</div>
</nav>

앞의 태그에서 자리 표시자를 앱의 제목으로 설정합니다 {APP TITLE} . 예시:

<a class="navbar-brand" href="/">Blazor Sample</a>

Components/Layout/NavMenu.razor.css:

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a {
    color: #0077cc;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

폴더에 기본 레이아웃 구성 요소 및 스타일시트를 추가합니다Layout.

Components/Layout/MainLayout.razor:

@inherits LayoutComponentBase

<header>
    <NavMenu />
</header>

<div class="container">
    <main role="main" class="pb-3">
        @Body
    </main>
</div>

<Footer />

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Components/Layout/MainLayout.razor.css:

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

다음 콘텐츠를 사용하여 Routes 폴더에 Components 구성 요소를 추가합니다.

Components/Routes.razor:

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

다음 콘텐츠를 사용하여 App 폴더에 Components 구성 요소를 추가합니다.

Components/App.razor:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{APP TITLE}</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
    <link rel="stylesheet" href="/{APP NAMESPACE}.styles.css" />
    <HeadOutlet />
</head>
<body>
    <Routes />
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js"></script>
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

위의 코드에서 앱 제목 및 스타일시트 파일 이름을 업데이트합니다.

  • 요소의 {APP TITLE} 자리 표시자에 대해 <title> 앱의 제목을 설정합니다. 예시:

    <title>Blazor Sample</title>

  • 스타일시트 <link> 요소의 {APP NAMESPACE} 자리 표시자에 대해 앱의 네임스페이스를 설정합니다. 예시:

    <link rel="stylesheet" href="/BlazorSample.styles.css" />

서비스가 등록된 경우 구성 요소 및 서비스에 대한 Razor 서비스를 추가하여 대화형 서버 구성 요소 렌더링을 지원합니다.

파일 맨 Program 위에 프로젝트 구성 요소에 대한 파일 맨 위에 문을 추가 using 합니다.

using {APP NAMESPACE}.Components;

앞줄에서 자리 표시자를 앱의 네임스페이스로 변경 {APP NAMESPACE} 합니다. 예시:

using BlazorSample.Components;

Program 앱을 빌드하는 줄 앞의 파일에서(builder.Build())

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

대화형 서버 및 WebAssembly 구성 요소에 대한 지원을 추가하는 방법에 대한 자세한 내용은 ASP.NET Core Blazor 렌더링 모드를 참조하세요.

Program Pages(MapRazorPages)를 매핑 Razor 하기 위한 호출 직후 파일에서 사용 가능한 구성 요소를 검색하고 앱의 루트 구성 요소를 지정하기 위해 호출 MapRazorComponents 합니다. 기본적으로 앱의 루트 구성 요소는 구성 요소(App.razor)입니다App. 앱에 AddInteractiveServerRenderMode 대한 대화형 서버 쪽 렌더링(대화형 SSR)을 구성하기 위한 호출을 연결합니다.

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

참고 항목

위조 방지 미들웨어를 포함하도록 앱이 아직 업데이트되지 않은 경우 호출된 후 UseAuthorization 다음 줄을 추가합니다.

app.UseAntiforgery();

Pages 라우팅 가능한 구성 요소에 Components 대한 폴더를 폴더에 만듭니다. 다음 예제는 Blazor 프로젝트 템플릿의 Counter 구성 요소를 기반으로 하는 Counter 구성 요소입니다.

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

프로젝트를 실행하고 /counter에서 라우팅할 수 있는 Counter 구성 요소로 이동합니다.

네임스페이스에 대한 자세한 내용은 구성 요소 네임스페이스 섹션을 참조하세요.

RazorComponentResult MVC 컨트롤러 작업에서 반환

MVC 컨트롤러 작업은 .를 사용하여 RazorComponentResult<TComponent>구성 요소를 반환할 수 있습니다.

Components/Welcome.razor:

<PageTitle>Welcome!</PageTitle>

<h1>Welcome!</h1>

<p>@Message</p>

@code {
    [Parameter]
    public string? Message { get; set; }
}

컨트롤러에서:

public IResult GetWelcomeComponent()
{
    return new RazorComponentResult<Welcome>(new { Message = "Hello, world!" });
}

렌더링된 구성 요소에 대한 HTML 태그만 반환됩니다. 레이아웃 및 HTML 페이지 태그는 구성 요소와 함께 자동으로 렌더링되지 않습니다. 전체 HTML 페이지를 생성하기 위해 앱은 기본 , <head><body>및 기타 태그에 대한 HTML 태그를 <html>제공하는 레이아웃을 지정할 Blazor 수 있습니다. 구성 요소에는 이 섹션의 @layoutRazor 예제에 대한 구성 요소 정의 파일 Welcome.razor 의 맨 위에 지시문이 있는 레이아웃이 포함됩니다. 다음 예제에서는 앱에 이름이 지정된 RazorComponentResultLayout 레이아웃(Components/Layout/RazorComponentResultLayout.razor)이 있다고 가정합니다.

@using BlazorSample.Components.Layout
@layout RazorComponentResultLayout

개별 구성 요소에 @using 폴더에 Layout 대한 문을 앱의 _Imports.razor 파일로 이동하여 배치하지 않도록 할 수 있습니다.

자세한 내용은 ASP.NET CoreBlazor 레이아웃을 참조하세요.

구성 요소 네임스페이스

사용자 지정 폴더를 사용하여 프로젝트의 Razor 구성 요소를 저장하는 경우, 폴더를 나타내는 네임스페이스를 페이지/뷰 또는 _ViewImports.cshtml 파일에 추가합니다. 다음 예제에서

  • 구성 요소는 프로젝트의 Components 폴더에 저장됩니다.
  • {APP NAMESPACE} 자리 표시자는 프로젝트의 네임스페이스입니다. Components은 폴더의 이름을 나타냅니다.
@using {APP NAMESPACE}.Components

예시:

@using BlazorSample.Components

_ViewImports.cshtml 파일은 Razor Pages 앱의 Pages 폴더 또는 MVC 앱의 Views 폴더에 있습니다.

자세한 내용은 ASP.NET Core Razor 구성 요소를 참조하세요.

추가 리소스

핵심 구성 요소 ASP.NET Razor 미리 렌더링