ASP.NET Core의 부분 보기Partial Views in ASP.NET Core

작성자: Steve Smith, Maher JENDOUBI, Rick AndersonScott SauberBy Steve Smith, Maher JENDOUBI, Rick Anderson, and Scott Sauber

ASP.NET Core MVC는 부분 보기를 지원합니다. 이 기능은 웹 페이지의 재사용 가능한 부분을 다른 보기에서 공유하려는 경우에 유용합니다.ASP.NET Core MVC supports partial views, which are useful when you have reusable parts of web pages you want to share between different views.

예제 코드 살펴보기 및 다운로드(다운로드 방법)View or download sample code (how to download)

부분 보기란?What are Partial Views?

부분 보기는 다른 보기 내에서 렌더링되는 보기입니다.A partial view is a view that's rendered within another view. 부분 보기를 실행하여 생성된 HTML 출력을 호출 (또는 부모) 보기에 렌더링합니다.The HTML output generated by executing the partial view is rendered into the calling (or parent) view. 보기와 같이 부분 보기는 .cshtml 파일 확장명을 사용합니다.Like views, partial views use the .cshtml file extension.

어떤 경우에 부분 보기를 사용해야 하나요?When Should I Use Partial Views?

부분 보기를 통해 큰 보기를 더 작은 구성 요소로 효과적으로 분리할 수 있습니다.Partial views are an effective way of breaking up large views into smaller components. 콘텐츠 보기의 중복을 줄이고 보기 요소를 다시 사용할 수 있습니다.They can reduce duplication of view content and allow view elements to be reused. 일반 레이아웃 요소는 _Layout.cshtml에서 지정해야 합니다.Common layout elements should be specified in _Layout.cshtml. 레이아웃이 아닌 다시 사용 가능한 콘텐츠는 부분 보기로 캡슐화될 수 있습니다.Non-layout reusable content can be encapsulated into partial views.

논리 조각으로 구성된 복잡 한 페이지를 사용하는 경우 고유한 부분 보기로 각 부분을 작업하는 것이 유용할 수 있습니다.If you have a complex page made up of several logical pieces, it can be helpful to work with each piece as its own partial view. 페이지의 나머지 부분과 분리에서 페이지의 각 부분을 볼 수 있습니다. 페이지 자체에 대한 보기가 전체 페이지 구조 호출을 포함하여 부분 보기를 렌더링하므로 훨씬 더 간단합니다.Each piece of the page can be viewed in isolation from the rest of the page, and the view for the page itself becomes much simpler since it only contains the overall page structure and calls to render the partial views.

팁: 보기에서 반복 금지 원칙을 따릅니다.Tip: Follow the Don't Repeat Yourself Principle in your views.

부분 보기 선언Declaring Partial Views

부분 보기를 다른 뷰와 마찬가지로 만듭니다. 보기 폴더 내에서 .cshtml 파일을 만듭니다.Partial views are created like any other view: you create a .cshtml file within the Views folder. 부분 보기 및 일반 보기 간에 의미 체계 차이점이 없습니다. 그저 다르게 렌더링되었을 뿐입니다.There's no semantic difference between a partial view and a regular view - they're just rendered differently. 컨트롤러의 ViewResult에서 직접 반환되는 보기를 사용할 수 있습니다. 같은 보기를 부분 보기로 사용할 수 있습니다.You can have a view that's returned directly from a controller's ViewResult, and the same view can be used as a partial view. 보기와 부분 보기가 렌더링되는 방법 간의 주요 차이점은 부분 보기가 _ViewStart.cshtml을 실행하지 않는다는 점입니다. (보기에서 수행하는 동안 레이아웃에서 _viewstart.vbhtml에 대해 자세히 알아봅니다.)The main difference between how a view and a partial view are rendered is that partial views don't run _ViewStart.cshtml (while views do - learn more about _ViewStart.cshtml in Layout).

부분 보기 참조Referencing a Partial View

