平时公司使用的ASP.NET MVC3来开发Web项目，其实在ASP.NET中已经原生的支持JSON。所以基本不需要引进Newtonsoft.Json.dll。下面看在MVC4中，后台生成JSON数据，前端使用Ajax调用。然后就是前端使用POST请求，发送JSON格式，后台程序来处理。
1.后台生成JSON格式数据，前端使用Ajax调用
后台代码:
1 2 3 4 5 6 7 8 9 10 11 12 | public JsonResult GetList()
{
ArrayList eventlist = new ArrayList(); for (int i = 0; i < 3; i++)
{
Hashtable ht = new Hashtable();
ht.Add("eventid", i + 1);
ht.Add("eventname", "测试活动");
ht.Add("eventdata", "2014-04-02");
ht.Add("eventlocation", "公司");
eventlist.Add(ht);
} return Json(new { list = eventlist, count = eventlist.Count }, JsonRequestBehavior.AllowGet);
}
|
前端调用代码：
1 2 3 4 5 6 7 8 | $.ajax({
url: "/Home/GetList",
success: function (data) { var eventlist =data.list; for(var index in eventlist){
console.log(eventlist[index].eventname);
}
console.log(data.count);
}
});
|
2.前端使用POST请求，发送JSON格式数据给后台
页面放置一个button，代码片段为：<input type="button" id="btn_send" value="Send" />
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $("#btn_send").click(function () { var person1 = new Object();
person1.Name = "Superman";
person1.Age = 20; var person2 = new Object();
person2.Name = "BBB";
person2.Age = 22; var arr = [];
arr.push(person1);
arr.push(person2);
$.ajax({
url: '/Home/AddUser',
type: "POST",
data: JSON.stringify(arr),
success: function (data) {
console.log(data);
}
});
});
|
后台代码：
1 2 3 4 5 6 7 8 9 10 11 | [HttpPost] public JsonResult AddUser()
{ string json = string.Empty; using(var reader=new StreamReader(HttpContext.Request.InputStream))
{
json = reader.ReadToEnd();
} bool result = false; string message = string.Empty; var personlist = new JavaScriptSerializer().Deserialize<List<Person>>(json); foreach(Person p in personlist){
result = true;
message += p.Name + ":" + p.Age;
} return Json(new { result=result,message=message});
} public class Person
{ public string Name { get; set; } public int Age { get; set; }
}
|
很多人会问我，使用了MVC3，为什么不在前端使用Model，然后绑定数据，这样后台处理方便，而已编辑的时候，前端基本不要做什么事情。其实这样考虑是为了把前端和后台完全分离出来，前端使用AngularJS做数据的绑定。前端和后台数据的传输格式就使用JSON。后面我们会研究ASP.NET Web API如何做到前端和后台完全分离的。
