动态显示一个视图中的多个JSON表
问题描述：
我有以下情况：我有一个显示多个JSON数据表的视图。目前，我使用@foreach生成HTML标记，并为每个JSON数据表使用单独的jscript函数。动态显示一个视图中的多个JSON表
的结果应该是，生成动态的完整视图：
<div class="content animate-panel">
@{
foreach (var fc in Model)
{
<div class="row">
<div class="col-lg-12">
<div class="hpanel">
<div class="panel-heading">
<div class="panel-tools">
<a class="showhide"><i class="fa fa-chevron-up"></i></a>
<a class="closebox"><i class="fa fa-times"></i></a>
</div>
Auszahlungen @fc.Name
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="[email protected]_ID" class="display table table-bordered" width="100%">
<thead>
<tr>
<th>Datum</th>
<th align="right">Umsatz</th>
<th>Anteil 's Fachl</th>
<th>Rabatt <span style="margin-left: 2px;" class="fa fa-question-circle" title="Hier hat der Fachlmeister auf die 10% Umsatzprovision verzichtet und 10% Rabatt dem Endkunden gegeben."></span></th>
<th>ausbezahlter Betrag</th>
<th>Details/Drucken</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
}
}
</div>
脚本：
$(function() {
// JSON data
var chartDataUrl_1 = '@Url.Action("tableJsonDataAbrechnung", "FachlViews", new { fid = "1"})';
// Tabelle für den Standort Wien
$('#FachlID_1').dataTable({
language: {
"zeroRecords": "Keine Daten gefunden",
"lengthMenu": "Zeige _MENU_ Datensätze",
"search": "Suche:",
"paginate": {
"first": "Anfang",
"last": "Ende",
"next": "Weiter",
"previous": "Zurück"
},
},
"ajax": chartDataUrl_1,
dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp",
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
buttons: [
//{ extend: 'copy', className: 'btn-sm' },
//{ extend: 'csv', title: 'ExampleFile', className: 'btn-sm' },
//{ extend: 'pdf', title: 'ExampleFile', className: 'btn-sm' },
{ extend: 'print', className: 'btn-sm' }
]
});
谁能帮助我获得动态相应参数
{ fid = "1" }
到
@fc.Shop_ID
在foreach中。
答
在这里你有两个三个主要选项。对于第三个（TBH最好的之一）看到@ Shyju的答案
最简单的一种是只把你的JavaScript中的循环内，像这样
foreach (var fc in Model)
{
<div class="row">
<div class="col-lg-12">
<div class="hpanel">
<div class="panel-heading">
<div class="panel-tools">
<a class="showhide"><i class="fa fa-chevron-up"></i></a>
<a class="closebox"><i class="fa fa-times"></i></a>
</div>
Auszahlungen @fc.Name
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="[email protected]_ID" class="display table table-bordered" width="100%">
<thead>
<tr>
<th>Datum</th>
<th align="right">Umsatz</th>
<th>Anteil 's Fachl</th>
<th>Rabatt <span style="margin-left: 2px;" class="fa fa-question-circle" title="Hier hat der Fachlmeister auf die 10% Umsatzprovision verzichtet und 10% Rabatt dem Endkunden gegeben."></span></th>
<th>ausbezahlter Betrag</th>
<th>Details/Drucken</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
$(function()
{
// JSON data
var chartDataUrl_1 = '@Url.Action("tableJsonDataAbrechnung", "FachlViews", new { fid = "@fc.Shop_ID"})';
// Tabelle für den Standort Wien
$('#[email protected]_ID').dataTable(
{
language:
{
"zeroRecords": "Keine Daten gefunden",
"lengthMenu": "Zeige _MENU_ Datensätze",
"search": "Suche:",
"paginate":
{
"first": "Anfang",
"last": "Ende",
"next": "Weiter",
"previous": "Zurück"
},
},
"ajax": chartDataUrl_1,
dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp",
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
buttons:
[
//{ extend: 'copy', className: 'btn-sm' },
//{ extend: 'csv', title: 'ExampleFile', className: 'btn-sm' },
//{ extend: 'pdf', title: 'ExampleFile', className: 'btn-sm' },
{ extend: 'print', className: 'btn-sm' }
]
});
}
，但我不认为这是因为你的JavaScript代码会得到重复的最佳解决方案。
相反，你可能想使用JavaScript functing像这样
foreach (var fc in Model)
{
<div class="row">
<div class="col-lg-12">
<div class="hpanel">
<div class="panel-heading">
<div class="panel-tools">
<a class="showhide"><i class="fa fa-chevron-up"></i></a>
<a class="closebox"><i class="fa fa-times"></i></a>
</div>
Auszahlungen @fc.Name
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="[email protected]_ID" class="display table table-bordered" width="100%">
<thead>
<tr>
<th>Datum</th>
<th align="right">Umsatz</th>
<th>Anteil 's Fachl</th>
<th>Rabatt <span style="margin-left: 2px;" class="fa fa-question-circle" title="Hier hat der Fachlmeister auf die 10% Umsatzprovision verzichtet und 10% Rabatt dem Endkunden gegeben."></span></th>
<th>ausbezahlter Betrag</th>
<th>Details/Drucken</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
$(function()
{
callAjax('#[email protected]_ID', '@Url.Action("tableJsonDataAbrechnung", "FachlViews", new { fid = "@fc.Shop_ID"})');
});
}
function callAjax(id, url)
{
// JSON data
var chartDataUrl_1 = url;
// Tabelle für den Standort Wien
$(id).dataTable(
{
language:
{
"zeroRecords": "Keine Daten gefunden",
"lengthMenu": "Zeige _MENU_ Datensätze",
"search": "Suche:",
"paginate":
{
"first": "Anfang",
"last": "Ende",
"next": "Weiter",
"previous": "Zurück"
},
},
"ajax": chartDataUrl_1,
dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp",
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
buttons:
[
//{ extend: 'copy', className: 'btn-sm' },
//{ extend: 'csv', title: 'ExampleFile', className: 'btn-sm' },
//{ extend: 'pdf', title: 'ExampleFile', className: 'btn-sm' },
{ extend: 'print', className: 'btn-sm' }
]
}
}
答
你正在创建循环内的表。你可以简单地用jQuery选择器遍历这些选择器并获得你需要的信息。您可以在数据属性中设置Id值。
为了让jQuery选择简单的，我会在文档准备添加CSS类到表现在
foreach (var fc in Model)
{
<table id="[email protected]_ID" data-id="@fc.Shop_ID" class="my-json-tbl table" >
<!-- Your other code for headers-->
</table>
}
，让所有的表与我-JSON-TBL类和读取数据-ID值。
$(function() {
var baseUrl = '@Url.Action("tableJsonDataAbrechnung","FachlViews")';
$(".my-json-tbl").each(function(i, item) {
var id = $(item).data("id");
var url = baseUrl + '?fid=' + id;
console.log(url);
//do something with the url, perhaps call data table here on $(item)
});
})
另一种选择是在javascript中使用C＃循环表达式。当剃须刀执行代码时，它将为Model集合中的每个项目生成JavaScript。
$(function() {
@foreach (var item in Model)
{
<text>
var url = '@Url.Action("tableJsonDataAbrechnung","FachlViews",
new {fid=item.Shop_ID})';
console.log(url);
//do something with this.
</text>
}
})
你解决了你的问题吗？如果其中一个帮助你，你能否给出答案？ – GGO