페이지, 라우팅 및 레이아웃

2025-06-17

팁 (조언)

이 콘텐츠는 Blazor 또는 오프라인으로 읽을 수 있는 다운로드 가능한 무료 PDF로 제공되는 for ASP NET Web Forms Developers for Azure eBook에서 발췌한 것입니다.

ASP.NET Web Forms 앱은 .aspx 파일에 정의된 페이지로 구성됩니다. 각 페이지의 주소는 프로젝트의 실제 파일 경로를 기반으로 합니다. 브라우저가 페이지에 요청을 하면 페이지의 내용이 서버에서 동적으로 렌더링됩니다. 렌더링은 페이지의 HTML 태그와 해당 서버 컨트롤을 모두 차지합니다.

에서 Blazor앱의 각 페이지는 구성 요소이며, 일반적으로 지정된 경로가 하나 이상 있는 .razor 파일에 정의됩니다. 라우팅은 주로 특정 서버 요청을 포함하지 않고 클라이언트 쪽에서 발생합니다. 브라우저는 먼저 앱의 루트 주소를 요청합니다. 그런 다음 앱의 Router 루트 Blazor 구성 요소는 가로채는 탐색 요청을 처리하고 올바른 구성 요소로 전달합니다.

Blazor 는 딥 링크도 지원합니다. 딥 링크는 브라우저가 앱의 루트가 아닌 특정 경로에 요청할 때 발생합니다. 서버에 전송된 딥 링크에 대한 요청은 앱으로 Blazor 라우팅된 다음 요청 클라이언트 쪽을 올바른 구성 요소로 라우팅합니다.

ASP.NET Web Forms의 간단한 페이지에는 다음 태그가 포함될 수 있습니다.

Name.aspx

<%@ Page Title="Name" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Name.aspx.cs" Inherits="WebApplication1.Name" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        What is your name?<br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
    </div>
    <div>
        <asp:Literal ID="Literal1" runat="server" />
    </div>
</asp:Content>

Name.aspx.cs

public partial class Name : System.Web.UI.Page
{
    protected void Button1_Click1(object sender, EventArgs e)
    {
        Literal1.Text = "Hello " + TextBox1.Text;
    }
}

앱의 Blazor 해당 페이지는 다음과 같습니다.

Name.razor

@page "/Name"
@layout MainLayout

<div>
    What is your name?<br />
    <input @bind="text" />
    <button @onclick="OnClick">Submit</button>
</div>
<div>
    @if (name != null)
    {
        @:Hello @name
    }
</div>

@code {
    string text;
    string name;

    void OnClick() {
        name = text;
    }
}

페이지 만들기

Blazor에서 페이지를 만들려면 구성 요소를 만든 후 @page Razor 지시문을 추가하여 구성 요소의 경로를 지정하십시오. 지시문은 @page 해당 구성 요소에 추가할 경로 템플릿인 단일 매개 변수를 사용합니다.

@page "/counter"

경로 템플릿 매개 변수가 필요합니다. ASP.NET Web Forms와 달리 구성 요소에 대한 Blazor 경로는 파일 위치에서 유추 되지 않습니다 (나중에 추가된 기능일 수 있음).

경로 템플릿 구문은 ASP.NET Web Forms에서 라우팅하는 데 사용되는 것과 동일한 기본 구문입니다. 경로 매개 변수는 중괄호를 사용하여 템플릿에 지정됩니다. Blazor 는 경로 값을 동일한 이름(대/소문자를 구분하지 않는) 구성 요소 매개 변수에 바인딩합니다.

@page "/product/{id}"

<h1>Product @Id</h1>

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

경로 매개 변수 값에 대한 제약 조건을 지정할 수도 있습니다. 예를 들어 제품 ID를 다음과 같이 제한합니다.int

@page "/product/{id:int}"

<h1>Product @Id</h1>

@code {
    [Parameter]
    public int Id { get; set; }
}

지원되는 Blazor경로 제약 조건의 전체 목록은 경로 제약 조건을 참조하세요.

라우터 구성 요소

Blazor에서의 라우팅은 Router 구성 요소에 의해 처리됩니다. Router 구성 요소는 일반적으로 앱의 루트 구성 요소(App.razor)에서 사용됩니다.

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Router 구성 요소는 지정된 구성 요소와 선택적으로 지정된 AppAssemblyAdditionalAssemblies구성 요소에서 라우팅 가능한 구성 요소를 검색합니다. 브라우저가 탐색할 때 Router가 탐색을 가로채고 경로가 주소와 일치하는 경우 추출된 Found로 RouteData의 내용을 렌더링합니다. 그렇지 않으면 Router가 NotFound 매개 변수를 렌더링합니다.

RouteView 구성 요소는 RouteData에 의해 지정된 일치하는 구성 요소를, 레이아웃이 있는 경우 해당 레이아웃과 함께 렌더링하는 것을 처리합니다. 일치하는 구성 요소에 레이아웃이 없으면 선택적으로 지정된 DefaultLayout 레이아웃이 사용됩니다.

LayoutView 구성 요소는 지정된 레이아웃 내에서 자식 콘텐츠를 렌더링합니다. 레이아웃은 이 장 뒷부분에서 자세히 살펴보겠습니다.

ASP.NET Web Forms에서는 브라우저에 리디렉션 응답을 반환하여 다른 페이지로의 탐색을 트리거합니다. 다음은 그 예입니다.

protected void NavigateButton_Click(object sender, EventArgs e)
{
    Response.Redirect("Counter");
}

