带Razor页面的.Net Core 2.0向下钻取功能
目前，我正在学习剃须刀页面，并且来自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>
我遇到的问题是填充表格，在该表格中我可以在每行下方放置折叠的条目。以我一直在使用的方式，我需要为列表中的每个对象单独定义一行。我希望那里的body类为每个摘要行提供List。
在上面的示例中，折叠的实体仅出现在底行下方。
MYYA浏览 185回答 1
1回答
-
慕虎7371278
在您提供的示例的基础上，我想到了一个不同的解决方案，我认为这更简单，并且更适合在网络中使用，首先我在前端使用了JQuery和Bootstrap v.4代码，那么我使用了两个组件：清单群组坍塌之后，我为数据形状创建一个视图模型，其中包含一个带有项目列表的标题（我仅将字符串用于演示），如下所示：public class DataViewModel{ public string Title { get; set; } public IEnumerable<string> Data { get; set; }}并创建一个Index动作，如下所示（只是填充一些数据并将其传递给视图： 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>
随时随地看视频慕课网APP
相关分类
C#