ASP.NET MVC中如何以ajax的方式在View和Action中传递数据
分类:
IT文章
•
2022-03-27 22:21:32
前言：写这篇随笔的时候，在url上漏写了斜线，找了好久错误，整个人都很不好。#我是猪系列
背景：之前介绍过一篇如何构建 MVC&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
或者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 + "
" + "随机数为" + result.RandomNum);
11 }
12 }
13 });
14 });
15 })
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同时修改对于返回json格式的数据的前台Ajax接收的代码，修改如下：
![]()
1 success: function (result) {
2 if (result) {
3 $("#pDisplay").text("返回信息为 " + result.Message + "
" + "随机数为" + 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
出处：http://www.cnblogs.com/SharpL/p/4681596.html
前言：写这篇随笔的时候，在url上漏写了斜线，找了好久错误，整个人都很不好。#我是猪系列
背景：之前介绍过一篇如何构建 MVC&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
或者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 + "
" + "随机数为" + result.RandomNum);
11 }
12 }
13 });
14 });
15 })
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同时修改对于返回json格式的数据的前台Ajax接收的代码，修改如下：
![]()
1 success: function (result) {
2 if (result) {
3 $("#pDisplay").text("返回信息为 " + result.Message + "
" + "随机数为" + 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
