Wie kann ich AJAX mit Webmethoden verwenden, um JSON-Objekte mithilfe von asp.net an eine jQuery-DataTable zu senden?

So habe ich die jQuery Datentabelle mit AJAX, um für den JSON in diesem Format aufzurufen.Wie kann ich AJAX mit Webmethoden verwenden, um JSON-Objekte mithilfe von asp.net an eine jQuery-DataTable zu senden?

$(document).ready(function() { 

      $('#test').DataTable({ 
       ajax:{ 
        url:"players.json", 
        dataSrc:"" 
        }, 
       columns: [ 
        {data: "id"}, 
        { data: "player" }, 
        { data: "points" }, 
        { data: "steals" }, 
        { data: "blocks" }, 
        { data: "assists" }, 
        { data: "MPG" }, 
        { data: "shot %" }, 
        { data: "3 %" } 
       ] 


      }); 
     });

Meine aspx.cs Datei hat eine Methode, um die JSON-Datei zu erstellen, die funktioniert.

[System.Web.Services.WebMethod] 
     public static void loadTable() 
     { 
      NBAPlayerRepository players = new NBAPlayerRepository(); 
      DataTable dt = players.GetAll(); 
      var json = dt.ToJson(); 
      System.IO.File.WriteAllText(@"C:\Users\wheres\Downloads\nbaStats\nbaStats\nbaStats\players.json", json); 
     }

Und die JSON sieht wie folgt aus:

[{"id" : "67926aa7-46b7-4418-96db-fc7e5216aac4","playername" : "Wilson Heres","points" : "34534","steals" : "34","blocks" : "34","assists" : "343","mpg" : "343","shootingpercentage" : "33.3429985046387","threepointpercentage" : "33.3429985046387"} 
,{"id" : "6dc42e0b-8750-463d-a9ef-5a025a27154b","playername" : "Wilson Heres","points" : "34534","steals" : "34","blocks" : "34","assists" : "343","mpg" : "343","shootingpercentage" : "33.3429985046387","threepointpercentage" : "343.334014892578"} 
,{"id" : "f727130c-5b94-4730-a653-cfb603c73b8a","playername" : "Wilson Heres","points" : "34534","steals" : "34","blocks" : "34","assists" : "343","mpg" : "343","shootingpercentage" : "33.3429985046387","threepointpercentage" : "343.334014892578"} 
]

Aber jetzt erhalte ich diesen Fehler "jquery.dataTables.min.js: 48 Uncaught Typeerror: kann Eigenschaft 'Länge' undefinierter lesen"

Edit: Das alles funktioniert jetzt. Gerade hatte DATASRC hinzufügen: „“

Quelle

2016-07-05 hereswilson

Was meinen Sie mit "einen leeren Bildschirm bekommen"? Wird überhaupt nichts angezeigt (eine weiße Seite) oder sind Ihre Daten nicht korrekt? Ein unmittelbares Problem ist auch, dass Sie und Tags innerhalb Ihrer

haben müssen. –

