Dieser Artikel wurde maschinell übersetzt.

Datenpunkte

OData und Slice and Dice mit dem jQuery-DataTables-Plug-In

Julie Lerman

Downloaden des Codebeispiels

Die Open Data Protocol (OData) können Daten Erzeuger Ihre Daten über das Web in einem gemeinsamen Format bereitstellen, die von jedem Benutzer mithilfe eines HTTP-fähige Technologie beansprucht werden kann. Daten über URIs bereitgestellt werden und die allgemeinen HTTP-Verben können – GET, PUT, buchen, ZUSAMMENFÜHREN und Löschen – mit den Daten interagieren. Sie können diese Aktivität direkt über eine Sprache wie JavaScript oder indem Sie eine Client-API, z. B. behandeln die Microsoft .NET Framework, Silverlight, PHP oder andere Benutzer von Microsoft bereitgestellt. In beiden Fällen können Sie mit allen OData-Feeds in gleicher Weise interagieren.

Es gibt eine wachsende Zahl von öffentlich bereitgestellten OData-Dienste wie kommerzielle Feeds von Netflix Inc. und eBay Inc., World Cup-Daten sogar einen Dienst, der 150 Jahre Baseball-Statistik liefert.

Zugreifen auf Daten wird immer leichter und einfacher, aber was darstellen der Daten? Wenn Sie 150 Jahre lohnt Baseball Stats oder Tausende von Filmtiteln haben, besteht weiterhin bemüht abzurufen, und Navigieren durch alle diese Daten auf dem Client.

Bei einer kürzlich Vermont.NET User Group-Präsentation auf jQuery, war ich inspiriert durch ein Plugin jQuery als Datentabellen bezeichnet eine Low-Investitionen Möglichkeit al Low Benutzern Filtern und Abrufen große Datenmengen. Die DataTables liegt in seiner blazingly schnell clientseitige Verarbeitung, obwohl es zulässt, dass Sie interaktivere mit den serverseitigen Code sein, wenn Sie wünschen.

JQuery ist eine Client-Side Webtechnologie (und in jede Art von Web-Anwendung verwendet werden kann), vereinfacht die Arbeit mit JavaScript. Wenn Sie niemandem gesprochen haben, die auf die jQuery Zug aufspringen gesprungen wird, finden Sie viel Leidenschaft für die Technologie. DataTables ist eine riesige Anzahl von jQuery-Plug-ins. Sie verwenden und jQuery in jede Art von Web-Anwendung.

