将三级层次结构从集合渲染到 mvc 视图答案

【问题标题】：Render three level hierarchy from collections to mvc view将三级层次结构从集合渲染到 mvc 视图
【发布时间】：2019-08-30 20:01:27
【问题描述】：

我试图在 MVC 视图上表示一个 3 级嵌套集合。

这是我的代码：

<table class="table table-hover" style="vertical-align: middle">
    <tbody>
        @*Accounts*@
        @for (var counterAccount = 0; counterAccount < Model.RecordsToBeSubmitted.Count; counterAccount++)
        {
            var counterAccountSafe = counterAccount;
            <tr>
                <th scope="row">@Model.RecordsToBeSubmitted[counterAccountSafe].Account</th>
                <td>
                    <table class="table">
                        <tbody>
                            @*Locations*@
                            @for (var counterLocation = 0; counterLocation < Model.RecordsToBeSubmitted[counterAccountSafe].Locations.Count; counterLocation++)
                            {
                                var counterLocationSafe = counterLocation;
                                <tr>
                                    <td>@Model.RecordsToBeSubmitted[counterAccountSafe].Locations[counterLocationSafe].Location</td>
                                    <td>
                                        <table class="table">
                                            <tbody>
                                                @*Pay Modes*@
                                                @for (var counterPayMode = 0; counterPayMode < Model.RecordsToBeSubmitted[counterAccountSafe].Locations[counterLocationSafe].PaymentModes.Count; counterPayMode++)
                                                {
                                                    var counterPayModeSafe = counterPayMode;
                                                    <tr>
                                                        <td>@Model.RecordsToBeSubmitted[counterAccountSafe].Locations[counterLocationSafe].PaymentModes[counterPayModeSafe].PaymentMode</td>
                                                        <td>@Model.RecordsToBeSubmitted[counterAccountSafe].Locations[counterLocationSafe].PaymentModes[counterPayModeSafe].BillDetails.Count</td>
                                                    </tr>
                                                }
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </td>
            </tr>
        }
    </tbody>
</table>

这是渲染的内容：

它一点也不像样，但它确实表明了我的目标。我可以访问 Kendo Pivot MVC，但我不需要额外的功能。我只需要以这种形式整齐地显示这些数据。现在，由于嵌套表格，我无法对齐它，也无法使用表格标题

型号：

public class GrpSummaryResult : IBdo
{
    [DataMember]
    public bool IsProcessable { get; set; }

    [DataMember]
    public int TotalBills { get; set; }

    [DataMember]
    public IList<GrpSummaryGroupAccount> Accounts { get; set; }

}

[DataContract(Namespace = Constants.BdoNamespace)]
public class GrpSummaryGroupAccount : IBdo
{
    [DataMember]
    public string Account { get; set; }

    [DataMember]
    public IList<GrpSummaryGroupLocation> Locations { get; set; }

}

[DataContract(Namespace = Constants.BdoNamespace)]
public class GrpSummaryGroupLocation : IBdo
{
    [DataMember]
    public int Location { get; set; }

    [DataMember]
    public IList<GrpSummaryGroupPaymentMode> PaymentModes { get; set; }
}

[DataContract(Namespace = Constants.BdoNamespace)]
public class GrpSummaryGroupPaymentMode : IBdo
{
    [DataMember]
    public int PaymentModeId { get; set; }

    [DataMember]
    public string PaymentMode { get; set; }

    [DataMember]
    public IList<BillInfoDetail> BillDetails { get; set; }
}

[DataContract(Namespace = Constants.BdoNamespace)]
public class BillInfoDetail : IBdo
{
    [DataMember]
    public string BillNumber { get; set; }

    [DataMember]
    public string ServiceName { get; set; }

    [DataMember]
    public decimal Fees { get; set; }

}

更新：

我还引入了平面数据，因为“集合中的集合”（上图）不适合我。

平面数据模型：

[DataContract(Namespace = Constants.BdoNamespace)]
public class BillInfoDetail : IBdo
{
    [DataMember]
    public string FocusReferenceNumber
    {
        get => $"{BillNumber}-{PaymentModeId}";
        private set { }
    }

    ...

    [DataMember]
    public BillInfo Bill { get; set; }

}

public class BillInfo : IBdo
{

    [DataMember]
    public string BillNumber { get; set; }

    [DataMember]
    public int PayModeId { get; set; }

    [DataMember]
    public int CashierId { get; set; }

    [DataMember]
    public string PayMode { get; set; }

    [DataMember]
    public string CustomerCode { get; set; }

    [DataMember]
    public string CustomerName { get; set; }

    [DataMember]
    public string AccountGroup { get; set; }

}

代码：

@(Html.Kendo().PivotConfigurator()
      .Name("configurator")
      .HtmlAttributes(new { @class = "hidden-on-narrow" })
      .Filterable(true)
      .Sortable()
      .Height(580)
)

@(Html.Kendo().PivotGrid<DA.Systems.Focus.Business.BDO.BillInfoDetail>()
      .Name("pivotGrid")
      .HtmlAttributes(new { @class = "hidden-on-narrow" })
      .Filterable(true)
      .Configurator("#configurator")
      .ColumnWidth(120)
      .Height(570)
      .BindTo(Model.FlatData)
      .DataSource(dataSource => dataSource
          .Ajax()
          .Schema(schema => schema
              .Model(m => m.Field("Account", typeof(string)).From("Bill.AccountGroup"))
              .Model(m => m.Field("PaymentMode", typeof(string)).From("Bill.PayMode"))
              .Cube(cube => cube
                  .Dimensions(dimensions =>
                  {
                      dimensions.Add("Account").Caption("Accounts");
                      dimensions.Add(model => model.CashierId).Caption("Location");
                      dimensions.Add("PaymentMode").Caption("Payment Modes");
                  })
                  .Measures(measures => {
                      measures.Add("Bills").Format("{0}").Field(model => model.FocusReferenceNumber).AggregateName("count");
                  })
              ))
          .Columns(columns =>
          {
              columns.Add("Account").Expand(true);
              columns.Add("PaymentMode");
          })
          .Measures(measures => measures.Values("Bills"))
          .Events(e => e.Error("onError"))
      )
)

我确实尝试过使用平面数据的 Kendo PivotGrid MVC：

一点都不喜欢。

【问题讨论】：

请在此处发布您的模型类
@HienNguyen 模型添加

标签： c# asp.net-mvc pivot-table nested-table

【解决方案1】：

我无法按照我希望 UI 明智的方式找到解决方案。因此，我找到了一个名为 jqRowSpanizer 的 JavaScript 库。我发送了平面数据并使用该库逐行合并相同的值并获得了所需的结果。

【讨论】：