目前，我正在学习剃须刀页面，并且来自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。在上面的示例中，折叠的实体仅出现在底行下方。
1 回答
慕虎7371278
TA贡献1802条经验 获得超4个赞
在您提供的示例的基础上，我想到了一个不同的解决方案，我认为这更简单，并且更适合在网络中使用，首先我在前端使用了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>
- 1 回答
- 0 关注
- 184 浏览
添加回答
举报
0/150
提交
取消