.Net Core 2.0 具有 Razor 页面的向下钻取功能答案

【问题标题】：.Net Core 2.0 Drill down functionality w/ Razor Pages.Net Core 2.0 具有 Razor 页面的向下钻取功能
【发布时间】：2018-10-06 08:04:28
【问题描述】：

目前我正在学习 razor pages 并且来自 WPF 背景。

我正在以行格式显示一些数据，但想创建如下钻取格式：http://jsfiddle.net/zey3h41o/

我可以从一个模型创建顶级数据的摘要，然后创建一个向下钻取功能，显示数据结构的子条目，例如：

List<Tuple<HighLevelOutput, List<HighLevelOutput>>>

还有模特

    public struct HighLevelOutput
    {
    public string CorpCustomer { get; set; }
    public string Item { get; set; }
    public string ItemDescription { get; set; }
    public double SummedOrder  { get; set; }
    public double SummedForecast { get; set; }
    public int Week { get; set; }
    public double Difference { get; set; }
    public string UoM { get; set; }
    }

我的剃刀页面：

@page
@model DemandControlTool.Pages.CalculateLogModel
@{
ViewData["Title"] = "CalculateLog";
}

<h3>Abnormal Demand</h3>

<table class="table">
    <thead>
        <tr>
            <th></th>
            <th>
                @Html.DisplayNameFor(model => model.ReportHighLevel[0].CorpCustomer)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ReportHighLevel[0].Item)
            </th>
            <th class="text-center">
                @Html.DisplayNameFor(model => model.ReportHighLevel[0].SummedOrder)
            </th>
            <th class="text-center">
                @Html.DisplayNameFor(model => model.ReportHighLevel[0].SummedForecast)
            </th>
            <th class="text-center">
                @Html.DisplayNameFor(model => model.ReportHighLevel[0].Difference)
            </th>
        </tr>
    </thead>
</table>

<table class="log">
    <thead class="log">
        @foreach (var item in Model.DropDownAllOrders)
    {
        <tr>
            <th>
                @Html.DisplayFor(modelItem => item.Item1.Item)
            </th>
            <th>
                @Html.DisplayFor(modelItem => item.Item1.ItemDescription)
            </th>
            <th>
                @Html.DisplayFor(modelItem => item.Item1.CorpCustomer)
            </th>
            <th class="text-center">
                @Html.DisplayFor(modelItem => item.Item1.SummedOrder)
            </th>
            <th class="text-center">
                @Html.DisplayFor(modelItem => item.Item1.SummedForecast)
            </th>
            <th class="text-center">
                @Html.DisplayFor(modelItem => item.Item1.Difference)
            </th>
        </tr>
}
    </thead>
    <tbody class="collapsed">
        <tr><td>Drill Down Data</td></tr>
        <tr><td>Drill Down Data</td></tr>
    </tbody>
</table>

我遇到的问题是填充表格，在该表格中我可以在每行下方放置折叠条目。以我一直在使用它的方式，我需要为列表中的每个对象定义一个单独的行。我希望那里的正文类有每个摘要行的列表。

在上面的示例中，折叠的正文仅显示在底行下方。

更新编辑：

 @page
@model DemandControlTool.Pages.CalculateLogModel
@{
    ViewData["Title"] = "CalculateLog";
}


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/bootstrap.css" rel="stylesheet" />
    <title>Data page</title>
</head>
<body>
    <div class="container">
        <div id="accordion">
            @{int counter = 0; }
            @foreach (var dataVM in Model.CollapseReport)
            {
                <div class="card">
                    <div class="card-header" id="heading@(counter)">
                        <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" 
    data-target="#collapse@(counter)" aria-expanded="true" aria- 
    controls="collapse@(counter)">
                                @dataVM.ToString()
                            </button>
                        </h5>
                    </div>

                    <div id="collapse@(counter)" class="collapse" aria- 
   labelledby="heading@(counter)" data-parent="#accordion">
                        <div class="card-body">
                            <ul class="list-group">
                                @foreach (var item in dataVM.WeeksOfData)
    {
                            <li class="list-group-item col-xs-6">@item.Item</li>
                            <li class="list-group-item col-xs-6">@item.ItemDescription</li>
                            <li class="list-group-item col-xs-6">@item.CorpCustomer</li>
                            <li class="list-group-item col-xs-6">@item.Difference</li>
                            <li class="list-group-item col-xs-6">@item.Week</li>

}
                            </ul>
                        </div>
                    </div>
                </div>
                counter++;
            }
        </div>
    </div>
    <script src="~/jquery.min.js"></script>
    <script src="~/bootstrap.bundle.min.js"></script>
</body>
</html>

【问题讨论】：

标签： c# asp.net-core-2.0 razor-pages

【解决方案1】：

根据您提供的示例，我为您的问题考虑了一个不同的解决方案，在我看来，它更简单，更适合网络，首先我在我的内部使用了 JQuery 和 Bootstrap v.4前端代码，然后我使用了两个组件，它们是：

之后，我为我的数据形状创建了一个视图模型，其中包含一个带有项目列表的标题（我仅使用字符串进行演示），如下所示：