Wie ich die meisten meiner Arbeit mit zufällig die.NET Framework, in diesem Artikel ich zeigen werde, einige grundlegenden DataTables Plug-in-Funktionen in Anwendungen, die mithilfe von MVC ASP.NET und WebForms verwenden. Allerdings wird die Logik in der WebForms-app durch den clientseitigen Code gesteuert werden. Ich werde mit dem Dienst Netflix OData (http://odata.netflix.com/v1/Catalog), arbeiten die mir haben die Möglichkeit, Sie zeigen, wie einige häufige Probleme bewältigen, die bei der Verwendung verschiedener OData Services auftreten können.

Sie können die DataTables-Plug-in von Datatables herunterladen. NET. Wenn Sie mit der Beanspruchung von OData nicht vertraut sind, sollten Sie die Beschleunigung zu erhalten, besuchen Sie den WCF-Datendienste-Abschnitt der MSDN Developer Center unter msdn.microsoft.com/data/odata.

Abfrage-OData mit LINQ und die Client-APIs

Mit einer einfachen MVC-Anwendung zunächst soll, wenn ich einen Dienstverweis http://odata hinzugefügt haben. netflix.com/v1/Catalog mit dem Assistenten für Visual Studio Dienstverweis hinzufügen. Aus diesem Grund wiederum Proxyklassen für mich in meiner Anwendung verbrauchen und erstellt ein Entity Data Model, basierend auf den Dienst, wie in Abbildung 1. Der Assistent fügt außerdem Verweise auf die.NET Framework-OData Client Bibliothek APIs. Sowohl die.NET Framework und Silverlight-OData-Clientbibliotheken erleichtern die Arbeit mit OData relativ einfach nochmals vielen Dank für Ihre Unterstützung von LINQ-Abfragen.

Abbildung 1: das MVC-Projekt im Projektmappen-Explorer

Mein Startcontroller HomeController.cs, verwendet OData-Client-Bibliothek und des Webdienstproxys Abfrage für alle die Filmtitel in einem bestimmten Genre: unabhängige. Die Ergebnisse der Abfrage werden an die dieser bestimmten Controller-Aktion zugeordnete Ansicht zurückgegeben:

public ActionResult Index() {
  var svcUri = new Uri("http://odata.
netflix.com//v1//Catalog");
  var context = new NetflixOData.NetflixCatalog(svcUri);
  var query = from genre in context.Genres
              where genre.Name == "Independent"
              from title in genre.Titles
              where title.ReleaseYear>=2007
              select title ;
  var titles = query.ToList();             
  return View(titles);
}

Das Markup in der Ansicht HomeController Index (\Views\HomeController\index.aspx) ist, wobei die gesamte Präsentationslogik interessante ausgeführt wird. JQuery und DataTables-Plug-in zu nutzen, müssen Sie eine Reihe von Script-Dateien dem Projekt hinzufügen. Alternativ können Sie auf die online-Skripts (Siehe Microsoft AJAX Content Delivery Network asp.net/ajaxLibrary/CDN.ashx) zeigen, aber ich habe entschieden, diese lokal Host. Der Download für plug-in DataTables enthält einen \media Ordner (der die Skripts enthält), die Sie in Ihr Projekt ablegen können. Sie können sehen, dass ich dies getan haben in Abbildung 1.

Abbildung 2 enthält die Auflistung der Index.aspx-Datei.

Abbildung 2 Die HomeController Index.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
 Inherits="System.Web.Mvc.ViewPage<IEnumerable<Title>>" %>
<%@ Import Namespace="JQueryMVC.Controllers" %>
<%@ Import Namespace="JQueryMVC.NetflixOData" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" 
  runat="server">
    Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" 
  runat="server">
  <head>
    <link href="../../media/css/demo-table.css" 
      rel="stylesheet" type="text/css" />
    <script src="../../media/js/jquery.js" 
      type="text/javascript"></script>
    <script src="../../media/js/jquery.dataTables.js" 
      type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
           $('#Netflix').dataTable();
        });
    </script>
  </head>
  <div>
    <table id="Netflix">
      <thead><tr><th>Title</th>
                 <th>Rating</th>
                 <th>Runtime</th></tr></thead>
      <tbody>
        <% foreach (Title title in Model)
           { %>
             <tr><td><%= title.Name %> </td>
                 <td><%= title.AverageRating %></td>
                 <td><%= title.Runtime %></td></tr>
           <% } %>
      </tbody>
    </table>
  </div>
</asp:Content>

Die CSS-Link und zwei Skript Quellen am Anfang des <head>Abschnitt, zeigen Sie auf CSS-Formatierung und die kritischen jQuery und jQuery.datatables JavaScript-Dateien.

Nächste, konzentrieren wir uns auf die Tabelle, wie es auf der Seite angeordnet ist. DataTables-Plug-in ist abhängig von der Tabelle ID und Header-Informationen in <thead> gespeichertAbschnitt. Danach durchläuft etwas Code IEnumerable-<Title>Übergeben der Ansicht aus der HomeController.cs-Datei und zeigt die Namen, AverageRating und Runtime-Werte in den entsprechenden Spalten.

Wenn die Seite erstmals startet, wird die JavaScript-Methode in der Header-Tag jQuery verwendet, um die Netflix-Tabelle in das Formular zu suchen und wendet die DataTable-Funktion auf ihn. DataTables ist hochgradig konfigurierbare, aber diese einfache Form die DataTable-Funktion aufrufen, wird die referenzierte Tabelle, Netflix, die Standardkonfiguration von DataTables erwerben. Abbildung 3 zeigt die resultierende Seite.

Abbildung 3 Anzeigen von Daten mit dem Datentabellen-Plug-in

DataTables hat mehr als CSS verwenden, um die Tabelle Recht erledigt. Beachten Sie, dass am unteren Rand, es Ihnen mitteilt, dass es sich um 155 Zeilen abgerufen. Standardmäßig geschieht dies clientseitige Paging beginnend bei 10 Einträge pro Seite, obwohl der Benutzer 25, 50 oder 100 Einträge pro Seite in der Dropdown-Liste auswählen kann. Das Suchfeld filtert die Ergebnisse basierend auf seine Ergebnisse in allen verfügbaren Spalten in der Tabelle. Der Benutzer kann auch auf den Kopf Zeilenspalten zum Sortieren der Daten klicken. Die DataTables Plug-in-Featuresatz also rich dafür, dass es sogar für das plug-in-Plug-ins. Sie können viel mehr darüber erfahren standardmäßig auf die Datatables zu verbessern. NET-Website.

