前言：寫(xiě)這篇隨筆的時(shí)候，在url上漏寫(xiě)了斜線，找了好久錯(cuò)誤，整個(gè)人都很不好。#我是豬系列

背景：之前介紹過(guò)一篇如何構(gòu)建ASP.NET MVC4&JQuery&AJax&JSon示例，這一篇單獨(dú)講解如何在View和Action間傳遞并處理數(shù)據(jù)。

1，前臺(tái)HTML代碼：

1 <div> 2 <button type="button" id="btn">從視圖向控制器中傳遞數(shù)據(jù)</button> 3 <p id="info"></p> 4 </div> View Code

2，前臺(tái)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前的‘/'千萬(wàn)不能漏掉，博主已經(jīng)開(kāi)始懷疑人生了。

　　　　　data: {Name: "SharpL", City: "北京", Age: 18}，數(shù)據(jù)就是這樣以匿名對(duì)象的方式傳遞過(guò)去的。

或者JS代碼這樣來(lái)寫(xiě)：

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代碼這樣來(lái)寫(xiě)：

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" + "隨機(jī)數(shù)為" + result.RandomNum); 11 } 12 } 13 }); 14 }); 15 }) View Code

三者的結(jié)果完全相同。

3，后臺(tái)代碼如下：

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}歲，來(lái)自{2}",name,age,city); 7 return Content(tmp); 8 } View Code

注意Action的參數(shù)為STU，直接獲取以ajax方式傳遞過(guò)來(lái)的數(shù)據(jù)。

或者后臺(tái)代碼如下：(項(xiàng)目中所使用的經(jīng)典方式）

1 public ActionResult AjaxBackData() 2 { 3 var stu = new STU(); 4 this.UpdateModel(stu); 5 string tmp=string.Format("{0}年齡{1}歲，來(lái)自{2}",stu.Name,stu.Age,stu.City); 6 return Content(tmp); 7 } View Code

或者后臺(tái)代碼如下：（以顯示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}歲，來(lái)自{2}",stu.Name,stu.Age,stu.City) 6 }; 7 return actionResult; View Code

Content只能夠返回Content，當(dāng)需要返回多項(xiàng)數(shù)據(jù)時(shí)，返回Json(),代碼如下：

1 public ActionResult Test() 2 { 3 var stu = new Stu(); 4 this.UpdateModel(stu); 5 var tmp= string.Format("{0}{1}歲，來(lái)自{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同時(shí)前臺(tái)Ajax接收的代碼修改如下：

1 success: function (result) { 2 if (result) { 3 $("#pDisplay").text("返回信息為 " + result.Message + "\n" + "隨機(jī)數(shù)為" + result.RandomNum); 4 } 5 } View Code

類(lèi)似的，可以將Json修改為顯式返回JsonResult對(duì)象，代碼如下：

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}歲，來(lái)自{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

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/SharpL/p/4681596.html

總結(jié)

以上是生活随笔為你收集整理的ASP.NET MVC中如何以ajax的方式在View和Action中传递数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。