@ChrisH. Ja, überhaupt ist gar nichts zu sehen. Keine Ahnung, warum das passieren würde. Sie tun das nicht [hier] (http://stackoverflow.com/questions/9669812/how-cani-i-use-a-local-json-object-as-a-data-source-for-jquery-datatables) und es funktioniert. Überprüfen Sie die jsfiddle für ein Beispiel. – hereswilson

Eine Sache, die zu diesem Beispiel zu beachten ist, ist, dass es auf einer älteren Version von DataTables basiert (daher das aaData anstelle von Daten usw.). Wenn Sie 1.10.x verwenden, möchten Sie nur die Tags 'data' und' columns' ohne ungarische Notation verwenden. Wie bei diesem verknüpften Beispiel wird der HTML-Code überhaupt nicht angezeigt. Daher werden die Tags

und nicht angezeigt. Du brauchst sie definitiv im HTML: [link] (https://datatables.net/forums/discussion/comment/71334/#Comment_71334) –

Antwort

aufgeräumte Version Ihrer Tables Initialisierung

$(document).ready(function() { 

     $('#test').DataTable({ 
      ajax: { 
       url: "players.aspx/loadTable" 
      }, 
      columns: [ 
       { data: "id" }, 
       { data: "player" }, 
       { data: "points" }, 
       { data: "steals" }, 
       { data: "blocks" }, 
       { data: "assists" }, 
       { data: "MPG" }, 
       { data: "Shot %" }, 
       { data: "3 %" }, 
      ] 

    }); 
});

Dieses wie eine Menge Sachen aus dem Code entfernt zu sein scheint, so lassen Sie mich einige Erklärungen machen/Annahmen darüber, was geändert wurde.

Annahmen

Zuerst wird eine Annahme: Tables werden immer versuchen, eine GET Anfrage zu bedienen, keine POST, wenn zuerst die Daten aus der Tabelle zu bekommen, so stellen Sie sicher, dass Ihre Datenverarbeitungs Code erwartet, dass .
Ich nehme auch an, dass Sie kein starkes Verlangen haben, Ihr Ajax von Ihrer Initialisierung getrennt zu haben, und das war nur, wie Sie sich entschieden haben, es als ein erster Versuch zu tun. Wenn das der Fall ist, lass es mich wissen und ich werde den Code aktualisieren, um dem zu entsprechen.

Erklärung

Ihre Formatierung in einigen Bereichen nicht korrekt ist und gegen Tables in anderen Standard, so dass diese Version sollte die meisten tun, was Sie in einer viel einfacheren Form vorhatten. Viele Ihrer Ajax-Optionen sind nicht erforderlich, da sie bereits die Standardeinstellung sind (z. B. JSON für den Datentyp). Aus diesem Grund wurden sie entfernt.

Eine nette Sache über DataTables ist, dass Sie die Ajax-Optionen in der Initialisierung haben können, was ich hier getan habe. Sie verlieren zwar die Erfolgs- und Misserfolg-Callbacks, aber ich denke, dass sie für Debugging-Zwecke nicht wirklich notwendig sind und zusätzlicher Code die Anzahl der zu debuggenden Sachen erhöht (ich benutze diese Callbacks nicht einmal in meinem letzten Code).

Die meisten anderen Änderungen waren vor allem falsche Nomenklatur (zB data statt title in den Spaltendefinitionen.

Haftungsausschluss

Während ich diese Änderungen in der Regel empfehlen würde nur den Code zu verbessern, ich Wenn Sie nicht wissen, wie das geht, würde ich empfehlen, Fiddler herunterzuladen, um die JSON-Daten, die gesendet werden, anzuhören .

Wenn Ihr JSON falsch ist, werden keine Änderungen an der Seite die Tabelle erscheinen lassen.

Schließlich stellen Sie sicher, dass Sie keine JS-Fehler auf der Seite haben. Verwenden Sie die Entwicklerkonsole Ihres Browsers (F12), um dies zu überprüfen.

Wenn Sie irgendwelche JS Fehler finden, posten Sie sie in Ihrer Frage. Ich würde auch empfehlen, die gesendeten JSON-Daten ebenfalls an die Frage zu senden, damit wir sicherstellen können, dass das Format korrekt ist.

Quelle

2016-07-05 20:53:48

yeah mein JSON ist durcheinander, aber dein Fix versucht tatsächlich jetzt einen zu bekommen, also habe ich wenigstens ein Problem weniger. Danke für Ihre Hilfe. – hereswilson

gut funktioniert die Webmethode zum Erstellen des JSON-Objekts, aber die Jquery ruft es nicht auf. Also muss ich die loadTable-Methode erstellen eine Datei erstellen, damit die DataTable darauf zugreifen kann? – hereswilson

ok, also habe ich die Daten in eine Datei laden und die jQuery danach fragen. Ich werde die Frage mit der Formatierung des JSON aktualisieren. – hereswilson

Wie kann ich AJAX mit Webmethoden verwenden, um JSON-Objekte mithilfe von asp.net an eine jQuery-DataTable zu senden?

Antwort

Verwandte Themen