Condividi tramite


Il presente articolo è stato tradotto automaticamente.

Concetti sui dati

Ridisporre di dati OData con il componente aggiuntivo jQuery DataTables

Julie Lerman

Scaricare il codice di esempio

Julie LermanIl protocollo di dati aperti (OData) consente di produttori di dati fornire i propri dati tramite il Web in un formato comune che può essere utilizzato da chiunque utilizzi una tecnologia HTTP attivato. I dati vengono forniti tramite URI ed è possibile utilizzare i verbi HTTP comuni, GET, PUT, POST, unione ed eliminare, ovvero per interagire con i dati. È possibile gestire l'interazione direttamente tramite un linguaggio come JavaScript o utilizzando un client API, ad esempio Microsoft.NET Framework, Silverlight, PHP o altri forniti da Microsoft. In entrambi i casi, è possibile interagire con tutti i feed di OData nello stesso modo.

Vi sono un numero crescente di pubblicamente forniti servizi di OData, ad esempio commerciale feed di Netflix Inc ed eBay Inc., i dati della Coppa del mondo, anche un servizio che fornisce 150 anni di statistica di baseball.

L'accesso ai dati è state ulteriormente semplificata e più semplice, ma per quanto riguarda i dati di presentazione? Quando si dispone di 150 anni che vale la pena di baseball stats o migliaia di titoli dei filmati, non vi è ancora qualche sforzo sul lato client per recuperare e spostarsi tra tutti i dati.

In Vermont recenti.Presentazione del gruppo di utenti di NET su jQuery, sono stato ispirato da un plug-in jQuery denominata DataTable come modo Low investimento per consentire agli utenti di suddividere e ripartire grandi quantità di dati. La potenza di DataTable è nella sua elaborazione sorprendentemente veloce sul lato client, anche se è consentito essere più interattiva con il codice sul lato server, se lo si desidera.

JQuery è una tecnologia Web sul lato client (e può essere utilizzato in qualsiasi tipo di applicazione Web) che semplifica l'utilizzo di JavaScript. Se hai parlato a tutti gli utenti selezionati su cucinare jQuery, troverete una grande quantità di passione per la tecnologia. DataTable è uno di un numero enorme di jQuery plugin. Ed è possibile utilizzare jQuery in qualsiasi tipo di applicazione Web.

Quando verificano per eseguire la maggior parte del mio lavoro con il.NET Framework, in questo articolo che illustrerò alcune delle funzionalità di base DataTables plug-in di utilizzo nelle applicazioni che utilizzano ASP.NET MVC e Web Form. Tuttavia, la logica dell'applicazione Web Form sarà controllata dal codice lato client. È possibile che starà lavorando con il servizio di Netflix OData (http://odata.netflix.com/v1/Catalog), che mi offre l'opportunità di mostrare come affrontare alcuni problemi comuni che possono verificarsi durante l'utilizzo di vari servizi di OData.

È possibile scaricare il plug-in di DataTable dal DataTable. NET. Se si ha familiarità con l'utilizzo di OData, è possibile acquisire dimestichezza, visitare la sezione di WCF Data Services di MSDN Developer Center presso msdn.microsoft.com/data/odata.

OData di query con LINQ e le API Client

Inizierò con una semplice applicazione MVC in cui è stato aggiunto un riferimento a http://odata. netflix.com/v1/Catalog utilizzando la procedura guidata di Visual Studio Aggiungi riferimento al servizio. In questo modo, a sua volta, consente di creare classi proxy per me per l'utilizzo nell'applicazione e genera un Entity Data Model basato sul servizio, come mostrato in 1 figura. Vengono inoltre aggiunti i riferimenti ai.NET Framework OData client libreria API. Entrambi i.NET Framework e Silverlight OData librerie client consentono di lavorare con OData piuttosto semplice grazie al supporto di una query LINQ.

image: The MVC Project in Solution Explorer

Figura 1 di MVC del progetto in Esplora soluzioni

Il controller di avvio, HomeController.cs, utilizza la libreria client OData e il proxy del servizio per eseguire query per tutti i titoli di film in un particolare genere: indipendenti. I risultati della query vengono restituiti per la visualizzazione associata a questa azione particolare controller:

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);
}

