생성 HTML 테이블을 동적으로 일부 복잡성 아래

Question

내 JSON 구조있다 : I 2 JSON 구조 이제

{ 
    "list": [ 
    { 
     "Variant": "V1", 
     "Id": 1, 
     "TestList": [ 
     { 
      "SubVariantList": [ 
      { 
       "Id": 10, 
       "Name": "A", 
      "Fluctuation":100 
      }, 
      { 
       "Id": 20, 
       "Name": "B", 
       "Fluctuation":100 
      }, 
      { 
       "Id": 30, 
       "Name": "C", 
       "Fluctuation":200 
      } 
      ] 
     } 
     ] 
    }, 
    { 
    "Variant": "V2", 
     "Id": 2, 
     "TestList": [ 
     { 
      "SubVariantList": [ 
      { 
       "Id": 40, 
       "Name": "A", 
       "Fluctuation":1100 
      }, 
      { 
       "Id": 50, 
       "Name": "B", 
      "Fluctuation":1200 
      }, 
      { 
       "Id": 60, 
       "Name": "C", 
       "Fluctuation":1300 
      } 
      ] 
     } 
     ] 
    }, 
    { 
     "Variant": "V3", 
     "Id": 3, 
     "TestList": [ 
     { 
      "SubVariantList": [ 
      { 
       "Id": 40, 
       "Name": "A", 
       "Fluctuation":500 
      }, 
      { 
       "Id": 50, 
       "Name": "C", 
       "Fluctuation":600 
      } 
      ] 
     } 
     ] 
    } 
    ] 
} 

이 아래 여행 : 내가 만드는 오전 위의 JSON 구조

V1:A - B - C 
V2:A - C 

을 바탕으로 다음과 같은 동적 테이블 :

Table1: 
       A - B   | B - C (Headers) 
VariantName AValue BValue   CValue (Columns) 
    V1   100  100   200 
    V2   1100 1200   1300 

Table2: 
A - C (Headers) 
VariantName AValue CValue  (columns) 
V3    500  600 

나는 항상 h 1 점에서 아래와 같이 시작하는 고정 된 순서에 AVE subvariants :

A - B - C - D 

먼저 고정, 나는이 같은 조합을 가질 수 있습니다 휴식됩니다

A - B - C - D 
A - B - C 
A - C 
A- D 
A - B - C - D 
A - B - C 
A - D 
A- C 

문제가 subvariants의 일부 조합과 함께 제공 아래와 같은 흐름 : 나는 테이블 구조 같은 얻고있다 위의 데이터와

V1: A - B - C 
V2 : A - B - C - D 

을 :

012 3,516,

Table1 : <thead> 
A - B | B - C 

Table2:<thead> 
A - B | B - C | C - D 

하지만 이미 A - B 및 B - C 구조 등 아래 단 1 테이블이있을 수 있도록 시퀀스 바로 그대로 테이블에 작성된다

가

Table1 : <thead> 
A - B | B - C | C - D 

새로운 표가 생성 될 때에 만있을 것 아래와 같이 점프 수 :

<div> 
    @{ 
     var tableHeaders = new List<string>(); 
     for (int i = 0; i < Model.Count; i++) 
     { 
      var subvariants = string.Join(",", Model[i].TestList[0].SubVariantList.Select(cd => cd.Name)); //creating unique combination 
      if (tableHeaders.Count == 0) 
      { 
       tableHeaders.Add(subvariants); 
      } 
      else if (!tableHeaders.Contains(subvariants)) 
      { 
       tableHeaders.Add(subvariants); 
      } 
     } 
    } 
    @for (int i = 0; i < tableHeaders.Count; i++) 
    { 
     string[] subvariants = tableHeaders[i].Split(','); 
     <table> 
      <thead> 
       <tr> 
        @for (int cnt = 0; cnt < tableHeaders.Count() - 1; cnt++) // for 2 subvariants 
        { 
         <td> 
          @subvariants[cnt] <span>-</span> @subvariants[cnt + 1] 
         </td> 
        } 
       </tr> 

       <tr> 
        <th style="border: 1px solid black;">VariantName</th> 
        @for (int cnt = 0; cnt < subvariants.Count() - 1; cnt++) 
        { 
         if (cnt == 0) 
         { 
          <th style="border: 1px solid black;">@subvariants[cnt]</th> 
         } 
         <th style="border: 1px solid black;">@subvariants[cnt + 1]</th> 
        } 
       </tr> 
      </thead> 
      <tbody> 

       @for (int m = 0; m < Model.Count; m++) 
       { 
        string subvariants = string.Join(",", Model[m].TestList[0].SubVariantList.Select(cd => cd.Name)); 
        var headers = tableHeaders[i]; 
        if (headers.Contains(subvariants)) 
        { 
         <tr> 
          <td>@Model[m].Variant</td> 
          <td>@Model[m].TestList[0].SubVariantList[0].Value</td> 
          @for (int j = 1; j < Model[m].TestList[0].SubVariantList.Count; j++) 
          { 
           <td>@Model[m].TestList[0].SubVariantList[j].Value</td> 
          } 
         </tr> 
        } 
       } 
      </tbody> 
     </table> 
    } 

