ASP.NET MVC 4 : Partial View (부분뷰) 알아보기

asp.net webform 개발시 user control 을 사용한 경험이 있을거라 생각이 듭니다. mvc 4 에는 partial view 라는 개념으로 존재하며, 이는 .cshtml 이라는 확장자를 갖게 됩니다. 보통 user control 를 사용한다면 해더, 풋터와 같은 공통 화면 모듈을 분리하여 사용하는 개념이죠.  새로 view 를 만들어 보죠. 이름은 _Product 라고 명명하며, create as a parical view 를 체크 합니다. <img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.codeproject.com%2FKB%2Faspnet%2F617361%2F1.png" style="margin: 0px; padding: 0px; border: 0px; overflow: auto; max-width: 100%; height: auto; color: rgb(17, 17, 17); font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; line-height: normal;"> 내용은 아래와 같이 입력합니다. 내용은 그리드 밑에 입력하는 화면을 구현한 내용입니다. <div class="txc-textbox" style="border: 1px dashed rgb(193, 193, 193); background-color: rgb(238, 238, 238); padding: 10px;"><pre lang="aspnet" id="pre0" style="color: black; background-color: rgb(251, 237, 187); padding: 6px; font-size: 9pt; line-height: normal; font-family: Consolas, 'Courier New', Courier, mono; white-space: pre-wrap; border: 1px solid rgb(251, 237, 187); overflow: auto; word-wrap: break-word; margin-top: 0px;">@model PartialViewSample.Models.Product @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>AddProduct</title> </head> <body> <div> <label>Id:</label> @Html.TextBox("Id", Model.Id) <label>Name:</label> @Html.TextBox("Name", Model.Id) <label>Description:</label> @Html.TextBox("Description", Model.Description) <label>Quantity:</label> @Html.TextBox("Quantity", Model.Quantity) </div> </body>  </pre></<span class="code-leadattribute" style="font-family: Consolas, 'Courier New', Courier, mono; font-size: 9pt; line-height: normal; white-space: pre-wrap; margin: 0px; padding: 0px; border: 0px; color: rgb(128, 0, 0);">html> </div> 이를 사용하는 벙법은 2가지가 존재합니다. <pre lang="cs" id="pre1" style="color: black; background-color: rgb(251, 237, 187); padding: 6px; font-size: 9pt; line-height: normal; font-family: Consolas, 'Courier New', Courier, mono; white-space: pre-wrap; border: 1px solid rgb(251, 237, 187); overflow: auto; word-wrap: break-word; margin-top: 0px;">Html.RenderPartial("~/Views/Shared/_Product.cshtml", product);</pre> <pre lang="cs" id="pre2" style="color: black; background-color: rgb(251, 237, 187); padding: 6px; font-size: 9pt; line-height: normal; font-family: Consolas, 'Courier New', Courier, mono; white-space: pre-wrap; border: 1px solid rgb(251, 237, 187); overflow: auto; word-wrap: break-word; margin-top: 0px;">@Html.Partial("~/Views/Shared/_Product.cshtml", product);</pre> Html.Partial 을 사용하여 문자열 즉 html 을  반환해 주며, Html.RenderPartial 은 내부적으로 Write 를 호출합니다. 그리고 void 로 반환하는게 특색이죠. 그리고 Html.Partial 은 Html.RenderPartial 과 함께 사용하실 수 없습니다. 왜냐면 결과가 실행하는 동안 Response stream 에 의해 쓰여지기 때문이라고 합니다. 그래서 빠른 응답을 출력하기 위해 RenderPartial 를 사용하는 원인으로, Html.RenderPartial() 함수는 Html.Partial() 함수보다 실행이 빠릅니다.  <pre lang="C++" id="pre3" style="color: black; background-color: rgb(251, 237, 187); padding: 6px; font-size: 9pt; line-height: normal; font-family: Consolas, 'Courier New', Courier, mono; white-space: pre-wrap; border: 1px solid rgb(251, 237, 187); overflow: auto; word-wrap: break-word; margin-top: 0px;">@if (grid.HasSelection) { product =(PartialViewSample.Models.Product)grid.Rows[grid.SelectedIndex].Value; Html.RenderPartial("~/Views/Shared/_Product.cshtml", product); }</pre> 실행해 보면 아래와 같습니다.mvc 화면에 partial view 을 사용하여 아래 출력한 사항입니다. <img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.codeproject.com%2FKB%2Faspnet%2F617361%2F2.png" style="margin: 0px; padding: 0px; border: 0px; overflow: auto; max-width: 100%; height: auto; color: rgb(17, 17, 17); font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; line-height: normal;"> <div class="txc-textbox" style="border: 1px dashed rgb(243, 197, 52); background-color: rgb(254, 254, 184); padding: 10px;">펌 : <a href="http://www.codeproject.com/Tips/617361/Partial-View-in-ASP-NET-MVC-4" style="font-size: 9pt; line-height: 1.6;">http://www.codeproject.com/Tips/617361/Partial-View-in-ASP-NET-MVC-4</a></div>