2014/04/19
ここを読んでみて、この記事が誤解を与えそうだったので、文章を修正しました。
ASP.NETのJsonを返すサンプルをググっても、「ASP.NET MVC」だったりして「ASP.NET Web Form」のJsonを扱うサンプルを見つけることがなかなか難しかったりします。（見つかったとしても、ASP.NETの初心者には難しすぎたりと....）
まぁ、というわけで「ASP.NET Web Form」のすごくシンプルなサンプルを以下に示しておきます。
-
TestJson.aspx
Json形式のデータを取得するため、Json形式のデータをResponse.Output.Writeするためだけのページです。
基本的に他のページから参照されるだけで、このページが直接参照されることはないです。 -
TestJson.aspx.cs
TestJson.aspxのコードですね。匿名型のオブジェクトをJavaScriptSerializerで文字列に変換しResponse.Output.Writeしています。 -
Output.aspx
TestJson.aspxからJson形式のデータを取得して、実際にそのデータを表示するページです。
今回のサンプルでは、jQueryのajaxメソッドを使用して取得しています。
ajaxメソッドの第一引数のメンバにdataType: 'json'を指定してあげると、urlで指定したページの内容をjson形式のデータだと認識してくれるのでありがたいですね。
その結果はsuccess: function(data){ ... }のdataにオブジェクトとして格納されているので、data.hogeのようにJson形式のデータを簡単にアクセスできます。
これを実行するとhttp://localhost:9672/Output.aspxのようにしてアクセスできるページになります。
サンプル
Output.aspx
<!doctype html>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Output.aspx.cs" Inherits="Output" %>
<html>
<head>
<script src="javascripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#json').on('mouseover', function(){
var self = this;
$.ajax({
url: 'TestJson.aspx',
type: "get",
dataType: 'json',
success: function(data){
$(self).html(data.hoge);
}
});
});
});
</script>
</head>
<body>
<secsion>
<div id="json">マウスオーバーするとここに出力します。</div>
</secsion>
</body>
</html>
TestJson.aspx.cs
using System;
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
dynamic dataSet = new { hoge = "foo" };
var s = new System.Web.Script.Serialization.JavaScriptSerializer();
Response.ContentType = "text/javascript";
Response.Output.Write(s.Serialize(dataSet));
Response.End();
}
}
TestJson.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestJson.aspx.cs" Inherits="TestJson" %>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
</form>
</body>
</html>