Il codice nella vista di indice di HomeController (\Views\HomeController\index.aspx) è in cui tutti la logica di presentazione più interessante è in corso. Per sfruttare jQuery e DataTables plug-in, è necessario aggiungere un insieme di file di script per il progetto. In alternativa, è possibile selezionare il gruppo in linea di script (vedere la Microsoft AJAX Content Delivery Network in asp.net/ajaxLibrary/CDN.ashx), ma ho scelto di questi host locale. È possibile scaricare il plug-in di DataTable contiene una cartella \media, che contiene gli script, che è possibile trascinare nel progetto. È possibile visualizzare che ho già fatto in 1 figura.

Figura 2 contiene il codice del file Index.aspx.

Nella figura 2, 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>

Le origini di due script all'inizio del <head> e di collegamento CSSpunto di sezione di formattazione CSS e i file di JavaScript jQuery e jQuery.datatables critici.

Avanti, concentriamoci su tabella come indicato nella pagina. DataTable plug-in dipende dall'ID della tabella e le informazioni di intestazione memorizzati in <thead>sezione. A questo punto, un po' di codice scorre l'interfaccia IEnumerable <Title>Passare alla visualizzazione dal file HomeController.cs e visualizza i valori di nome, AverageRating e Runtime nelle colonne appropriate.

Quando la pagina viene avviato inizialmente, il metodo JavaScript nel tag di intestazione utilizza jQuery per individuare la tabella Netflix nel modulo e si applica la funzione di dataTable. DataTable è altamente configurabile, ma con questa forma più semplice della chiamata della funzione di dataTable, la tabella a cui fa riferimento, Netflix, acquisirà la configurazione predefinita di DataTables. Figura 3 viene illustrata la pagina risultante.

image: Displaying Data with the DataTables Plug-In

Della figura 3 visualizzazione dei dati con il Plug-In di DataTables

DataTable ha fatto più che utilizzare i CSS per creare la tabella abbastanza. Si noti che, nella parte inferiore, che consente di recuperare le 155 righe. Per impostazione predefinita non paging del lato client partendo da 10 voci per pagina, anche se l'utente può scegliere 25, 50 o 100 voci per pagina nell'elenco a discesa. La casella di ricerca consente di filtrare i risultati in base alle sue conclusioni in tutte le colonne disponibili nella tabella. L'utente può inoltre fare clic su intestazioni di riga della colonna per ordinare i dati. DataTable funzionalità plug-in è talmente ricco che esistono anche plug-in per il plug-in. Disponibili informazioni molto più migliorando l'impostazione predefinita in DataTable. sito Web di Net.

L'esecuzione di query OData sul lato Client

Si Don ' t hanno sempre il vantaggio di lavorare con un client API, in modo possibile capovolgere l'attività più complesse di eseguire la query Netflix OData sul lato client senza il vantaggio di una delle altre librerie disponibili (la libreria client AJAX). Verrà utilizzata DataTables plug-in durante la lettura su alcune delle limitazioni poste dal servizio Netflix. È probabile che per l'esecuzione in queste stesse limitazioni quando si lavora anche con altri servizi OData pubbliche.

Per l'arrotondamento si utilizza un'applicazione Web ASP.NET applicazione Web Form, anche se si potesse deve utilizzare normale linguaggio HTML precedente perché non sto utilizzando uno.Codice di NET Framework in questa pagina. È necessario che la cartella \media in questa applicazione anche, ma che non verrà creato un proxy del servizio in modo che non è necessario utilizzare Aggiungi riferimento al servizio.

La funzione di dataTable dispone di un metodo denominato sAjaxSource che recupera automaticamente i dati dell'origine di destinazione. Ma in tal modo i risultati per essere formattato in modo specifico. I risultati di OData Don sigla Allinea con questo. È disponibile un post del blog grande scritto da uno sviluppatore in California, Jeff Morris, che illustra la modifica della forma OData i risultati in un intercettatore di query di servizi di dati di WCF. È possibile leggere il post in bit.ly/bMPzTH.

Al contrario, si utilizzerà AJAX per restituire la OData nel formato nativo e inserire manualmente la tabella.

