動態顯示一個視圖中的多個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&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中。

來源

2017-10-21 Chris

你解決了你的問題嗎？如果其中一個幫助你，你能否給出答案？ – GGO

在這裏你有兩個三個主要選項。對於第三個（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&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 
    $('#[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&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('#[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' } 
      ] 
     } 
    }

來源

2017-10-21 15:59:38 Wndrr

你正在創建循環內的表。你可以簡單地用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> 

    } 
})

來源

2017-10-21 16:00:33 Shyju

動態顯示一個視圖中的多個JSON表

回答

相關問題