부분 보기Partial Views

작성자: Steve Smith, Maher JENDOUBIRick AndersonBy Steve Smith, Maher JENDOUBI, and Rick Anderson

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. Html.Partial을 사용하는 것이 가장 간단합니다. 그러면 IHtmlString을 반환하고 @을 포함하는 호출을 접두사로 사용하여 참조될 수 있습니다.The simplest is to use Html.Partial, which returns an IHtmlString and can be referenced by prefixing the call with @:

@Html.Partial("AuthorPartial")

PartialAsync 메서드는 비동기 코드가 포함된 부분 보기를 사용할 수 있습니다(하지만 보기의 코드는 일반적으로 권장되지 않음).The PartialAsync method is available for partial views containing asynchronous code (although code in views is generally discouraged):

@await Html.PartialAsync("AuthorPartial")

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

@{
    Html.RenderPartial("AuthorPartial");
}

결과를 직접 스트리밍하기 때문에 RenderPartialRenderPartialAsync는 일부 시나리오에서 더 잘 수행될 수 있습니다.Because it streams the result directly, RenderPartial and RenderPartialAsync may perform better in some scenarios. 그러나 대부분의 경우 PartialPartialAsync를 사용하는 것이 좋습니다.However, in most cases it's recommended you use Partial and PartialAsync.

참고

보기가 코드를 실행해야 하는 경우 권장되는 패턴은 부분 보기 대신 보기 구성 요소를 사용하는 것입니다.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
@Html.Partial("ViewName")

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

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

// Locate the view using relative paths
@Html.Partial("../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:

@Html.Partial("PartialName", customViewData)

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

@Html.Partial("PartialName", viewModel)

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

@Html.Partial("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*@
@Html.Partial("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)
    {
        @Html.Partial("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

부분 보기 출력