web-dev-qa-db-fra.com

Traitement côté serveur jQuery DataTables à l'aide d'ASP.NET WebForms

Problème:

  • traitement côté serveur jQuery DataTables à l'aide d'ASP.NET WebForms.

Solution:

  • Darin Dimitrov a répondu à la question en utilisant un exemple de pages et de tri, mais ne fait aucune recherche. Voici ma modification ** de base ** de son travail pour faire fonctionner la recherche 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 };
        }
    }
}
javascriptasp.netjqueryajaxdatatables
33
rebelliard

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

Commencez par écrire un gestionnaire générique pour gérer les données côté serveur (Data.ashx mais il peut s'agir d'une page Web, d'un service Web, de tout 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="/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 simplifié, mais j'espère qu'il illustrera les bases sur la façon de regarder.

49
Darin Dimitrov

Les pages d'exemple que vous avez répertoriées trient, paginent et filtrent lors de l'initialisation. Fondamentalement, vous transmettez ces données via une 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 étendre les fonctionnalités de dataTable, vous avez quelques options: Extension de la fonctionnalité dataTablePersonnalisation du défilement

Vous pouvez suivre les exemples ci-dessus et les personnaliser pour le filtrage, le tri et la pagination

2
Holystream

Peut-être que cela pourrait aider? http://www.codeproject.com/KB/aspnet/ASPNET_DataTable_to_JSON.aspx

1
Fabio

Je suis développeur asp.Net ... Veuillez garder à l'esprit que les développeurs .net sont utilisés pour créer des pages Web à l'aide de contrôles .net, pas de contrôles javascript.

La différence est: un contrôle asp.net est un contrôle côté serveur, vous le gérez sans écrire javascript vous-même, mais en programmant en C #/VB.net. Le contrôle asp.net génère automatiquement le contrôle javascript côté client lors de l'exécution du site Web.

Son approche est plus "moderne" et vraiment puissante.

Donc, si vous êtes un développeur .net, je vous suggère d'utiliser cette approche. Si vous êtes un développeur javascript et que vous ne construisez que l'interface côté client de votre application, vous avez probablement besoin d'un webService qui fournit les données côté serveur au format XML que vous pouvez appeler et lire via HTTP. Mais, pour "rechercher", fournir "pagination" et "tri" via AJAX vous devez développer côté serveur ...

1
Fabio

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

Ce mec a fait fonctionner ajax avec asp.net et les tables de données.

1
Incognito