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

Posted jack_孟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ASP.NET MVC中如何以ajax的方式在View和Action中传递数据相关的知识,希望对你有一定的参考价值。

前言:写这篇随笔的时候,在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         }
复制代码

 



出处:http://www.cnblogs.com/SharpL/p/4681596.html

以上是关于ASP.NET MVC中如何以ajax的方式在View和Action中传递数据的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 AJAX 将数据发布到 ASP.NET MVC 控制器?

事实证明Ajax的世界更需要ASP.NET MVC

如何使用ajax在asp.net mvc中上传多个图像

如何在 ASP.NET MVC 中使用 Ajax 调用刷新局部视图?

如何在 ASP.NET MVC 中进行长轮询 AJAX 请求? [复制]

如何在带有 ADO.NET 的 ASP.NET Core MVC 中使用 jQuery Ajax 自动完成