Auf der Clientseite OData Abfragen

Sie Don Kurzbezeichnung haben immer den Vorteil bei der Arbeit mit einem Client-API, so ich die anspruchsvollere Aufgabe, Abfragen der Netflix OData auf der Clientseite nicht den Vorteil einer der anderen verfügbaren Bibliotheken (AJAX-Client-Bibliothek) drehen, werde um. Ich werde das plug-in beim Navigieren zu den Einschränkungen, die durch den Dienst Netflix bedingte DataTables beschäftigen. Wahrscheinlich in diese dieselben Einschränkungen ausgeführt werden, bei der Arbeit mit anderen öffentlichen OData-Dienste auch.

Für diese Runde verwende ich eine ASP.NET WebForms-app, obwohl ich plain old HTML verwenden könnten da beliebige nicht verwendet wird.NET Framework-Code auf dieser Seite. Müssen Sie den Ordner sich in dieser Anwendung auch, aber wird nicht erstellen Sie einen Proxy für den Dienst, so keine Notwendigkeit zum Hinzufügen eines Dienstverweises verwenden besteht.

Die DataTable-Funktion verfügt über eine Methode namens sAjaxSource, die automatisch Daten aus der Zieldatenquelle abgerufen werden. Aber dies erfordert, dass die Ergebnisse in einer bestimmten Weise formatiert werden. OData Ergebnisse Don Kurzbezeichnung mit diesem ausrichten. Es gibt einen hervorragenden Blogbeitrag von kalifornischen Developer Jeff Morris, geschrieben wurden, die zum Ändern der Form OData Ergebnisse in einem WCF-Datendienste Abfrage Interceptors veranschaulicht. Lesen Sie den Beitrag bit.ly/bMPzTH.

Stattdessen werde ich AJAX verwenden, um die OData in Ihrer systemeigenen Form zurückzugeben und dann manuell Auffüllen der Tabelle.

Der Hauptteil der Seite beginnt mit der Tabelle und deren <theader>definiert (in diesem Fall von DataTables erforderlich), als auch eine leere <tbody>:

<body>
  <form id="form1" runat="server">
    <table id="Netflix" width="100%">
      <thead>
        <tr><th width="50%">Title</th>
            <th>Rating</th>
            <th>Runtime</th></tr>
      </thead>
      <tbody id="netflixBody"/>
    </table>
  </form>
</body>

Die Seite hat eine Reihe von Funktionen: GetData, DisplayResults und eine Hilfsfunktion für den Umgang mit einer aktuellen Mängel des Dienstes Netflix. Ähnlich wie die.Client-Netzwerkbibliothek für OData, ist eine Client-Bibliothek für AJAX, die Teil der Microsoft ASP.NET AJAX-APIs. Es folgt ein Beispiel aus der AJAX-Dokumentation der wie eine JavaScript-OData-Abfrage unter Verwendung dieses Bibliothek aussieht:

