33 votes

Traitement côté serveur jQuery DataTables avec ASP.NET WebForms

Problème:

  • Traitement côté serveur jQuery DataTables avec ASP.NET WebForms.

Solution:

  • Darin Dimitrov a répondu à la question en utilisant un exemple de pages et de types, mais n'a effectué aucune recherche. Voici ma ** modification ** de base de son travail pour que la recherche fonctionne sur son exemple:
 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 };
        }
    }
}
 

49voto

Darin Dimitrov Points 528142

J'ai écrit un exemple simple qui devrait illustrer l'idée.

Commencez par écrire un gestionnaire générique pour le traitement des données côté serveur ( Data.ashx mais il peut s’agir d’une page Web, d’un service Web, d’un script côté serveur capable de renvoyer des données formatées JSON):

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

Et puis 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="http://stackoverflow.com/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'exemple est trop simpliste, mais j'espère qu'il illustrera les bases sur la façon de se faire regarder.

2voto

Holystream Points 702

L'exemple, les pages que vous avez énumérés en fait, paginer, filtre lors de l'initialisation. Fondamentalement, vous transmettre ces données par l'intermédiaire de la chaîne de requête.

Quelque chose comme:

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

Cela dit, si vous souhaitez remplacer un comportement ou souhaitez étendre dataTable est fonctionnellement, vous avez quelques options: Extension de dataTable la fonctionnalité de Personnalisation de Défilement

Vous pouvez suivre les exemples ci-dessus et de les personnaliser pour le Filtrage, le Tri et la Pagination

1voto

Fabio Beoni Points 468

Je suis asp.Net développeur... s'il vous Plaît prendre à l'esprit que .net développeurs sont utilisés pour construire des pages web à l'aide .net contrôles, pas de contrôles javascript.

La différence est la suivante: asp.net le contrôle est un contrôle côté serveur, vous pouvez gérer sans écrire du code javascript de votre auto, mais la programmation en C#/VB.net. L'asp.net contrôle génère automatiquement le code javascript côté client de contrôle lorsque le site web s'exécute.

Il approche est plus "moderne" et vraiment puissant.

Donc, si vous êtes un .net développeur je vous suggérons d'utiliser cette approche. Si vous êtes un développeur javascript et que vous êtes seul bâtiment le côté client de l'interface de votre application, vous avez probablement besoin d'un service web qui fournit les données côté serveur au format XML que vous pouvez appeler et de lire sur HTTP. Mais, "recherche", de fournir "pagination" et "tri" via AJAX vous avez besoin pour développer côté serveur...

1voto

Fabio Beoni Points 468

1voto

Incognito Points 10637

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

Ce gars a fait fonctionner ajax avec asp.net et datatables.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X