前言：写这篇随笔的时候，在url上漏写了斜线，找了好久错误，整个人都很不好。#我是猪系列
背景：之前介绍过一篇如何构建 MVC&AJax&JSon示例，这一篇单独讲解如何在View和Action间传递并处理数据。
1，前台html代码：
1 <div> 2 <button type="button" id="btn">从视图向控制器中传递数据</button> 3 <p id="info"></p> 4 </div>
2，前台JS代码：
1 $("#btn").click(function() { 2 $.ajax({ 3 async:true, 4 type: "POST", 5 url: "/AjaxTest/AjaxBackData", 6 cache: false, 7 data: { 8 Name: "SharpL", City: "北京", Age: 18 9 }, 10 success: function (result) { 11 $("#info").text(result); 12 } 13 }); 14 });
JS代码讲解：注意url: "/AjaxTest/AjaxBackData",AjaxTest前的‘/\'千万不能漏掉，博主已经开始怀疑人生了。
data: {Name: "SharpL", City: "北京", Age: 18}，数据就是这样以匿名对象的方式传递过去的。
或者JS代码这样来写：
1 $(function () { 2 $("#btn").click(function () { 3 var data = ""; 4 data += "&Name=" +encodeURI("SharpL"); 5 data += "&Age=" + encodeURI(18); 6 data += "&City=" + encodeURI("北京"); 7 $.ajax({ 8 async:true, 9 type: "POST", 10 url: "/AjaxTest/AjaxBackData", 11 cache: false, 12 data: data, 13 success: function (result) { 14 $("#info").text(result); 15 } 16 }); 17 }); 18 });
或者JS代码这样来写：
1 $(function () { 2 $("#btn1").click(function () { 3 $.ajax({ 4 type: "POST", 5 url: "/TestAjax/Test?City=北京&Name=SharpL&Age=18", 6 cache: false, 7 data: null, 8 success: function (result) { 9 if (result) { 10 $("#pDisplay").text("返回信息为 " + result.Message + "\\n" + "随机数为" + result.RandomNum); 11 } 12 } 13 }); 14 }); 15 })
三者的结果完全相同。
3，后台代码如下：
1 public ActionResult AjaxBackData(STU stu) 2 { 3 string name = stu.Name; 4 int age = stu.Age; 5 string city = stu.City; 6 string tmp=string.Format("{0}年龄{1}岁，来自{2}",name,age,city); 7 return Content(tmp); 8 }
注意Action的参数为STU，直接获取以ajax方式传递过来的数据。
或者后台代码如下：(项目中所使用的经典方式）
1 public ActionResult AjaxBackData() 2 { 3 var stu = new STU(); 4 this.UpdateModel(stu); 5 string tmp=string.Format("{0}年龄{1}岁，来自{2}",stu.Name,stu.Age,stu.City); 6 return Content(tmp); 7 }
或者后台代码如下：（以显示ContentResult的方式返回）前两种方式返回Content，其返回值仍然是ContentResult。
1 var actionResult = default(ContentResult); 2 var stu =new Stu(); 3 this.UpdateModel(stu); 4 actionResult=new ContentResult(){ 5 Content=string.Format("{0}{1}岁，来自{2}",stu.Name,stu.Age,stu.City) 6 }; 7 return actionResult;
Content只能够返回Content，当需要返回多项数据时，返回Json(),代码如下：
1 public ActionResult Test() 2 { 3 var stu = new Stu(); 4 this.UpdateModel(stu); 5 var tmp= string.Format("{0}{1}岁，来自{2}", stu.Name, stu.Age, stu.City); 6 Random r=new Random(); 7 int t=r.Next(1,10); 8 return Json(new { Message = tmp, RandomNum = t }); 9 }
2.2同时修改对于返回json格式的数据的前台Ajax接收的代码，修改如下：
1 success: function (result) { 2 if (result) { 3 $("#pDisplay").text("返回信息为 " + result.Message + "\\n" + "随机数为" + result.RandomNum); 4 } 5 }
类似的，可以将Json修改为显式返回JsonResult对象，代码如下：
1 public ActionResult Test() 2 { 3 var actionResult = default(JsonResult); 4 var stu = new Stu(); 5 this.UpdateModel(stu); 6 var tmp= string.Format("{0}{1}岁，来自{2}", stu.Name, stu.Age, stu.City); 7 Random r=new Random(); 8 int t=r.Next(1,10); 9 actionResult = new JsonResult() 10 { 11 Data = new { Message = tmp, RandomNum = t } 12 }; 13 return actionResult; 14 }