jQuery DataTable elaborazione lato server utilizzando ASP.NET WebForms

Question

Problema:

• jQuery elaborazione DataTable lato server utilizzando ASP.NET WebForms.

Soluzione:

• Darin Dimitrov risposto alla domanda con un esempio che le pagine e le specie, ma non fa alcuna ricerca. Ecco la mia ** ** modifica fondamentale del suo lavoro per rendere la ricerca a lavorare al suo esempio:

public class Data : IHttpHandler 
{ 
    public void ProcessRequest(HttpContext context) 
    { 
     // Paging parameters: 
     var iDisplayLength = int.Parse(context.Request["iDisplayLength"]); 
     var iDisplayStart = int.Parse(context.Request["iDisplayStart"]); 

     // Sorting parameters 
     var iSortCol = int.Parse(context.Request["iSortCol_0"]); 
     var iSortDir = context.Request["sSortDir_0"]; 

     // Search parameters 
     var sSearch = context.Request["sSearch"]; 

     // Fetch the data from a repository (in my case in-memory) 
     var persons = Person.GetPersons(); 

     // Define an order function based on the iSortCol parameter 
     Func<Person, object> order = person => iSortCol == 0 ? (object) person.Id : person.Name; 

     // Define the order direction based on the iSortDir parameter 
     persons = "desc" == iSortDir ? persons.OrderByDescending(order) : persons.OrderBy(order); 

     // prepare an anonymous object for JSON serialization 
     var result = new 
         { 
          iTotalRecords = persons.Count(), 
          iTotalDisplayRecords = persons.Count(), 
          aaData = persons 
           .Where(p => p.Name.Contains(sSearch)) // Search: Avoid Contains() in production 
           .Where(p => p.Id.ToString().Contains(sSearch)) 
           .Select(p => new[] {p.Id.ToString(), p.Name}) 
           .Skip(iDisplayStart) // Paging 
           .Take(iDisplayLength) 
         }; 

     var serializer = new JavaScriptSerializer(); 
     var json = serializer.Serialize(result); 
     context.Response.ContentType = "application/json"; 
     context.Response.Write(json); 
    } 

    public bool IsReusable { get { return false; } } 
} 

public class Person 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 

    public static IEnumerable<Person> GetPersons() 
    { 
     for (int i = 0; i < 57; i++) 
     { 
      yield return new Person { Id = i, Name = "name " + i }; 
     } 
    } 
} 

Answer 1

Ho scritto un semplice esempio che dovrebbe illustrare l'idea.

Inizia scrivendo un gestore generico per la gestione dei dati sul lato server (Data.ashx ma questo potrebbe essere una pagina web, il servizio web, lo script lato server nulla in grado di restituire i dati JSON formattato):

public class Data : IHttpHandler 
{ 
    public void ProcessRequest(HttpContext context) 
    { 
     // Those parameters are sent by the plugin 
     var iDisplayLength = int.Parse(context.Request["iDisplayLength"]); 
     var iDisplayStart = int.Parse(context.Request["iDisplayStart"]); 
     var iSortCol = int.Parse(context.Request["iSortCol_0"]); 
     var iSortDir = context.Request["sSortDir_0"]; 

     // Fetch the data from a repository (in my case in-memory) 
     var persons = Person.GetPersons(); 

     // Define an order function based on the iSortCol parameter 
     Func<Person, object> order = p => 
     { 
      if (iSortCol == 0) 
      { 
       return p.Id; 
      } 
      return p.Name; 
     }; 

     // Define the order direction based on the iSortDir parameter 
     if ("desc" == iSortDir) 
     { 
      persons = persons.OrderByDescending(order); 
     } 
     else 
     { 
      persons = persons.OrderBy(order); 
     } 

     // prepare an anonymous object for JSON serialization 
     var result = new 
     { 
      iTotalRecords = persons.Count(), 
      iTotalDisplayRecords = persons.Count(), 
      aaData = persons 
       .Select(p => new[] { p.Id.ToString(), p.Name }) 
       .Skip(iDisplayStart) 
       .Take(iDisplayLength) 
     }; 

     var serializer = new JavaScriptSerializer(); 
     var json = serializer.Serialize(result); 
     context.Response.ContentType = "application/json"; 
     context.Response.Write(json); 
    } 

    public bool IsReusable 
    { 
     get 
     { 
      return false; 
     } 
    } 
} 

public class Person 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 

    public static IEnumerable<Person> GetPersons() 
    { 
     for (int i = 0; i < 57; i++) 
     { 
      yield return new Person 
      { 
       Id = i, 
       Name = "name " + i 
      }; 
     } 
    } 
} 

E poi un WebForm:

<%@ Page Title="Home Page" Language="C#" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head id="Head1" runat="server"> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="/styles/demo_table.css" /> 
    <script type="text/javascript" src="/scripts/jquery-1.4.1.js"></script> 
    <script type="text/javascript" src="/scripts/jquery.dataTables.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('#example').dataTable({ 
       'bProcessing': true, 
       'bServerSide': true, 
       'sAjaxSource': '/data.ashx' 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="Form1" runat="server"> 
     <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
      <thead> 
      <tr> 
       <th>ID</th> 
       <th>Name</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td colspan="5" class="dataTables_empty">Loading data from server</td> 
      </tr> 
      </tbody> 
     </table> 
    </form> 
</body> 
</html> 

L'esempio è semplificato eccessivamente ma spero che illustrerà le nozioni di base su come ottenere fissò.

Answer 2

Sono asp.Net sviluppatore ... Si prega di prendere a mente che Sviluppatori NET vengono utilizzati per costruire web pagine che usano controlli .net, non controlli javascript.

La differenza è: un controllo asp.net è un controllo lato server, lo gestisci senza scrivere javascript da te, ma programmando in C#/VB.net. Il controllo asp.net genera automaticamente il controllo javascript sul lato client quando viene eseguito il sito Web.

L'approccio è più "moderno" e davvero potente.

Quindi, se sei uno sviluppatore .net ti suggerisco di utilizzare questo approccio. Se sei uno sviluppatore di JavaScript e stai costruendo solo l'interfaccia lato client della tua applicazione, probabilmente hai bisogno di un webService che fornisca i dati lato server in formato XML che puoi chiamare e leggere su HTTP. Ma, per "cercare", fornire "impaginazione" e "ordinamento" tramite AJAX è necessario sviluppare lato server ...

Answer 3

Forse questo potrebbe aiutare? http://www.codeproject.com/KB/aspnet/ASPNET_DataTable_to_JSON.aspx

Answer 4

Le pagine di esempio elencate sono effettivamente ordinate, impaginate, filtrano all'inizializzazione. Fondamentalmente, si passa quei dati tramite stringa di query.

Qualcosa di simile:

sAjaxSource": "../examples_support/server_processing.ashx?SortBy=FirstName&FilterBy=StackOverFlow" 

Detto questo, se si vuole ignorare alcuni comportamenti o voler estendere functionaly di dataTable, avete alcune opzioni: Extending dataTable functionalityCustomizing Scrolling

È possibile seguire gli esempi di cui sopra e personalizzarli per filtrare, ordinare e impaginazione

Answer 5

http://naspinski.net/post/REAL-AJAX-with-AspNet-(not-AspNet-AJAX).aspx

Questo ragazzo ha fatto un lavoro ajax con asp.net e datatables.