目前我正在学习剃刀页面并且来自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>
我遇到的问题是填充表格,我可以在每行下面放置折叠条目。在我玩它的方式中,我需要为列表中的每个对象分别定义一行。我希望那里的正文类能够为每个摘要行添加List。
在上面的示例中,折叠的正文仅显示在底行。
更新了编辑:
@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>
答案 0 :(得分:3)
根据您提供的示例,我考虑了针对您的问题的不同解决方案,在我看来更简单,更适合在Web中更好,首先我在我的内部使用了JQuery和Bootstrap v.4前端代码,然后我使用了两个组件:
之后我为我的数据形状创建了一个视图模型,其中包含一个带有项目列表的标题(我只使用字符串进行演示),如下所示:
tools/
创建一个索引动作如下(只是为了填充一些数据并将其传递给视图:
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);
}