asp.net MVC 中嵌套表视图中级别 3 子子项的问题
Posted
技术标签:
【中文标题】asp.net MVC 中嵌套表视图中级别 3 子子项的问题【英文标题】：Issue on level 3 sub child in Nested table-View in asp.net MVC 【发布时间】：2021-11-22 09:15:33 【问题描述】：我已经在我的项目中使用嵌套表视图到第二级它运行良好，但问题是当我添加第三级子子时。当我单击 2 级子子按钮以展开 3 级子子视图时，它只是折叠表格。基本上，这个想法是每个客户都有一些销售 ID，它显示在第二级子子嵌套表中，并且在每个销售 ID 下，有一些我想在第三级子子嵌套表中显示的项目。请帮我解决这个问题。我在这里做错了什么？ In the picture you can see the nested table view up to 2nd level sub child
<script type="text/javascript">
$(document).ready(function ()
$('.parentTable.table .accordian-body').on('show.bs.collapse', function ()
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
)
$('.subTable.table .accordian-body').on('show.bs.collapse', function ()
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
)
$('.bb').on('click', function (e)
$('.bb').toggleClass("bb glyphicon glyphicon-minus"); //you can list several class names
e.preventDefault();
);
$('.subbutton').on('click', function (e)
$('.subbutton').toggleClass("bb glyphicon glyphicon-minus"); //you can list several class names
e.preventDefault();
);
);
</script><style>
.hiddenRow
padding: 0 !important;
</style>@model IEnumerable<DEtelecom.ViewModel.VmCustomerModel>
@
ViewBag.Title = "Customer Sales Information";
WebGrid grid = new WebGrid(source: Model, canSort: false);
<div class="panel-body table-responsive">
<table class="customTable table table-hover parentTable">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Customer Name
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Total Amount
</th>
</thead>
<tbody>
@foreach (var item in Model)
<tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#AA_@(item.ID)">
<td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button class="bb glyphicon glyphicon-chevron-down" id="togglerow" type="button">
</button>
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@html.Raw(item.CustomerName)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("0:C", item.TotalAmount))
</td>
</tr>
<tr>
<td class="hiddenRow t" colspan=3>
<div class="accordian-body collapse table-responsive" id="AA_@(item.ID)">
<table class="table table-hover subTable">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Sales Number
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Bstnr
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Creation Date
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Due Dtae
</th>
<tbody>
@foreach (var sales in item.SalesList)
<tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#AA_@(item.ID)">
<td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button class="subbutton glyphicon glyphicon-chevron-down" id="subtogglerow" type="button"></button>
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(sales.SalesID)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(sales.Bstnr)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("0:d", sales.CreationDate))
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("0:d", sales.DueDate))
</td>
</tr>
<tr>
<td class="hiddenRow t" colspan=5>
<div class="accordian-body collapse table-responsive" id="AA_@(item.ID)">
<table class="table table-hover subTable">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
Item Description
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Quantity
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Unit Price
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Amount
</th>
<tbody>
@foreach (var items in sales.ItemList)
<tr class="d-flex">
<td scope="row" class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
@Html.Raw(items.Description)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(items.Quantity)
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("0:C", items.UnitPrice))
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("0:C", items.Amount))
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>【问题讨论】：
【参考方案1】：您似乎为第三级子表添加了一个新的<tr>。所以请在<td> 中添加一个嵌套的子表来扩展它。
【讨论】：
【参考方案2】：我错误地在两个“数据目标”行中输入了相同的 ID。应该是两个 属于子行的不同 ID。我在下面分享功能齐全的代码：
<script type="text/javascript">
$(document).ready(function ()
$('.parentTable .accordian-body').on('show.bs.collapse', function ()
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
)
$('.subTable.table .accordian-body').on('show.bs.collapse', function ()
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
)
);
function btnToggleClass()
$('#togglerow').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
function btn2ToggleClass()
$('#subtogglerow').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
</script>table.customTable
table-layout: auto !important;
width: 100% !important;
border-collapse: collapse !important;
margin-bottom: 10%;
table.table-fit
width: 100% !important;
table-layout: auto !important;
table.table-fit thead th, table.table-fit tfoot th
width: auto !important;
table.table-fit tbody td, table.table-fit tfoot td
width: auto !important;
th
background-color: black;
color: white;
> Mistakenly I put same ID in both 'data-target' row. It should be two
> different ID that belongs to the child row.
<div class="panel-body table-responsive">
<table class="customTable table table-hover parentTable">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Customer Name
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Total Amount
</th>
</thead>
<tbody>
@foreach (var item in Model)
<tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#AA_@(item.ID)">
<td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button class="bb glyphicon glyphicon-chevron-down" id="togglerow" type="button" onclick="btnToggleClass()" >
</button>
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(item.CustomerName)
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("0:C", item.TotalAmount))
</td>
</tr>
<tr>
<td class="hiddenRow t" colspan=3>
<div class="accordian-body collapse table-responsive" id="AA_@(item.ID)">
<table class="table table-hover subTable" style="width:90%;margin-top:10px;" align="center">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Sales Number
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Bstnr
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Creation Date
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Due Dtae
</th>
<tbody>
@foreach (var sales in item.SalesList)
<tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#AA_@(sales.SalesID)">
<td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button class="subbutton glyphicon glyphicon-chevron-down" id="subtogglerow" type="button" onclick="btn2ToggleClass()"></button>
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(sales.SalesID)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(sales.Bstnr)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("0:d", sales.CreationDate))
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("0:d", sales.DueDate))
</td>
</tr>
<tr>
<td class="hiddenRow t" colspan=5>
<div class="accordian-body collapse table-responsive" id="AA_@(sales.SalesID)">
<table class="table table-hover subSubTable" style="width:90%;margin-top:10px;" align="center">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
Item Description
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Quantity
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Unit Price
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Amount
</th>
<tbody>
@foreach (var items in sales.ItemList)
<tr class="d-flex">
<td scope="row" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
@Html.Raw(items.Description)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(items.Quantity)
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("0:C", items.UnitPrice))
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("0:C", items.Amount))
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>【讨论】：
【参考方案3】：修复id，你绑定了错误的id。
【讨论】：
以上是关于asp.net MVC 中嵌套表视图中级别 3 子子项的问题的主要内容，如果未能解决你的问题，请参考以下文章
通过 ASP.NET MVC 在 C# 视图中遍历匿名对象的嵌套 LINQ 查询
在 ASP.Net MVC (LINQ) 中将嵌套数据从控制器传递到视图
ASP.NET MVC 表单提交多层子级实体集合数据到控制器中