페이지 보기 내에서 부분 보기를 렌더링할 수 있는 여러 가지 방법이 있습니다.From within a view page, there are several ways in which you can render a partial view. IHtmlString을 반환하며, 호출에 접두사 @를 사용하여 참조될 수 있는 Html.PartialAsync를 사용하는 것이 가장 좋습니다.The best practice is to use Html.PartialAsync, which returns an IHtmlString and can be referenced by prefixing the call with @:

@await Html.PartialAsync("AuthorPartial")

RenderPartialAsync을 사용하여 부분 보기를 렌더링할 수도 있습니다.You can render a partial view with RenderPartialAsync. 이 메서드는 결과를 반환하지 않습니다. 렌더링된 출력을 응답에 직접 스트리밍합니다.This method doesn't return a result; it streams the rendered output directly to the response. 결과를 반환하지 않기 때문에 Razor 코드 블록 내에서 호출되어야 합니다.Because it doesn't return a result, it must be called within a Razor code block:

@{
    await Html.RenderPartialAsync("AuthorPartial");
}

결과를 직접 스트리밍하기 때문에 RenderPartialAsync는 일부 시나리오에서 더 잘 작동할 수 있습니다.Because it streams the result directly, RenderPartialAsync may perform better in some scenarios. 그러나 PartialAsync를 사용하는 것이 좋습니다.However, it's recommended you use PartialAsync.

Html.PartialAsync(Html.Partial) 및 Html.RenderPartialAsync(Html.RenderPartial)의 동기 해당 항목이 있지만, 교착 상태인 시나리오가 있으므로 동기 해당 항목을 사용하지 않는 것이 좋습니다.While there are synchronous equivalents of Html.PartialAsync (Html.Partial) and Html.RenderPartialAsync (Html.RenderPartial), use of the synchronous equivalents isn't recommended because there are scenarios where they deadlock. 이후 버전에서는 동기 메서드를 사용할 수 없습니다.The synchronous methods will be unavailable in future versions.

참고

보기가 코드를 실행해야 하는 경우 권장되는 패턴은 부분 보기 대신 보기 구성 요소를 사용하는 것입니다.If your views need to execute code, the recommended pattern is to use a view component instead of a partial view.

부분 보기 검색Partial View Discovery

부분 보기를 참조하는 경우 여러 가지 방법으로 해당 위치를 참조할 수 있습니다.When referencing a partial view, you can refer to its location in several ways:

// Uses a view in current folder with this name
// If none is found, searches the Shared folder
@await Html.PartialAsync("ViewName")

// A view with this name must be in the same folder
@await Html.PartialAsync("ViewName.cshtml")

// Locate the view based on the application root
// Paths that start with "/" or "~/" refer to the application root
@await Html.PartialAsync("~/Views/Folder/ViewName.cshtml")
@await Html.PartialAsync("/Views/Folder/ViewName.cshtml")

// Locate the view using relative paths
@await Html.PartialAsync("../Account/LoginPartial.cshtml")

다른 보기 폴더에서 이름이 같은 다른 부분 보기를 사용할 수 있습니다.You can have different partial views with the same name in different view folders. 파일 확장명을 제외한 이름으로 보기를 참조할 때 각 폴더의 보기는 해당 보기와 같은 폴더에서 부분 보기를 사용합니다.When referencing the views by name (without file extension), views in each folder will use the partial view in the same folder with them. 또한 사용할 기본 부분 보기를 지정하고 공유 폴더에 배치할 수 있습니다.You can also specify a default partial view to use, placing it in the Shared folder. 공유 부분 보기는 부분 보기의 고유한 버전이 설치되지 않은 모든 보기에서 사용합니다.The shared partial view will be used by any views that don't have their own version of the partial view. 공유에서 기본 부분 보기를 사용할 수 있고 부모 보기와 같은 폴더에 이름이 같은 부분 보기에 의해 재정의됩니다.You can have a default partial view (in Shared), which is overridden by a partial view with the same name in the same folder as the parent view.

