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代码:

$("#btn").click(function() {
$.ajax({
async:true,
type: "POST",
url: "/AjaxTest/AjaxBackData",
cache: false,
data: {
Name: "SharpL", City: "北京", Age:
},
success: function (result) {
$("#info").text(result);
}
});
});

JS代码讲解:注意url: "/AjaxTest/AjaxBackData",AjaxTest前的‘/'千万不能漏掉,博主已经开始怀疑人生了。
data: {Name: "SharpL", City: "北京", Age: 18},数据就是这样以匿名对象的方式传递过去的。
或者JS代码这样来写:

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

或者JS代码这样来写:

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

三者的结果完全相同。
3,后台代码如下:

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

注意Action的参数为STU,直接获取以ajax方式传递过来的数据。
或者后台代码如下:(项目中所使用的经典方式)

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

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

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;

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

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

2.2同时修改对于返回json格式的数据的前台Ajax接收的代码,修改如下:
success: function (result) {
if (result) {
$("#pDisplay").text("返回信息为 " + result.Message + "\n" + "随机数为" + result.RandomNum);
}
}
类似的,可以将Json修改为显式返回JsonResult对象,代码如下:

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

出处:http://www.cnblogs.com/SharpL/p/4681596.html
ASP.NET MVC中如何以ajax的方式在View和Action中传递数据的更多相关文章
- [asp.net mvc 奇淫巧技] 01 - 封装上下文 - 在View中获取自定义的上下文
我们在asp.net 开发中已经封装了最强大的HttpContext,我们可以在HttpContext中可以获取到几乎任何想获取的东西,也可以在HttpContext写入需要返回客户端的信息.但是这些 ...
- ASP.NET MVC WebGrid – Performing true AJAX pagination and sorting 【转】
ASP.NET MVC WebGrid – Performing true AJAX pagination and sorting FEBRUARY 27, 2012 14 COMMENTS WebG ...
- [ASP.NET MVC] 利用动态注入HTML的方式来设计复杂页面
原文:[ASP.NET MVC] 利用动态注入HTML的方式来设计复杂页面 随着最终用户对用户体验需求的不断提高,实际上我们很多情况下已经在按照桌面应用的标准来设计Web应用,甚至很多Web页面本身就 ...
- [asp.net mvc 奇淫巧技] 02 - 巧用Razor引擎在Action内生成Html代码
在web开发中经常会遇到在内部代码中获取Html,这些Html是需要和数据进行一起渲染.并不是直接把Html代码返回给客户端.这样的做法有很多应用场景,例如分页.Ajax一次性获取几段Html片段.生 ...
- 【ASP.NET MVC】View与Controller之间传递数据
1 概述 本篇文章主要从操作上简要分析Controller<=>View之间相互传值,关于页面之间传值,如果感兴趣,可参考我另外一篇文章ASP.NET 页面之间传值的几种方式 . Co ...
- 一步步学习ASP.NET MVC3 (5)——View从Action中获得数据
请注明转载地址:http://www.cnblogs.com/arhat 在上一章中,我们把Razor的模板技术给大家介绍了一下,当然模板中还有其他的知识点,这个以后我们还会继续讲解.本章我们主要讨论 ...
- 【MVC架构】——怎样利用Json在View和Controller之间传递数据
在MVC架构中,尽管非常多东西和三层非常相似,可是也有非常大的差别.就比方传递数据.在三层架构中,传递数据就仅仅要一层返回,另外一层用同样类型的变量来接收即可了.在MVC中,事实上原理是一样的,Con ...
- 14、ASP.NET MVC入门到精通——Ajax
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 Unobtrusive Ajax使用方式(非入侵式) 非入侵式,通俗来讲:就是将嵌入在Html中的JavaScript全部取出来,放在单独的 ...
- 转:ASP.Net MVC:校验、AJAX与过滤器
原文地址:http://blog.jobbole.com/85005/ 一.校验 — 表单不是你想提想提就能提 1.1 DataAnnotations(数据注解) 位于 System.Componen ...
随机推荐
- Sasha and a Very Easy Test CodeForces - 1109E (数学,线段树)
大意: 给定n元素序列, q个操作: (1)区间乘 (2)单点除(保证整除) (3)区间求和对m取模 要求回答所有操作(3)的结果 主要是除法难办, 假设单点除$x$, $x$中与$m$互素的素因子可 ...
- UVA-10271 Chopsticks (线性DP)
题目大意:在n个数中,找出k个三元组(a<=b<=c),求最小的(a-b)*(a-b)之和. 题目分析:将所有数从大到小排序,定义dp(i,j)表示前 i 个数中找出 j 个三元组时的最小 ...
- 牛客网——E求最值
链接:https://www.nowcoder.com/acm/contest/59/E来源:牛客网 题目描述 给你一个长为n的序列a 定义f(i,j)=(i-j)2+g(i,j)2 g是这样的一个函 ...
- DATEADD 和 CAST 函数
where cast(soh.orderdate as date)=cast(dateadd(day,-1,getdate()) as date) 这一代码在sql 2005 不适用,使用conver ...
- 利用padding-top/padding-bottom百分比,进行占位和高度自适应
在css里面,padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候,参照的是父元素的宽度. 比如:父元素宽度是100px, 子元素p ...
- 跟我一起学习ASP.NET 4.5 MVC4.0(二)
上一篇文章中(跟我一起学习ASP.NET 4.5 MVC4.0(一))我们基础的了解了一下ASP.NET MVC4.0的一些比较简单的改变,主要是想对于MVC3.0来说的.因为这一些列主要是要给ASP ...
- bzoj1601
题解: 简单生成树 代码: #include<bits/stdc++.h> using namespace std; ; int n,dis[N],f[N],a[N][N],ans; in ...
- 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165202
2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 20165202 一.下载 虚拟机环境 Kali所需要虚拟机软件为VMware,在之前其他课程中使用的即为VMw ...
- Delphi发布了社区版及Delphi 10.3展望
http://altd.embarcadero.com/download/radstudio/10.2/delphicbuilder10_2_3__93231.iso,注册机在这里 注册号要自己去申请 ...
- Spring学习(一)--概述
Spring是什么? 是一个框架,是为了解决企业应用开发的复杂性而创建的框架 是一个框架,是一个轻量级的控制反转和面向切面的容器框架 从大小与开销两方面而言Spring都是轻量的 通过控制反转(IoC ...