Создание HTML таблицы динамически с некоторой сложностью

Question

Ниже моя структура 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 У меня есть 2 ниже путешествия:

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

Основываясь на приведенной выше структуре JSon я создаю динамический стол, как показано ниже:

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 точки, как показано ниже:

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 

Проблема поставляется с некоторыми комбинациями подвариантов потока, как показано ниже:

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

С выше данных я получаю структуру таблицы, как это:

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

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

Но уже A - B и B - C структура создается в таблице как последовательность правильно, так что будет только одна таблица, как показано ниже:

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

Новая таблица будет создана только тогда, когда будет прыгать, как показано ниже:

A - C 
A - 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> 

Интересно, не застрял ли я в этой сложной логике из-за различных сценариев и комбинации подвариантов.

Answer 1

Первое, что вам нужно сделать, это: (1) удалить всю эту логику из представления и поместить ее в контроллер, где она принадлежит, и (2) использовать модели представления, чтобы представить, как вы хотите отображать данные в вид.

Ваш взгляд модели должны быть

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; } 
} 

, который позволяет использовать простые петли в целях генерации каждой таблицы, и в каждой таблице строку для каждого Variant, и для каждой строки, столбца для каждый 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> 
     } 
    } 
} 

Затем в вашем контроллере проведите через данные и создайте модель представления, чтобы вернуться к представлению.

Чтобы решить проблему создания новой таблицы для каждой группы, вы можете создать «ключ» на основе «группы» (свойство SequenceTableVM).Если Sequence еще не существует, добавить новый TableVM, другой добавить новый TableVM

Для решения вопроса о включении последовательностей ABC и ABCD в той же таблице, вам нужен метод, чтобы определить, если символы в последовательности последовательный (IsSequental объект TableVM). Если вы действительно используете эти символы, то его так же просто, как

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

хотя это также предполагает, негибкую и хрупкую конструкцию, и вы действительно должны рассмотреть и int свойства в базе данных для последовательности/заказа.

Полный код слишком много для публикации здесь, но this DotNetFiddle - это рабочий пример, основанный на данных, которые вы показали, плюс дополнительные данные для последовательности A-B-C-D. Примечание. Я нашел заголовки таблиц немного запутанными и предложил альтернативу в скрипке.