ASP.NET Webフォームを使用したjQuery DataTablesサーバー側処理
問題：
- aSP.NET Webフォームを使用した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 };
}
}
}
このアイデアを説明する簡単な例を書きました。
サーバー側でデータを処理するための汎用ハンドラー（Data.ashxしかし、これは、Webページ、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>
例は単純化しすぎていますが、見つめる方法の基本を示していることを願っています。
リストしたサンプルページは、初期化時に実際に並べ替え、ページ分割、フィルタリングを行います。基本的に、クエリ文字列を介してこれらのデータを渡します。
何かのようなもの：
sAjaxSource": "../examples_support/server_processing.ashx?SortBy=FirstName&FilterBy=StackOverFlow"
そうは言っても、いくつかの動作をオーバーライドする場合、またはdataTableの機能を拡張する場合は、いくつかのオプションがあります。 dataTable機能の拡張カスタマイズスクロール
上記の例に従って、フィルタリング、並べ替え、ページ付けをカスタマイズできます。
多分これは助けになるでしょうか？ http://www.codeproject.com/KB/aspnet/ASPNET_DataTable_to_JSON.aspx
私はasp.Net開発者です... .net開発者は、javascriptコントロールではなく.netコントロールを使用してWebページを構築するのに使用されていることに注意してください。
違いは次のとおりです。asp.netコントロールはサーバー側のコントロールであり、javascriptを自分で記述せずに管理しますが、C＃/ VB.netでプログラミングします。 asp.netコントロールは、Webサイトの実行時にクライアント側のJavaScriptコントロールを自動的に生成します。
そのアプローチはより「モダン」で本当に強力です。
したがって、.net開発者の場合は、このアプローチを使用することをお勧めします。 JavaScript開発者であり、アプリケーションのクライアント側インターフェースのみを構築している場合、おそらく、HTTP経由で呼び出して読み取ることができるXML形式でサーバー側データを提供するwebServiceが必要です。しかし、「検索」するには、AJAXを介して「ページ付け」と「ソート」を提供します。サーバー側を開発する必要があります...
http://naspinski.net/post/REAL-AJAX-with-AspNet-（not-AspNet-AJAX）.aspx
この男は、asp.netとデータテーブルでajaxを動作させました。