function doQuery() {
var northwindService = new
Sys.Data.OpenDataServiceProxy("/Northwind.svc");
northwindService.query("/Customers", cbSuccess, cbFailure, userContext);

Sie können auch können gerade AJAX und jQuery Sie wie ich in den folgenden Beispielen. Sehen wir uns am Anfang des Skripts Header, einschließlich der GetData-Funktion:

<script type="text/javascript" charset="utf-8">
  var oTable;
  var query = "http://odata.
netflix.com/v1/Catalog/Titles?$orderby=Name&$top=500"
  $(document).ready(function () { getData() });
  function getData() {
    var url = query + "&$callback= displayResults" 
      + "&$format=json";
    $.ajax({ dataType: "jsonp", url: url });
  }

Zu Beginn die Seite ruft die document.ready-Funktion automatisch GetData. GetData eine URL aus der vordefinierten OData Abfrage konstruiert und fügt Parameter für die OData als JSON (Alternative zu das Standardformat für AtomPub), zurückgeben, sowie die Definition der Methode ausgeführt werden, wenn der AJAX-Aufruf abgeschlossen ist.

Klicken Sie nach Abschluss der AJAX-Aufruf die DisplayResults-Funktion wird aufgerufen werden anhand der Ergebnisse der Abfrage OData (siehe Abbildung 4).

Abbildung 4 OData Ergebnisse für die Anzeige vorbereiten

function displayResults(results) {
  var entities;
  var redraw;
// Find data in results 
  if (results.d[0] == undefined) {
    queryNext = results.d.__next;
    entities = results.d.results;
  }
  else {
    queryNext = "";
    entities = results.d;
  }
  // Instantiate dataTable if necessary
  if (oTable ==null)
    oTable = $('#Netflix').dataTable();
  // Build table rows from data using dataTables.Add
  for (var post in entities) {
    if (post == queryResults.length-1)
      redraw = true; //only redraw table on last item
    else
      redraw = false;
    oTable.fnAddData([
      entities[post].Name, entities[post].Rating, 
      entities[post].Runtime],redraw);
  }
  // Continue retrieving results
  if (queryNext > "") {
    query = FixNetFlixUrl(queryNext);
    getData();
  }
}

Der Codeabschnitt, der mit kommentiert "finden die Daten in den Ergebnissen" behandelt eine Beschränkung Netflix wurde erwähnt. Netflix ist serverseitiges Paging zum Schutz Ihrer Server erzwingen und nur 500 Zeilen pro Anforderung zurückgegeben. Können Sie sich vorstellen, wenn jemand sich verzögert für alle Filme abgefragt? Ich bin sicher, die häufig der Fall ist. Das serverseitige Paging verhindern nicht, dass Sie zusätzliche Zeilen abrufen;Sie müssen nur explizit dazu.

Umgang mit große Datenmengen im Client ist genau DataTables brillante an Neuigkeiten und besteht eine hohe Wahrscheinlichkeit, die Sie nutzen möchten. Es dauert etwas länger, um alle Daten zu laden, wenn Sie sind große Mengen (z. B. 5.000 Zeilen) abrufen, aber sobald Sie im Speicher sind, können Datentabellen den Endbenutzer, die alle Arten von Filtern und Sortieren von Daten führen lassen.

Wenn ich zuerst DataTables nachgewiesen sah, sagte die Person, die ihn diese Verwendung wurden für ein corporate reporting-Tool, in dem Sie 80.000 Zeilen heruntergeladen wurden. Ich Protestierte laut dieser Missbrauch des Internets und des Servers. Ich jedoch müssen gesehen DataTables in Aktion, nicht mehr so Gegensatz zu dieser Verwendung in einem kontrollierten Szenario.

OData bietet eine Möglichkeit, einen anderen Stapel von Daten und Netflix auf einfache Weise anfordern dieser Hook zur Nutzen bietet. Hier ist eine Abfrage, die 501 Ergebnisse anfordert:

http://odata.
netflix.com/v1/Catalog/Titles?$orderby=Name&$top=501

Wenn die Abfrage des Dienstes Grenzwert überschreitet, verwendet Netflix OData Fortsetzung-token-Funktion. Zusätzlich zu den Posten enthalten die Ergebnisse einer weitere Element nach dem letzten Eintrag. Hier ist es in AtomPub-Format:

<link rel="next"
  href="http://odata.
netflix.com:20000/v1/Catalog/Titles/?$orderby=
Name&$top=1&$skiptoken='1975%20Oklahoma%20National%20Championship%20
Game','BVZUb'" /> 
</feed>

Der Skiptoken-Parameter weist der Abfrage, wo Sie mit den nächsten Satz von Ergebnissen beginnen. In JSON, Eintrag am Anfang der Ergebnisse in einer Eigenschaft angezeigt werden genannt __next, wie in Abbildung 5.

Abbildung 5 JSON-Ergebnisse einer Anforderung für mehr Daten, als der Dienst so, dass Return konfiguriert ist

Wenn eine Abfrage nicht die Beschränkung überschreitet, sind die Einträge direkt in der d-Eigenschaft, wie Sie sehen können, in Abbildung 6. Deshalb muss GetData testen, um festzustellen, wo es die Ergebnisse finden. Ist ein Fortsetzungstoken, speichert, die in NextQuery und führt dann die Fortsetzung-Abfrage, um das vollständige Resultset im Speicher zu erstellen.

Abbildung 6 JSON-Ergebnis für eine Anforderung innerhalb der konfigurierten Return

Wenn Sie die __next-Eigenschaft betrachten, werden Sie feststellen, dass Netflix eine Port-Nummer 20.000, zur Abfrage hinzugefügt. Jedoch, wenn Sie diese Abfrage direkt ausführen, schlägt fehl. Daher müssen Sie die Port-Nummer aus dem URI zu entfernen, bevor es anfordert. Das ist der Zweck der FixNetFlixUrl-Funktion, die ich vor, um die Anforderung aufrufen.

Musst du Anomalien wie dies zu beobachten, wenn öffentliche OData Dienste nutzt. Sie haben nun gesehen, dass Umgang mit einem Dienst, der eine Anzahl von Ergebnissen beschränkte, die er kehrt zurück, und eine, die eine unterbrechende Änderung in seiner Fortsetzungstoken inflicts.

Für jede Gruppe von Ergebnissen, die abgerufen werden, verwendet die Methode die DataTables-FnAddData-Methode, um jedes Element in der Tabelle hinzuzufügen. Neuzeichnen in der Tabelle ist teuer, so dass ich Parameters beim Neuzeichnen des FnAddData auf False gesetzt haben, bis das letzte Element in den Ergebnissen erreicht. Neuzeichnen während des Datenabrufs macht der Benutzeroberfläche fließender, statt zu warten, bis alle 5.000 Zeilen abgerufen und zur Tabelle hinzugefügt wurde.

Nach die ursprüngliche Abfrage zurückzugebenden 5.000 Zeilen in meiner rural-Vermont-with-poky-Internet-access Umgebung ändern und das Neuzeichnen bis zum Ende Bitter aufzuschieben, dauerte es fast eine Minute zur Erfassung aller Zeilen und die Tabelle angezeigt. Jede Zeile das Neuzeichnen viel forschen war, und ich war mit der Tabelle zu interagieren, auch wenn sich mehrere Zeilen hinzugefügt wurden. Das war eine schöne Überraschung.

Sobald alle 5.000 Zeilen in der Tabelle wurden, hat die DataTables eine erstaunliche Auftrag von Sortier- und Suchvorgänge. Sortieren von dauerte weniger als eine Sekunde. Suche war augenblicklich, da er jeden Tastenanschlag in die Suche antwortet (siehe Abbildung 7).

Abbildung 7 in Echtzeit Suchergebnisse in Datentabellen

Eine kleine Anpassung für Internet Explorer 8

Inzwischen eine Aktualisierung DataTables löst ein Internet Explorer 8, die überhaupt nicht wünschenswert ist, beim Arbeiten mit großen Ergebnis in Datentabellen Funktionsgruppen. Internet Explorer zeigt eine Warnmeldung an, wenn zu viele Zeilen des Skripts ausgeführt werden.

Die Support-Website von Microsoft empfiehlt das Anpassen des Clients Registrierung des Computers, um dieses Verhalten zu ändern. Das ist keine vernünftige Lösung für die Festsetzung dieser Anwendungsprogramms;Ich Don Kurzbezeichnung soll mit einem Client-Registrierungseinstellungen Fehler machen, wenn irgend möglich. Aber es gibt eine andere Option.

Ein Beitrag im Forum Benutzer DataTables vorgeschlagen, eine Änderung an der Skriptdatei DataTables. Ich habe diese Änderung implementiert, und es wunderbar funktioniert. Sie können die Details im Forumthread mit dem Titel "Sortieren Ursachen IE auslösen 'ein Skript auf dieser Seite verursacht Internet Explorer langsam ausgeführt'" sehen, bit.ly/co4AMD.

So viele Features zu erkunden

Hoffentlich Sie bereits gesehen haben genug, um zu verstehen, Meine Begeisterung über diesem umfangreichen-Plug-in. Es gibt noch viel mehr, dass Sie tun können, konfigurieren Sie eine Tabelle suchen – als auch deren Verhalten – im Nur-Lese-Szenario I nachgewiesen haben. Datentabellen können Sie flüssige so bearbeiten, und wenn Sie einige dieser Logik auf dem Server behalten möchten, können Sie, während Sie profitieren dennoch von DataTables.

Mithilfe von DataTables, damit Ihre Endbenutzer Slice und Würfel die großen Mengen von Daten, die in der wachsenden Zahl der öffentlich verfügbaren OData Dienste verfügbar scheint, für mich eine Übereinstimmung Geek kaputt gemacht.

Julie Lerman ist als Microsoft MVP, .NET-Mentor und Unternehmensberaterin tätig und wohnt in den Bergen von Vermont. Finden Sie Ihre Präsentation auf Daten zugreifen und andere Microsoft .NET Framework Themen am Benutzergruppen und Konferenzen auf der ganzen Welt. Lerman führt einen Blogs unter thedatafarm.com/blog und ist Autorin des hoch gelobten Titels "Programming Entity Framework" (O’Reilly Media, 2010). Folgen Sie ihr auf twitter.com: @julielerman.

Dank an die folgenden technischen Experten für die Überprüfung dieses Artikels: Rey Bango für die und Alex James für die