Il corpo della pagina inizia con la tabella e il <theader>definito (ancora una volta richiesto da DataTable), come pure un <tbody> vuoto:

<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>

La pagina include numerose funzioni: GetData displayResults e una funzione di supporto per far fronte a uno dei punti deboli corrente del servizio Netflix. Simile al.NET Client Library per OData, è disponibile una libreria client per AJAX che fa parte di Microsoft ASP.NET AJAX API. Ecco un esempio dalla documentazione di una query di OData di JavaScript aspetto utilizzando la libreria AJAX:

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

In alternativa, è possibile utilizzare semplici AJAX e jQuery come negli esempi riportati di seguito. Diamo un'occhiata all'inizio dello script di intestazione, tra cui la funzione getData:

<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 });
  }

Quando viene avviata la pagina, la funzione document.ready chiama automaticamente getData. getData costruisce un URL dalla query OData predefiniti e aggiunge i parametri per restituire la OData come JSON (un'alternativa al formato AtomPub predefinito), nonché di definizione del metodo da eseguire quando la chiamata di AJAX è stata completata.

Una volta completata la chiamata di AJAX, verrà chiamata la funzione di displayResults utilizzando i risultati della query di OData (cfr. nella figura 4).

Figura 4 OData risultati per la visualizzazione di preparazione

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();
  }
}

La sezione di codice di commentato con "Trova i dati nei risultati" gestisce una delle limitazioni Netflix ho accennato. Netflix è l'applicazione di paging sul lato server per proteggere il server e restituisce solo 500 righe per ogni richiesta. Si può immaginare se qualcuno lentamente cercati tutti i filmati? Si è sicuri che accade di frequente. Il paging sul lato server non è di evitare righe aggiuntive;è necessario eseguire questa operazione in modo esplicito.

La gestione di grandi quantità di dati nel client è esattamente ciò che è straordinaria nel DataTable ed è presente buone probabilità che si desidera sfruttare i vantaggi di tale. Potrebbe richiedere più tempo per caricare tutti i dati quando si recuperano grandi quantità (ad esempio, 5.000 righe), ma dopo che siano presenti nella memoria, DataTables consentono all'utente finale di effettuare tutti i tipi di filtro e ordinamento sui dati stessi.

Quando ho visto prima DataTable dimostrato, la persona con detto che erano in uso, per uno strumento di reporting azienda in cui si sono scaricando 80.000 righe. Protestato a voce alta di tali abusi di Internet e il server. Tuttavia, dopo aver visto DataTables in azione, non è più così piuttosto che questo tipo di utilizzo in uno scenario controllato.

OData fornisce un modo semplice richiedere un altro batch di dati e Netflix fornisce questo hook per poter sfruttare. Ecco una query che richiede i 501 risultati:

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

Quando la query supera il limite del servizio, Netflix utilizza la funzionalità di token di continuazione di OData. Oltre alle voci, i risultati contengono un elemento in più dopo l'ultima voce. Di seguito è in formato AtomPub:

<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>

Il parametro skiptoken indica la query per iniziare con il set di risultati successivo. In JSON, che la voce viene visualizzato all'inizio dei risultati in una proprietà denominata __next, come mostrato in nella figura 5.

image: JSON Results of a Request for More Data than the Service Is Configured to Return

Figura 5 JSON i risultati di una richiesta di più dati di quanti il servizio è configurato in modo da restituire

Quando una query non superi il limite, le voci sono direttamente all'interno della proprietà d, come si può vedere in nella figura 6. Ecco perché GetData è necessario eseguire un test per vedere dove verranno trovati i risultati. Se è presente un token di continuazione, che viene archiviato nel NextQuery e quindi esegue la query di continuazione per creare il completo set di risultati in memoria.

image: JSON Results for a Request Within the Configured Return Amount

Figura 6 JSON risultati per una richiesta entro l'intervallo restituito configurato

Se si esamina la proprietà __next, si noterà che Netflix aggiunto un numero di porta, 20.000, alla query. Tuttavia, se si esegue la query direttamente, esso avrà esito negativo. Pertanto, è necessario rimuovere il numero di porta dall'URI prima della richiesta di. Che è lo scopo della funzione FixNetFlixUrl viene chiamato prima di effettuare la richiesta.

