ASP.NET MVC中如何以ajax的方式在View和Action中传递数据

前言：写这篇随笔的时候，在url上漏写了斜线，找了好久错误，整个人都很不好。#我是猪系列

背景：之前介绍过一篇如何构建ASP.NET MVC4&JQuery&AJax&JSon示例，这一篇单独讲解如何在View和Action间传递并处理数据。

1，前台HTML代码：

1     <div>

2         <button type="button" id="btn">从视图向控制器中传递数据</button>

3         <p id="info"></p>

4     </div>

View Code

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         });

View Code

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     });

View Code

二者的结果完全相同。

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         }

View Code

注意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         }

View Code

或者后台代码如下：（以显示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;

View Code

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         }

View Code

2.2同时前台Ajax接收的代码修改如下：

1                 success: function (result) {

2                     if (result) {

3                         $("#pDisplay").text("返回信息为 " + result.Message + "\n" + "随机数为" + result.RandomNum);

4                     }

5                 }

View Code

类似的，可以将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         }

View Code