</div> 

,536,913 :

A - C 
A - D 

것은이 내 코드입니다

다양한 시나리오와 하위 변이 조합으로 인해이 복잡한 논리에 갇혀 있는지 궁금합니다.

Answer 1

먼저해야 할 일은 (1) 뷰에서 모든 논리를 제거하고 그것이 속한 컨트롤러에 배치하고 (2) 뷰 모델을 사용하여 데이터를 표시 할 방법을 나타내는 것입니다 보기.

로보기 모델은 각 테이블을 생성하는 뷰에 간단한 루프를 사용할 수 있습니다, 그리고 각 테이블에서 행을 각 Variant를 들어, 각 행에 대한

public class TableVM 
{ 
    public TableVM() 
    { 
     Variants = new List<RowVM>(); 
    } 
    public string Title { get; set; } 
    public IEnumerable<string> Headers { get; set; } 
    public List<RowVM> Variants { get; set; } 
    // The following properties are used for 'grouping' your data 
    public string Sequence { get; set; } 
    public bool IsSequential { get; set; } 
    public int MaxColumns { get; set; } 
} 
public class RowVM 
{ 
    public RowVM() 
    { 
     Fluctuations = new List<ColumnVM>(); 
    } 
    public string Variant { get; set; } 
    public List<ColumnVM> Fluctuations { get; set; } 
} 
public class ColumnVM 
{ 
    public decimal Fluctuation { get; set; } 
} 

, 열의해야한다 각 Fluctuation.

@model List<TableVM> 
@foreach(var table in Model) 
{ 
    <h4>@table.Title</h4> 
    @foreach(var row in table.Variants) 
    { 
     <td>@row.Variant</td> 
     @foreach(var column in row.Fluctuations) 
     { 
      <td>@column.Fluctuation</td> 
     } 
    } 
} 

컨트롤러에서 데이터를 루프 처리하고 뷰 모델을 작성하여 뷰로 돌아갑니다.

시퀀스 '그룹'별로 새 테이블을 만드는 문제를 해결하려면 '그룹'(Sequence 속성 : TableVM)을 기반으로 '키'를 만들 수 있습니다.Sequence 아직 존재하지 않는 경우 새 TableVM가, 다른 시퀀스를 ABC과 같은 테이블에 ABCD 등의 문제를 해결하기 위해 새로운 TableVM

을 추가, 당신은 순서의 문자가 있는지 확인하는 방법이 필요합니다 순차적 (IsSequental 속성, TableVM). 당신은 정말

private bool IsSequential(string sequence) 
{ 
    char[] c = sequence.ToCharArray(); 
    return c[0] + c.Length - 1 == c[c.Length - 1]; 
} 

그 또한 유연성과 깨지기 쉬운 디자인을 제안하지만

로, 다음은 간단 이러한 문자를 사용하고, 그리고 당신이 정말로 고려하고 순서/주문에 대한 데이터베이스 int 재산해야합니다.

전체 코드는 여기에 게시하기에는 너무 많지만 표시 한 데이터와 A-B-C-D에 대한 추가 데이터를 바탕으로 this DotNetFiddle이 작동하는 예입니다. 참고 테이블 헤더가 다소 혼란스럽고 바이올린에서 대안을 제안했습니다.