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

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

背景:之前介绍过一篇如何构建 MVC&AJax&JSon示例,这一篇单独讲解如何在View和Action间传递并处理数据。

1,前台HTML代码:

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

2,前台JS代码:

ASP.NET MVC中如何以ajax的方式在View和Action中传递数据
         $("#btn").click(function() {
$.ajax({
async:true,
type: "POST",
url: "/AjaxTest/AjaxBackData",
cache: false,
data: {
Name: "SharpL", City: "北京", Age:
},
success: function (result) {
$("#info").text(result);
}
});
});
ASP.NET MVC中如何以ajax的方式在View和Action中传递数据

JS代码讲解:注意url: "/AjaxTest/AjaxBackData",AjaxTest前的‘/'千万不能漏掉,博主已经开始怀疑人生了。

     data: {Name: "SharpL", City: "北京", Age: 18},数据就是这样以匿名对象的方式传递过去的。

或者JS代码这样来写:

ASP.NET MVC中如何以ajax的方式在View和Action中传递数据
     $(function () {
$("#btn").click(function () {
var data = "";
data += "&Name=" +encodeURI("SharpL");
data += "&Age=" + encodeURI();
data += "&City=" + encodeURI("北京");
$.ajax({
async:true,
type: "POST",
url: "/AjaxTest/AjaxBackData",
cache: false,
data: data,
success: function (result) {
$("#info").text(result);
}
});
});
});
ASP.NET MVC中如何以ajax的方式在View和Action中传递数据

或者JS代码这样来写:

ASP.NET MVC中如何以ajax的方式在View和Action中传递数据
     $(function () {
$("#btn1").click(function () {
$.ajax({
type: "POST",
url: "/TestAjax/Test?City=北京&Name=SharpL&Age=18",
cache: false,
data: null,
success: function (result) {
if (result) {
$("#pDisplay").text("返回信息为 " + result.Message + "\n" + "随机数为" + result.RandomNum);
}
}
});
});
})
ASP.NET MVC中如何以ajax的方式在View和Action中传递数据

三者的结果完全相同。

3,后台代码如下:

ASP.NET MVC中如何以ajax的方式在View和Action中传递数据
         public ActionResult AjaxBackData(STU stu)
{
string name = stu.Name;
int age = stu.Age;
string city = stu.City;
string tmp=string.Format("{0}年龄{1}岁,来自{2}",name,age,city);
return Content(tmp);
}
ASP.NET MVC中如何以ajax的方式在View和Action中传递数据

注意Action的参数为STU,直接获取以ajax方式传递过来的数据。

或者后台代码如下:(项目中所使用的经典方式)

ASP.NET MVC中如何以ajax的方式在View和Action中传递数据
         public ActionResult AjaxBackData()
{
var stu = new STU();
this.UpdateModel(stu);
string tmp=string.Format("{0}年龄{1}岁,来自{2}",stu.Name,stu.Age,stu.City);
return Content(tmp);
}
ASP.NET MVC中如何以ajax的方式在View和Action中传递数据

或者后台代码如下:(以显示ContentResult的方式返回)前两种方式返回Content,其返回值仍然是ContentResult。

ASP.NET MVC中如何以ajax的方式在View和Action中传递数据
             var actionResult = default(ContentResult);
var stu =new Stu();
this.UpdateModel(stu);
actionResult=new ContentResult(){
Content=string.Format("{0}{1}岁,来自{2}",stu.Name,stu.Age,stu.City)
};
return actionResult;
ASP.NET MVC中如何以ajax的方式在View和Action中传递数据

Content只能够返回Content,当需要返回多项数据时,返回Json(),代码如下:

ASP.NET MVC中如何以ajax的方式在View和Action中传递数据
         public ActionResult Test()
{
var stu = new Stu();
this.UpdateModel(stu);
var tmp= string.Format("{0}{1}岁,来自{2}", stu.Name, stu.Age, stu.City);
Random r=new Random();
int t=r.Next(,);
return Json(new { Message = tmp, RandomNum = t });
}
ASP.NET MVC中如何以ajax的方式在View和Action中传递数据

2.2同时修改对于返回json格式的数据的前台Ajax接收的代码,修改如下:

                 success: function (result) {
if (result) {
$("#pDisplay").text("返回信息为 " + result.Message + "\n" + "随机数为" + result.RandomNum);
}
}

类似的,可以将Json修改为显式返回JsonResult对象,代码如下:

ASP.NET MVC中如何以ajax的方式在View和Action中传递数据
         public ActionResult Test()
{
var actionResult = default(JsonResult);
var stu = new Stu();
this.UpdateModel(stu);
var tmp= string.Format("{0}{1}岁,来自{2}", stu.Name, stu.Age, stu.City);
Random r=new Random();
int t=r.Next(,);
actionResult = new JsonResult()
{
Data = new { Message = tmp, RandomNum = t }
};
return actionResult;
}
ASP.NET MVC中如何以ajax的方式在View和Action中传递数据

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

上一篇:Effective Java 76 Write readObject methods defensively


下一篇:机器学习笔记----四大降维方法之PCA(内带python及matlab实现)