jquery 、json 、ajax 、 前端控件（比如jquery ui 、 jquery easy ui 等）這些技術在網頁前端編程中都是十分重要的，
而網頁編程，比如PHP等，都是以標準的http get / post方式實現的，
而微軟的asp.net web form創新性的把http get/post換成了事件驅動的方法，這個按鈕對應一個事件，那個東西對應另一個事件.......
這種“事件驅動”的方法讓網頁編程變得想桌面程序開發一樣，不需要理會get/post亂七八糟的東西，
在某種意義上，是方便了開發人員！！
當然這種“事件驅動”的方式也會帶來別的問題，比如查看aspx頁面的網頁源代碼時，一定會看到“__VIEWSTATE”這個單詞，
viewstate這個東西還是有很多深奧的問題的，筆者也解釋不清楚！！！
雖然asp.net web form看起來有很多問題存在，但是本人還是非常喜歡asp.net web form的。
廢話說多了，不好意思！
下面我們以jquery easy ui中的combogrid控件作爲例子，說說asp.net web form怎麼使用json.
最終的效果圖是：
首先，要說一下json是什麼東西？？
[{"Name":"阿薩德","TeacherNo":"sp001"},
{"Name":"Tom","TeacherNo":"sp002"},
{"Name":"山東省","TeacherNo":"sp003"}]
上面這個字符串就是一個json！！
json簡單來說，就是一個有標準格式的字符串
這串字符的規律是
[ {鍵:值 ， 鍵:值} , {....} ]
很簡單但是很明確！！
我們的程序中有個類叫做Teacher
public class Teacher
{
public string Name { get; set; }
public string TeacherNo { get; set; }
}//end class
要形成上面的json字符串的話，就先創建3個Teacher對象，
然後放在一個List<Teacher>裏面，
然後寫一個foreach語句，
然後一個個屬性拼起來，
string json ="[";
foreacr( var item in list)
{
string string ="Name"+item.Name;
//別的大概也是這樣
}
json+="]";
最開始學網頁編程的時候，我也是這樣傻乎乎的拼出來的，
時不時會拼錯，
這裏介紹一個神器：json.net
網址是http://json.codeplex.com/
官網可以下載，並且有很多用例，夠詳細了。
這東西超好用，對於json的序列化和反序列號都非常好用！！！
說完了json，然後我想說說asp.net web form 中的ashx文件，
他的中文叫做“一般處理程序”，
在新建項的時候可以找到！
.ashx類似.aspx文件，用於處理傳入到服務器的HTTP請求，
但它不會像.aspx文件那樣要返回處理結果和大量HTML，
它可以返回簡單的字符串、圖片等。
我一般都是用它來返回json或者接受ajax的post方法的。
上面介紹了一大堆技術，我也是一個新手，所有說錯了，別怪我啊。。
下面開始說怎麼做出combogrid的效果吧！
項目的所有文件如圖（有些是沒有的）
首先新建一個類文件，寫Teacher類
public class Teacher
{
public string Name { get; set; }
public string TeacherNo { get; set; }
}//end class
第二，新建一個ashx文件，名爲Handler1（就是默認的名字）
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
namespace webFormAjax
{
/// <summary>
/// Handler1 的摘要說明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string json = JsonConvert.SerializeObject(TeacherList());
context.Response.Write(json);
}
public bool IsReusable
{
get
{
return false;
}
}
private List<Teacher> TeacherList()
{
Teacher t1 = new Teacher { Name = "阿薩德", TeacherNo = "sp001" };
Teacher t2 = new Teacher { Name = "Tom", TeacherNo = "sp002" };
Teacher t3 = new Teacher { Name = "山東省", TeacherNo = "sp003" };
List<Teacher> list = new List<Teacher>();
list.Add(t1);
list.Add(t2);
list.Add(t3);
return list;
}
}//end class
}
這裏就用到了上面說的Json.net，
這個Newtonsoft.Json動態鏈接庫下載之後，引用就可以了。
只要用JsonConvert.SerializeObject就可以把一個List變成
[{"Name":"阿薩德","TeacherNo":"sp001"},
{"Name":"Tom","TeacherNo":"sp002"},
{"Name":"山東省","TeacherNo":"sp003"}]
是不是很簡單呢？？嘻嘻，就是這麼好用！！
這裏還有一個要說明的：
Handler1裏面的Response.Write就是用來輸出json串的！
第三步，新建一個web form ，叫做WebForm1
後臺代碼不需要改動，我們看看前臺代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="webFormAjax.WebForm1" %>
<!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>
<script src="Content/jquery.min.js" type="text/javascript"></script>
<script src="Content/jquery.easyui.min.js" type="text/javascript"></script>
<link href="Content/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="Content/themes/metro/easyui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('#text1').combogrid({
panelWidth: 450,
idField: 'TeacherNo',
textField: 'Name',
url: 'Handler1.ashx',
columns: [[
{ field: 'TeacherNo', title: '教工號', width: 60 },
{ field: 'Name', title: '名字', width: 100 }
]]
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="text1" />
</div>
</form>
</body>
</html>
前端代碼說明：
首先，引用jquery和easyui的js文件
然後針對input控件寫一段腳本，
腳本里面就是讓input控件變成combogrid，
然後他的數據來源（url）就是填剛剛寫的Handler1。
因爲Handler1輸出的就是Response.Write(json)。
另外可以看到grid裏面的列名就是Teacher的屬性名！
具體的easyui 控件是怎麼用的，這裏就不介紹了，
具體看easyui官網http://www.jeasyui.com/
總結：輸出json靠的是Handler1的Response.Write