Sarà necessario verificare eventuali anomalie, come quando si utilizzano servizi OData pubblica. A questo punto abbiamo visto come gestire un servizio che consente di limitare il numero di risultati che verrà restituito e uno che determina una modifica sostanziale nel proprio token di continuazione.

Per ogni set di risultati viene recuperata, il metodo utilizza il metodo di fnAddData di DataTables per aggiungere ogni elemento della tabella. Il ridisegno della tabella è costoso, ho impostare il parametro di ridisegno di fnAddData su false fino a raggiungere l'ultimo elemento nei risultati. Ridisegnare in tutto il recupero dei dati rende l'interfaccia utente più fluida, invece di attendere fino a quando non sono state recuperate e aggiunte alla tabella tutte le righe di 5.000.

Dopo avere modificato la query iniziale per restituire le righe di 5.000 nel mio ambiente rural-Vermont-with-poky-Internet-access e posporre l'aggiornamento dello schermo fino alla fine di bitter, richiedeva circa un minuto per acquisire tutte le righe e visualizzare la tabella. Ridisegno di ogni riga è stata molto snappier e sono stato in grado di interagire con la tabella anche se sono state aggiunte altre righe. Che è stata una piacevole sorpresa.

Una volta nella tabella sono state tutte le righe di 5.000, DataTable ha un incredibile processo di ordinamento e ricerca. L'ordinamento, ha richiesto meno di un secondo. Ricerca è stata istantanea, come risponde a ogni pressione di tasto nella ricerca (vedere nella figura 7).

image: Real-Time Search Results in DataTables

Figura 7 in tempo reale i risultati della ricerca in DataTable

Una rettifica di piccole dimensioni per Internet Explorer 8

Un recente aggiornamento di DataTables attiva una funzionalità che è opportuno non vengono riprodotti quando si lavora con risultati di grandi dimensioni imposta in DataTable di Internet Explorer 8. Internet Explorer visualizza un messaggio di avviso quando un numero eccessivo di righe di script sono in fase di esecuzione.

Il sito del supporto tecnico Microsoft consiglia la regolazione del client del Registro di sistema del computer per modificare questo comportamento. Non è una soluzione accettabile per la correzione di questo tipo di applicazione;Ho Don sigla desidera perdere tempo con le impostazioni del Registro di sistema del client se può essere evitato. Ma c'è un'altra opzione.

Un post nei forum utente DataTables suggerita una modifica al file di script di DataTables. Ho implementato la modifica e funziona al meglio. È possibile visualizzare i dettagli nel thread forum intitolato "Ordinamento cause IE per generare"uno script in questa pagina è causato da Internet Explorer per l'esecuzione lenta,"" a bit.ly/co4AMD.

Così tante funzionalità da esplorare

Abbiamo già visto sufficientemente comprendere l'emozione è auspicabile che su questo ampio plug-in. È molto più che è possibile eseguire per configurare l'aspetto di una tabella, nonché il comportamento, ovvero in uno scenario di sola lettura, ho dimostrato. DataTable consente inoltre di modificare in modo fluido e se si desidera conservare alcune delle tale logica sul lato server, è possibile farlo approfittando ancora DataTables anche.

Utilizzo di DataTable per consentire la sezione gli utenti finali e dadi grandi quantità di dati disponibili in numero crescente di servizi OData pubblicamente disponibili sembra, secondo me, una corrispondenza eseguita in un fanatico dell'informatica DIO.

Julie Lerman è un Microsoft MVP, mentore e consulente .NET che risiede nel Vermont. È possibile trovare la sua presentazione sull'accesso ai dati e altri prodotti Microsoft.NET Framework gli argomenti in gruppi di utenti e conferenze nel mondo. Il blog di Lerman è disponibile all'indirizzo thedatafarm.com/blog . Lerma è autrice del celebre libro intitolato "Programming Entity Framework" (O’Reilly Media, 2010). Il suo nome utente su Twitter.com è il seguente: @julielerman.

Grazie ai seguenti esperti tecnici per la revisione di questo articolo: Rey Bango e Alex James