Blazor에서는 리디렉션 응답을 일반적으로 반환할 수 없습니다. Blazor 는 요청-회신 모델을 사용하지 않습니다. 그러나 JavaScript와 마찬가지로 브라우저 탐색을 직접 트리거할 수 있습니다.

Blazor는 사용할 수 있는 NavigationManager 서비스를 제공합니다.

현재 브라우저 주소 가져오기
기본 주소 가져오기
트리거 탐색
주소가 변경되면 알림 받기

다른 주소로 이동하려면 다음 메서드를 NavigateTo 사용합니다.

@page "/"
@inject NavigationManager NavigationManager

<button @onclick="Navigate">Navigate</button>

@code {
    void Navigate() {
        NavigationManager.NavigateTo("counter");
    }
}

모든 NavigationManager 멤버에 대한 설명은 URI 및 탐색 상태 도우미를 참조하세요.

기본 URL

기본 경로 아래에 Blazor 앱이 배포된 경우, 라우팅이 제대로 작동하기 위해 <base> 태그를 사용하여 페이지 메타데이터에 기본 URL을 지정해야 합니다. 앱의 호스트 페이지가 Razor를 사용하여 서버 렌더링되는 경우 구문을 사용하여 ~/ 앱의 기본 주소를 지정할 수 있습니다. 호스트 페이지가 정적 HTML인 경우 기본 URL을 명시적으로 지정해야 합니다.

<base href="~/" />

페이지 레이아웃

ASP.NET Web Forms의 페이지 레이아웃은 마스터 페이지에서 처리됩니다. 마스터 페이지는 개별 페이지에서 제공할 수 있는 하나 이상의 콘텐츠 자리 표시자를 사용하여 템플릿을 정의합니다. 마스터 페이지는 .master 파일에 정의되고 지시문으로 시작합니다 <%@ Master %> . .master 파일의 콘텐츠는 .aspx 페이지와 마찬가지로 코딩되지만 페이지에 콘텐츠를 제공할 수 있는 위치를 표시하는 컨트롤이 추가 <asp:ContentPlaceHolder> 되었습니다.

Site.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - My ASP.NET Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    <form runat="server">
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - My ASP.NET Application</p>
            </footer>
        </div>
    </form>
</body>
</html>

에서 Blazor레이아웃 구성 요소를 사용하여 페이지 레이아웃을 처리합니다. 레이아웃 구성 요소는 페이지의 내용을 렌더링하기 위해 사용할 수 있는 형식 LayoutComponentBase의 단일 Body 속성을 정의하는 RenderFragment로부터 상속됩니다.

MainLayout.razor

@inherits LayoutComponentBase
<h1>Main layout</h1>
<div>
    @Body
</div>

레이아웃이 있는 페이지가 렌더링되면, 페이지는 레이아웃이 Body 속성을 렌더링하는 위치에서 지정된 레이아웃의 내용 내에 렌더링됩니다.

페이지에 레이아웃을 적용하려면 다음 지시문을 @layout 사용합니다.

@layout MainLayout

_Imports.razor 파일을 사용하여 폴더 및 하위 폴더의 모든 구성 요소에 대한 레이아웃을 지정할 수 있습니다. 라우터 구성 요소를 사용하여 모든 페이지의 기본 레이아웃을 지정할 수도 있습니다.

마스터 페이지는 여러 콘텐츠 자리 표시자를 정의할 수 있지만 레이아웃에는 Blazor 단일 Body 속성만 있습니다. 레이아웃 구성 요소의 Blazor 이러한 제한 사항은 향후 릴리스에서 해결될 예정입니다.

ASP.NET Web Forms의 마스터 페이지를 중첩할 수 있습니다. 즉, 마스터 페이지는 마스터 페이지를 사용할 수도 있습니다. 레이아웃 구성 요소도 Blazor 중첩될 수 있습니다. 레이아웃 구성 요소에 레이아웃 구성 요소를 적용할 수 있습니다. 내부 레이아웃의 내용은 외부 레이아웃 내에서 렌더링됩니다.

ChildLayout.razor

@layout MainLayout
<h2>Child layout</h2>
<div>
    @Body
</div>

Index.razor

@page "/"
@layout ChildLayout
<p>I'm in a nested layout!</p>

그러면 페이지의 렌더링된 출력은 다음과 같습니다.

<h1>Main layout</h1>
<div>
    <h2>Child layout</h2>
    <div>
        <p>I'm in a nested layout!</p>
    </div>
</div>

레이아웃은 일반적으로 페이지의 루트 HTML 요소(Blazor, <html>, <body>등)를 정의하지 않습니다. 루트 HTML 요소는 대신 앱의 호스트 페이지에 정의 Blazor 되며, 앱의 초기 HTML 콘텐츠를 렌더링하는 데 사용됩니다( 부트스트랩 Blazor참조). 호스트 페이지는 주변 태그를 사용하여 앱에 대한 여러 루트 구성 요소를 렌더링할 수 있습니다.

구성 요소는 Blazor 페이지를 포함하여 <script> 태그를 렌더링할 수 없습니다. 태그가 한 번 로드된 다음 변경할 수 없으므로 <script> 이 렌더링 제한이 존재합니다. Razor 구문을 사용하여 태그를 동적으로 렌더링하려고 하면 예기치 않은 동작이 발생할 수 있습니다. 대신 모든 <script> 태그를 앱의 호스트 페이지에 추가해야 합니다.

이전 다음

다음을 통해 공유

페이지, 라우팅 및 레이아웃

페이지 만들기

라우터 구성 요소

네비게이션

기본 URL

페이지 레이아웃

추가 리소스