ASP.NET WebPages (MVCではない)で、Razor(cshtml)で書くのがマイブームです。ASPXより圧倒的に書きやすく、MVCほどコードの分散が起こらず、一人でコードを書くには最適な選択だと感じています。
さて、cshtml上で、サーバーサイドのデータでもって、ページング、ソート、フィルター付きのテーブルを探していた時に jQuery DataTables にたどり着きました。ほかにも類似のTableソリューションはたくさんありますが、これが、軽量、簡単で ASP.NET Web Pagesと非常に相性がいいと思ったので紹介します。
「DataTables https://datatables.net/index はjQueryのプラグインライブラリで、HTMLのtableに機能を追加する形で動作します。」
詳細は原典を参照してもらうことにし、ASP.NET Web Pages から使用する場合のキーポイントに絞ると
- AJAXによるサーバーサイドからのデータの取り出しに対応。
- サーバーサイドのページング、ソート、フィルター（検索）に対応している。
- サーバーへのリクエストは FORMエンコーディングで、サーバー側のパラメータの取り出しに Request.Form が使える。
- クライアントへの応答は json で、サーバーからは Json(System.Web.Helpers.Json)で簡単に応答できる。
- 受け渡すデータは型が規定されていない（ただの配列渡し）のでルーズだが、簡単。サーバーサイドでLINQと anonymous object を組み合わせれば非常に簡単。
サンプルとしてシステムにある System.Globalization.CultureInfo を列挙してテーブルに表示するコードを書いてみました。1ページアプリとしてもこんなに簡単に短く、高機能テーブルを書くことができました。
http://www.yo-ki.com/study/ASPNET/ExperimentDataTables
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73 | @{
if( IsPost ){
if( UrlData[0] == "GetList" ){
String sEcho = Request.Form["sEcho"];
int iDisplayStart = Request.Form["iDisplayStart"].AsInt(),
iDisplayLength = Request.Form["iDisplayLength"].AsInt(),
iSortingCols = Request.Form["iSortingCols"].AsInt();
String sSearch = Request.Form["sSearch"];
var data = new List<object>();
var all = System.Globalization.CultureInfo.GetCultures(System.Globalization.CultureTypes.AllCultures);
var filtered = all.AsEnumerable<System.Globalization.CultureInfo>();
if( !String.IsNullOrEmpty(sSearch) ){
filtered = filtered.Where(p => p.DisplayName.Contains(sSearch) || p.Name.Contains(sSearch) || p.ThreeLetterISOLanguageName.Contains(sSearch) || p.TwoLetterISOLanguageName.Contains(sSearch));
}
for( var i=0; i<iSortingCols; i++ ){
var iSort = Request.Form["iSortCol_" + i].AsInt(-1);
var ascending = Request.Form["sSortDir_" + i];
if( ascending == "asc" ){
filtered = filtered.OrderBy(p => iSort == 0 ? p.Name : iSort == 1 ? p.DisplayName : iSort == 2 ? p.TwoLetterISOLanguageName : p.ThreeLetterISOLanguageName);
}
else
{
filtered = filtered.OrderByDescending(p => iSort == 0 ? p.Name : iSort == 1 ? p.DisplayName : iSort == 2 ? p.TwoLetterISOLanguageName : p.ThreeLetterISOLanguageName);
}
}
var result = filtered;
foreach( var ci in filtered.Skip(iDisplayStart).Take(iDisplayLength) ){
var row = new List<object>();
row.Add(ci.Name);
row.Add(ci.DisplayName);
row.Add(ci.TwoLetterISOLanguageName);
row.Add(ci.ThreeLetterISOLanguageName);
data.Add(row);
}
Response.Clear();
Response.ContentType = "text/json";
Response.Write( Json.Encode(new {
sEcho = sEcho,
iTotalRecords = all.Count(),
iTotalDisplayRecords = filtered.Count(),
aaData = data
}));
Response.End();
return;
}
}
}
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" type="text/css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js"></script>
<script>
$(document).ready(function () {
$("#sampleTable").dataTable({
"bProcessing": true,
"bServerSide": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"sServerMethod": "POST",
"sAjaxSource": '@(Request.Path)/GetList'
});
});
</script>
<div>
<table id="sampleTable">
<thead>
<tr><th>Name</th><th>DisplayName</th><th>TwoLetterISOLanguageName</th><th>ThreeLetterISOLanguageName</th></tr>
</thead>
<tbody>
</tbody>
</table>
</div>
|