JSONによるデータ連携

WEBアプリケーションでクライアントからサーバーへのデータ受け渡し方法は色々ありますが、属性が複数ある場合はカンマ区切りで渡すことがあります。
しかし、この場合要素の何番目が何の要素かの判断が必要で、属性が増えれば増えるほど面倒なことになります。

例えば、０番目が社員番号、１番目が氏名、２番目が年齢、などの場合です。大抵はhiddenなどのサーバーコントロールに値を入れて、サーバー側でpostbackした際に受け取ってsplitする形になります。

var syainCD = 12345;
var syainName = "佐々木";
var age = 40;
hidValue.value = syainCD  + "," + syainName  + "," + age;

string[] values = hidValue.value.split(',')

こういった場合は、JSONでデータ受け渡しを行うとクラスへデータを渡せるので非常に便利です。
先にサーバー側でクラスを作っておきます。

public class JSonClass {
   public string SyainCD { get; set; }
   public string SyainName { get; set; }
   public string Age{ get; set; }
}

Javascript側でそれぞれの属性ごとに値を設定し、最後は「JSON.stringify」で変換します。

var json = { "SyainCD": syaiinCD, "SyainName": syainName,"Age": age};
hidValue.value = JSON.stringify(json);

サーバー側はPostbackした際にサーバーコントロールに格納されたJSON形式データをデシリアライズします。

var data = JsonSerializer.Deserialize<JSonClass >(hidSeq.Value);

こうすることで、サーバー側ではクラスのプロパティとして属性の値を取得することが可能です。

また、複数要素が絡む場合、つまり上記属性を持つデータを複数人扱うような場合は、配列にして渡します。

var json = [];
json.push({ "SyainCD": syaiinCD, "SyainName": syainName,"Age": age});
・・・
hidValue.value = JSON.stringify(json);

この場合サーバー側も配列にする必要があるので、Listなどジェネリックコレクションで受け取るとよいです。

var data = JsonSerializer.Deserialize<List<JSonClass> >(hidSeq.Value);

佐々木屋