1. 陽気なソフト/Yokinsoft
    新着 開発プロジェクト BLOG プロフィール アーカイブ
  2. BLOG

ASP.NET WebPagesと相性のよい jQuery DataTables

Thursday, February 13, 2014 BLOG

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>