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 ...
随机推荐
- laravel 懒加载
故事背景是什么呢? 目录大家都知道吧,一般有几个层级,根据公司需求,要将目录以树的形式展示出来,为了提高访问速度,这些目录数据要一次性读取出来的.这样的话就涉及到了查询,优化查询次数是一个很关键的事情 ...
- python 爬取京东手机图
初学urllib,高手勿喷... import re import urllib.request #函数:每一页抓取的30张图片 def craw(url,page): imagelist = []# ...
- oracle EBS上传和下载文件(转)
最近一直在做一个工作流的项目,最终用户要求在发送消息的时候可以附带附件,这个又是给我的一个难题.在网上查了一下ORACLE上传资料,找到了黄建华前辈写的<Oracle EBS Forms开发指南 ...
- 84. Largest Rectangle in Histogram *HARD* -- 柱状图求最大面积 85. Maximal Rectangle *HARD* -- 求01矩阵中的最大矩形
1. Given n non-negative integers representing the histogram's bar height where the width of each bar ...
- Splunk Enterprise architecture——转发器本质上是日志收集client附加负载均衡,indexer是分布式索引,外加一个集中式管理协调的中心节点
Splunk Enterprise architecture and processes This topic discusses the internal architecture and proc ...
- spring boot 学习(五)SpringBoot+MyBatis(XML)+Druid
SpringBoot+MyBatis(xml)+Druid 前言 springboot集成了springJDBC与JPA,但是没有集成mybatis,所以想要使用mybatis就要自己去集成. 主要是 ...
- vuex2.0+两个小例子
首先vuex概念比较多,一定要搞懂里面的概念,可以参考官网Vuex2.0概念,我写此文的目的是希望能对前端爱好者提供个参考,加深对vuex2.0各核心概念的理解. 废话少说,直接上干货.这是官网上的一 ...
- bzoj1082
题解: 暴搜+二分+剪枝 二分答案,暴力判断是否有解 然后加上剪枝 代码: #include<bits/stdc++.h> using namespace std; ; int rest, ...
- Kafka消费者APi
Kafka客户端从集群中消费消息,并透明地处理kafka集群中出现故障服务器,透明地调节适应集群中变化的数据分区.也和服务器交互,平衡均衡消费者. public class KafkaConsumer ...
- nested exception is java.sql.SQLException: Incorrect string value: '\xE7\x99\xBB\xE9\x99\x86...' for column 'image' at row 1
HTTP Status 500 - Hibernate operation: could not insert: [cn.itcast.shop.product.vo.Product]; uncate ...