使用ASP.NET WebForms的jQuery DataTables服务器端处理

Question

问题：

• 使用ASP.NET WebForms的jQuery DataTables服务器端处理。

解：

• 达林·迪米特洛夫（Darin Dimitrov）使用一个分页和排序但不进行任何搜索的示例回答了这个问题。这是我对他的作品进行的“基本”修改，以使他的示例可以进行搜索：

    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

我写了一个简单的例子来说明这个想法。

首先，编写用于在服务器端处理数据的通用处理程序（Data.ashx但这可以是网页，Web服务，任何能够返回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
                };
            }
        }
    }

然后是一个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>

该示例过于简化，但我希望它能说明如何凝视的基础知识。