부분 보기는 연결될 수 있습니다.Partial views can be chained. 즉, (루프를 만들지 않으면) 부분 보기는 다른 부분 보기를 호출할 수 있습니다.That is, a partial view can call another partial view (as long as you don't create a loop). 각 보기 또는 부분 보기 내에서 상대 경로는 루트 또는 부모 보기가 아닌 항상 해당 보기를 기준으로 합니다.Within each view or partial view, relative paths are always relative to that view, not the root or parent view.

참고

부분 보기에서 Razor section를 선언하는 경우 해당 부모 보기에 표시되지 않습니다. 부분 보기로 제한됩니다.If you declare a Razor section in a partial view, it will not be visible to its parent(s); it will be limited to the partial view.

부분 보기의 데이터에 액세스Accessing Data From Partial Views

부모 보기가 인스턴스화되면 부모 보기의 ViewData 사전의 복사본을 가져옵니다.When a partial view is instantiated, it gets a copy of the parent view's ViewData dictionary. 부분 보기 내에서 데이터에 대한 업데이트는 부모 보기에 유지되지 않습니다.Updates made to the data within the partial view are not persisted to the parent view. 부분 보기에서 변경된 ViewData는 부분 보기가 반환될 때 손실됩니다.ViewData changed in a partial view is lost when the partial view returns.

ViewDataDictionary의 인스턴스를 부분 보기로 전달할 수 있습니다.You can pass an instance of ViewDataDictionary to the partial view:

@await Html.PartialAsync("PartialName", customViewData)

모델을 부분 보기에 전달할 수도 있습니다.You can also pass a model into a partial view. 이는 페이지의 보기 모델 또는 사용자 지정 개체일 수 있습니다.This can be the page's view model or a custom object. 모델을 PartialAsync 또는 RenderPartialAsync에 전달할 수 있습니다.You can pass a model to PartialAsync or RenderPartialAsync:

@await Html.PartialAsync("PartialName", viewModel)

ViewDataDictionary의 인스턴스 및 보기 모델을 부분 보기에 전달할 수 있습니다.You can pass an instance of ViewDataDictionary and a view model to a partial view:

@await Html.PartialAsync("ArticleSection", section,
            new ViewDataDictionary(this.ViewData) { { "index", index } })

다음 태그는 두 개의 부분 보기를 포함하는 Views/Articles/Read.cshtml 보기를 보여줍니다.The markup below shows the Views/Articles/Read.cshtml view which contains two partial views. 두 번째 부분 보기는 모델 및 ViewData를 부분 보기에 전달합니다.The second partial view passes in a model and ViewData to the partial view. 아래의 강조 표시된 ViewDataDictionary의 생성자 오버로드를 사용하는 경우 기존 ViewData를 유지하면서 새로운 ViewData 사전을 전달할 수 있습니다.You can pass new ViewData dictionary while retaining the existing ViewData if you use the constructor overload of the ViewDataDictionary highlighted below:

@using Microsoft.AspNetCore.Mvc.ViewFeatures
@using PartialViewsSample.ViewModels
@model Article

<h2>@Model.Title</h2>
@*Pass the authors name to Views\Shared\AuthorPartial.cshtml*@
@await Html.PartialAsync("AuthorPartial", Model.AuthorName)
@Model.PublicationDate

@*Loop over the Sections and pass in a section and additional ViewData
    to the strongly typed Views\Articles\ArticleSection.cshtml partial view.*@
@{ var index = 0;
    @foreach (var section in Model.Sections)
    {
        @await Html.PartialAsync("ArticleSection", section,
                    new ViewDataDictionary(this.ViewData) { { "index", index } })
        index++;
    }
}

Views/Shared/AuthorPartial:Views/Shared/AuthorPartial:

@model string
<div>
    <h3>@Model</h3>
    This partial view came from /Views/Shared/AuthorPartial.cshtml.<br />
</div>

ArticleSection 부분:The ArticleSection partial:

@using PartialViewsSample.ViewModels
@model ArticleSection

<h3>@Model.Title  Index: @ViewData["index"]  </h3>
<div>
    @Model.Content
</div>

런타임 시 부분은 부모 보기에 렌더링됩니다. 여기서 자체는 공유 _Layout.cshtml 내에서 렌더링됩니다.At runtime, the partials are rendered into the parent view, which itself is rendered within the shared _Layout.cshtml

부분 보기 출력