public class DataViewModel
{
    public string Title { get; set; }
    public IEnumerable<string> Data { get; set; }
}

并创建一个索引，如下所示（只是为了填充一些数据并将其传递给视图：

        public IActionResult Index()
    {
        var pageViewModel = new List<DataViewModel>()
        {
            new DataViewModel()
            {
                Title="First data tab",
                Data=new string []{"Item 1","Item 2","Item 3"}
            },
            new DataViewModel()
            {
                Title="Second data tab",
                Data=new string []{"Item 1","Item 2","Item 3"}
            }
        };
        return View(pageViewModel);
    }

最后视图代码如下：

@model IEnumerable<ProgrammerGallery.Controllers.DataViewModel>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/bootstrap.min.css" rel="stylesheet" />
    <title>Data page</title>
</head>
<body>
    <div class="container">
        <div id="accordion">
            @{int counter = 0; }
            @foreach (var dataVM in Model)
            {
                <div class="card">
                    <div class="card-header" id="heading@(counter)">
                        <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse@(counter)" aria-expanded="true" aria-controls="collapse@(counter)">
                                @dataVM.Title
                            </button>
                        </h5>
                    </div>

                    <div id="collapse@(counter)" class="collapse show" aria-labelledby="heading@(counter)" data-parent="#accordion">
                        <div class="card-body">
                            <ul class="list-group">
                                @foreach (var item in dataVM.Data)
                                {
                                    <li class="list-group-item">@item</li>

                                }
                            </ul>
                        </div>
                    </div>
                </div>
                counter++;
            }
        </div>
    </div>
    <script src="~/jquery.min.js"></script>
    <script src="~/bootstrap.bundle.min.js"></script>
</body>
</html>

最后的结果是：

第二版（页面呈现时的可折叠项并排显示实体数据而不是字符串数据）：

实体类：

public class Entity
{
    public string Name { get; set; }
    public string BriefDescription { get; set; }
    public double Price { get; set; }
}

查看模型类：

public class DataViewModel
{
    public string Title { get; set; }
    public IEnumerable<Entity> Data { get; set; }
}

动作：

        public IActionResult Index()
    {
        var pageViewModel = new List<DataViewModel>()
        {
            new DataViewModel()
            {
                Title="First data tab",
                Data=new List<Entity>()
                {
                    new Entity()
                    {
                        Name="First item",
                        BriefDescription="My description",
                        Price=1000
                    },
                    new Entity()
                    {
                        Name="Second",
                        BriefDescription="My description",
                        Price=500
                    },
                    new Entity()
                    {
                        Name="Third",
                        BriefDescription="My description",
                        Price=1000
                    }
                }
            },
            new DataViewModel()
            {
                Title="Second data tab",
                Data=new List<Entity>()
                {
                    new Entity()
                    {
                        Name="First item",
                        BriefDescription="My description",
                        Price=1000
                    },
                    new Entity()
                    {
                        Name="Second",
                        BriefDescription="My description",
                        Price=500
                    },
                    new Entity()
                    {
                        Name="Third",
                        BriefDescription="My description",
                        Price=1000
                    }
                }
            }
        };
        return View(pageViewModel);
    }

最后是剃须刀代码：

    @model IEnumerable<ProgrammerGallery.Controllers.DataViewModel>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/bootstrap.min.css" rel="stylesheet" />
    <title>Data page</title>
</head>
<body>
    <div class="container">
        <div id="accordion">
            @{int counter = 0; }
            @foreach (var dataVM in Model)
            {
                <div class="card">
                    <div class="card-header" id="heading@(counter)">
                        <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse@(counter)" aria-expanded="true" aria-controls="collapse@(counter)">
                                @dataVM.Title
                            </button>
                        </h5>
                    </div>

                    <div id="collapse@(counter)" class="collapse" aria-labelledby="heading@(counter)" data-parent="#accordion">
                        <div class="card-body">
                            <ul class="list-group">
                                @foreach (var item in dataVM.Data)
                                {
                                    <li class="list-group-item">@($"Name :{item.Name}, {item.BriefDescription}, {item.Price}$")</li>
                                }
                            </ul>
                        </div>
                    </div>
                </div>
                counter++;
            }
        </div>
    </div>
    <script src="~/jquery.min.js"></script>
    <script src="~/bootstrap.bundle.min.js"></script>
</body>
</html>

【讨论】：

我已经让这个大部分工作，只是几个问题，我希望它们默认折叠，当我折叠和展开时，项目 1 接管标题并且它消失了，并且因为我有更多的列表我正在为列表类的所有元素制作列宽
嘿，马特，对于第一个问题，您需要从卡体 div "
"，关于你的第二个问题，我没有完全理解，所以如果你能提供给我一个截图，如果发生了什么，请把问题标记为正确如果你觉得它有用:)
有屏幕截图，你看到我的班级有多个列，我想按行项目显示，但它堆叠它们，然后下一个元素进入我需要它是顶级项目1.detail Item 1.detail Item 2.detail Item 2.detail Next Top Level
您的问题主要是剃须刀内的html数据格式，我会更新我的答案以满足您的需求
感谢您的帮助 - 涉足网络开发对我来说是一种全新的体验，让我看看这个并将您标记为答案