【问题标题】:jQuery DataTables server-side processing using ASP.NET WebForms使用 ASP.NET WebForms 的 jQuery DataTables 服务器端处理
【发布时间】:2011-04-01 16:19:02
【问题描述】:

问题:

  • 使用 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 };
        }
    }
}

【问题讨论】:

  • 我已经在我的整个项目中用 PHP 实现了数据表,我不得不创建自己的类,因为该示例在特定任务之外并没有真正有用(而且很难理解)。您应该为您的班级的请求和响应处理大约 100 行。我通常不与 ASP.net 打交道,但我会看看能否为您找到一些东西。
  • 我测试了这段代码,发现过滤对象时分页和记录数保持不变。

标签: javascript asp.net jquery ajax datatables


【解决方案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>

这个例子过于简单了,但我希望它能说明如何被盯着看的基础知识。

【讨论】:

  • 正是我需要的踢。非常感谢。 - 我必须补充一点,只要我将您的 .ashx 类重命名为小写“数据”(它在 .aspx 页面中的使用方式),它就可以工作。
  • 您说过:“首先编写一个通用处理程序来处理服务器端的数据(Data.ashx,但这可能是网页、Web 服务、任何能够返回 JSON 格式的服务器端脚本)数据)”。我不想使用处理程序,我的项目有很多网格,我想将它们集中到 Web 服务中。但是如何处理来自 web 服务 web 方法的上下文呢?
  • @Vinh,什么网络服务?您是在谈论启用 SOAP 的服务吗?
  • @DarinDimitrov 您刚刚拯救了一位经验丰富的保加利亚开发人员完成他最后一个分配项目的两个月。谢谢你,吨。
  • 嘿彼得,当我能帮助同胞时总是很高兴:-)
【解决方案2】:

您列出的示例页面实际上是在初始化时排序、分页、过滤。基本上,您通过查询字符串传递这些数据。

类似:

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

话虽如此,如果您想要覆盖某些行为或想要扩展 dataTable 的功能,您有几个选择:Extending dataTable functionalityCustomizing Scrolling

您可以按照上面的示例自定义过滤、排序和分页

【讨论】:

    【解决方案3】:

    我是 asp.Net 开发人员...请记住,.net 开发人员习惯于使用 .net 控件而不是 javascript 控件来构建网页。

    不同之处在于:asp.net 控件是服务器端控件,您无需自己编写 javascript 即可管理它,而是使用 C#/VB.net 进行编程。 asp.net控件在网站运行时自动生成客户端javascript控件。

    它的方法更“现代”并且非常强大。

    因此,如果您是 .net 开发人员,我建议您使用这种方法。如果您是 javascript 开发人员并且您只构建应用程序的客户端接口,那么您可能需要一个 webService,它以 XML 格式提供服务器端数据,您可以通过 HTTP 调用和读取这些数据。但是,要“搜索”,通过 AJAX 提供“分页”和“排序”,您需要开发服务器端...

    【讨论】:

    • 我知道这一点,这就是为什么我要问是否有人使用 ASP.NET 成功地将 XML/jSON 数据返回到 jQuery 数据表。我也是一个 .NET 开发人员,我可以从头开始解决这个问题,但我首先想看看是否有人用 .NET 找到了数据表。 :)
    • 我敢打赌它会比.Net服务器控制方式运行得更快。
    【解决方案4】:

    【讨论】:

    • 不是真的,但谢谢。我指的是 jQuery 的特定插件。
    【解决方案5】:

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

    这个人已经让 ajax 与 asp.net 和数据表一起工作。

    【讨论】:

    • 遗憾的是,该示例不使用 AJAX 进行分页:“我们要做的将加载所有数据(最初在大型数据集上可能会更慢)”
    猜你喜欢
    • 2011-01-13
    • 2021-05-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-11
    相关资源
    最近更新 更多