Question

我有以下情况：我有一个视图来显示多个JSON数据表。目前，我使用@foreach生成HTML标记，并为每个JSON数据表使用单独的jscript函数。

结果应该是，动态生成完整视图：

<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="FachlID_@fc.Shop_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&nbsp;<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。

Answer 1

这里有两个三个主要选项。对于第三个（最好的一个），请参阅@ 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="FachlID_@fc.Shop_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&nbsp;<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
    $('#FachlID_@fc.Shop_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函数

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="FachlID_@fc.Shop_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&nbsp;<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('#FachlID_@fc.Shop_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' }
            ]
        }
    }

Answer 2

您正在循环中创建表。您可以使用jQuery选择器循环遍历那些并获取所需的信息。您可以在数据属性中设置Id值。

为了简化jQuery选择器，我会在你的表中添加一个css类

foreach (var fc in Model)
{
  <table id="FachlID_@fc.Shop_ID" data-id="@fc.Shop_ID" class="my-json-tbl table" >
    <!-- Your other code for headers-->
  </table>
}

现在准备好文档，使用my-json-tbl类获取所有表并读取data-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＃循环表达式。当razor执行代码时，它将为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>

    }
})

动态地在一个视图中的多个JSON表

2 个答案: