최신 ComponentOne MVC Core Edition 릴리스에서는 FlexGrid 컨트롤을 확장하는 새로운 TransposedMultiRow 컨트롤을 추가하였습니다. 이 컨트롤은 새 컨트롤인 TransposedGrid와 Multirow를 조합한 것으로서, 데이터를 행과 열이 바뀐 형식으로 표시합니다. 즉 열은 데이터를, 행은 속성을 표시합니다. Multirow와 유사하므로 단일 데이터 항목을 여러 열로 표시할 수 있습니다.

Multirow 컨트롤과 마찬가지로 TransposedMultiRow의 레이아웃을 정의함과 동시에 셀 그룹에는 c1-transposed-multi-row-cell-group을, 간단한 셀에는 c1-transposed-multi-row-cell을 사용해 컨트롤을 만들 수 있습니다. 레이아웃에는 셀 그룹 개체의 배열이 포함되어 있습니다. 각 셀 그룹은 그룹의 범위가 몇 개의 열로 이루어져야 하는지, 그리고 각 그룹을 구성하는 셀의 수는 몇 개인지 지정합니다. 그 결과로 얻게 되는 뷰가 바로 Multirow의 바뀐 버전입니다.

TransposedMultiRow 컨트롤을 추가하는 방법

1. ASP. NET Core MVC 프로젝트를 만들었으면 다음 NuGet 패키지를 프로젝트에 추가합니다.

2. C1.AspNetCore.Mvc

3. C1.AspNetCore.Mvc.TransposedMultiRow

4. 패키지를 설치한 후에는 Views/_ViewImports.cshtml 파일로 이동하여 파일 끝에 필수 태그 도우미를 추가합니다.

5. @addTagHelper *, C1.AspNetCore.Mvc

6. @addTagHelper *, C1.AspNetCore.Mvc.TransposedMultiRow

7. 이제 Views/Shared/_Layout.cshtml 파일로 이동하여 헤드 태그 끝에 필수 스타일 및 스크립트를 추가합니다.

   <c1-styles />  
   <c1-scripts>  
        <c1-basic-scripts />  
        <c1-transposed-multi-row-scripts />  
   </c1-scripts>

   8. 이제 TransposedMultirow 컨트롤을 프로젝트에 추가하고 cshtml 파일에서 모델에 바인딩할 수 있습니다.

   @model IEnumerable<Orders.Order>  
   <c1-transposed-multi-row id="ovTransposedMultiRow" class="multirow">  
       <c1-items-source source-collection="Model"></c1-items-source>  
       <c1-transposed-multi-row-cell-group header="Order" colspan="2">  
           <c1-transposed-multi-row-cell binding="Id" header="ID" class="id" width="150" />  
           <c1-transposed-multi-row-cell binding="Date" header="Ordered" width="150" />  
           <c1-transposed-multi-row-cell binding="Amount" header="Amount" format="c" class="amount" />  
           <c1-transposed-multi-row-cell binding="ShippedDate" header="Shipped" />  
       </c1-transposed-multi-row-cell-group>  
       <c1-transposed-multi-row-cell-group header="Customer" colspan="3">  
           <c1-transposed-multi-row-cell binding="Customer.Name" name="CustomerName" header="Customer" width="200" />  
           <c1-transposed-multi-row-cell binding="Customer.Email" name="CustomerEmail" header="Customer Email" class="email" colspan="2" />  
           <c1-transposed-multi-row-cell binding="Customer.Address" name="CustomerAddress" header="Address" />  
           <c1-transposed-multi-row-cell binding="Customer.City" name="CustomerCity" header="City" />  
           <c1-transposed-multi-row-cell binding="Customer.State" name="CustomerState" header="State" />  
       </c1-transposed-multi-row-cell-group>  
   </c1-transposed-multi-row>

   9. F5 키를 사용해 프로젝트를 실행합니다. 그러면 다음과 같은 출력이 표시됩니다.
   

다음 단계: ASP.NET Core MVC용 TransposedMultiRow를 이용한 지속적 발전

ASP .NET Core MVC 응용 프로그램에서 TransposedMultiRow 컨트롤을 사용하는 방법에 대해 알아보았습니다. 이 컨트롤이 작동하는 모습을 보려면 ComponentOne의 데모를 방문하거나 문서에서 자세히 알아보세요.