Json.NETをさわってみる

C# ASP.NET JavaScript

XMLHttpRequestを使ったAjaxなWebサイトを開発する時、サーバーからのレスポンスにXMLを利用するよりもJavaScriptネイティブなJSONを利用したほうが扱いやすいので、最近はJSONの方が人気があるらしい。

それじゃあASP.NETでもJSONを使ってみますかということで.NETからJSONを利用するためのライブラリを探してみたらJson.NETというのがあった。

そういや.NET3.5のWCFではJSON形式でのシリアル化がサポートされているらしい。

プロジェクトの作成

テキトーに「Webアプリケーションプロジェクト」を作成する。
クライアントサイドのAjaxライブラリには最近お気に入りのjQueryを使う。

プロジェクト構成

JSON形式で返すデータの型をC#で定義する。

Customer.cs
public class Customer {
    private int id;
    private string name;

    public int ID {
        get { return id; }
        set { id = value; }
    }
    public string Name {
        get { return name; }
        set { name = value; }
    }

    public Customer() { }
    public Customer(int id, string name) {
        this.id = id;
        this.name = name;
    }
}

Json.NETを使うとこの型をJSON文字列にシリアル化／逆シリアル化できるわけだ。

サーバーサイドのコード

json.aspxというWebFormを作成し、そのPage_LoadイベントハンドラでCustomer型のインスタンスをJSON形式に変換してレスポンス出力に書き込む。

json.aspx
protected void Page_Load(object sender, EventArgs e) {
    List<Customer> dataSet = new List<Customer>();
    dataSet.Add(new Customer(1, "ジョン"));
    dataSet.Add(new Customer(2, "ボブ"));
    dataSet.Add(new Customer(3, "ジャック"));
    dataSet.Add(new Customer(4, "ディラン・マッケイ"));

    Response.ContentType = "text/javascript";
    Response.Output.Write(
        JavaScriptConvert.SerializeObject(dataSet)
    );
    Response.End();
}

このページにブラウザでアクセスするとJSON形式のレスポンスが返ってくる。

[{"ID":1,"Name":"ジョン"},{"ID":2,"Name":"ボブ"},{"ID":3,"Name":"ジャック"},{"ID":4,"Name":"ディラン・マッケイ"}]

クライアントサイドのコード

index.htmというHTMLページを作成し、そこに以下のコードを記述する。

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Json.NET テスト</title>
    <script type="text/javascript" src="js/jquery-1.2.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $.getJSON("./json.aspx", function(data) {
                $.each(data, function(i, customer) {
                    $("#dataTable").append(
                        $("<tr>").append(
                            $("<td>").text(customer.ID),
                            $("<td>").text(customer.Name)
                        )
                    );
                });
            });
        });
    </script>
</head>
<body>
    <table id="dataTable" border="1">
        <tr>
            <th>ID</th>
            <th>名前</th>
        </tr>
    </table>
</body>
</html>

画面が表示されたらjson.aspxページにアクセスして、取得したJSONデータをテーブル形式に整形して表示する。

この画面にアクセスすると↓こんな画面が表示される。

こんな感じで簡単に.NETからJSON形式のデータを扱う事ができる。
まぁ、実際問題これをどう使うかっていうと今のところ想像がつかない。ASP.NETの世界ではあまりお呼びでない気がする。

しかしJavaScriptの表現力っていうのはすごいね。いや、この場合jQueryがすごいのかな？
なんにせよjQueryはイカス！