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 ...
随机推荐
- 在 Confluence 6 中的 Jira 高级权限
启用嵌套用户组(Enable Nested Groups) 为嵌套组启用或禁用支持. 在启用嵌套用户组之前,你需要检查你在 JIRA 服务器中的嵌套用户组是否启用了.当嵌套用户组启用成功后,你可以将一 ...
- Android设置全局Context
新建一个java继承Application类 import android.app.Application; import android.content.Context; /** * 编写自定义Ap ...
- Import Data from *.xlsx file to DB Table through OAF page(转)
Use Poi.jar Import Data from *.xlsx file to DB Table through OAF page Use Jxl.jar Import Data from ...
- IOS-整体框架类图
Cocoa框架是iOS应用程序的基础,了解Cocoa框架,对开发iOS应用有很大的帮助. 1.Cocoa是什么? Cocoa是OS X和 iOS操作系统的程序的运行环境. 是什么因素使一个程序成为Co ...
- Nginx在windows上安装 及 Nginx的配置及优化
https://www.cnblogs.com/Chiler/p/8027167.html http://www.runoob.com/linux/nginx-install-setup.html 前 ...
- 最新小程序教学视频,欢迎加小程序交流群免费获取(微信小程序开发(交流QQ群:604788754)
本群会定期分享在工作中做的一些小程序页面,不懂之处也可以随时咨询,可以互相交流学习. 教学视频直接入群,在群公告中显示,优秀小程序代码在群文件中免费获取. 今日代码小程序首页欢迎页面,效果图如下.代码 ...
- 小程序中bindtap绑定函数,函数参数event对数据的处理
WXML: <view id=" bindtap="tapName"> Click me! </view> JS: Page({ tapName: ...
- oracle_sql语句的大全
# 建立数据库struts CREATE DATABASE IF NOT EXISTS struts DEFAULT CHARACTER SET GBK; 1.登录:(管理员)conn sys/p ...
- MyEclipse关联SVN下载项目到本地
目的:在MyEclipse上关联SVN,从SVN服务器上,下载项目,到本机的MyEclipse上,并运行 准备工作 1.安装好Tomcat和MyEclipse 2.安装好Plsql,并配置连接好Ora ...
- java 缓冲区大小与下载速度的关系
1.对于缓冲区空间的设定,要根据具体情况来定,如果存在大量的长信息(比如文件传输),将缓冲区定义的大些,可能更好的利用网络资源,如果更多的是短信息(比如聊天消息),使用小的缓冲区可能更好些,这样刷新的 ...