asp.net mvc 使用Ajax调用Action 返回数据【转】
使用asp.net mvc 调用Action方法很简单。
一、无参数方法。
1、首先，引入jquery-1.5.1.min.js 脚本，根据版本不同大家自行选择。
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
2、在Controllers中书写前台Ajax需要调用的Action，比如：
public ActionResult test1()
{
return Content("返回一个字符串");
}
这个Action返回了一个字符串。注意这里的返回，不是return View();
3、我们回到前台，假设我的功能是当页面中1个按钮单击时调用后台的Action并返回1个字符串。
<input type="text" id="txt1" name="txt1" />
<input type="button" id="btnSub" name="btnSub" value="调用Action" />
如上，我的界面里放了1个文本框和1个按钮。那下面我们来实现当按钮单击时候调用后台方法返回字符并赋值给文本框的。
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#btnSub").click(function () {
$.ajax({
type: "POST",
url: "/Home/test1",
data: "",
success: function (sesponseTest) {
$("#txt1").val(sesponseTest);
}
});
});
});
</script>
很简单，下面大概介绍下用到的各个属性和方法。 $(document).ready(function () {}; -------类似我们原来写的<body onload="loat();"> 页面加载方法。但是也有区别，具体请参考官方说明。
$("#btnSub").click(function () {}; -------按钮的单击事件。此处根据各自需要自行修改了。比如（$("#btnSub").focus(function () {}……)）等等。
$.ajax({}); -------ajax方法。
type： ------- 类型，此处为“POST” 还有 "GET"类型。
url： ------- 调用的Action 书写格式 /controller/action
data: ------- 参数，因为此处没有，所以我们为""
success: function (sesponseTest) {} ------- 回调函数，就是当我的Action 执行完后，执行的方法。sesponseTest为Action返回的内容。
$("#txt1").val(sesponseTest); ------- 把返回的字符串赋值给文本框。
4、下面就是我们最终实现效果：当我们单击按钮的时候，通过Ajax调用了后台的1个Action 并返回一个字符串给文本框赋值了。
二、带参数方法。
我们实际项目中可能经常会遇到界面中需要传递1个或多个参数给Action，最终返回结果给界面的情况。那接下来我们就来看下带参数的调用方法。
1、在原来的Action基础上我们稍作改动。
public ActionResult test1(string id)
{
return Content(id + "返回一个字符串");
}
这个Action需要一个参数id ，最后还是返回了一个字符画。
2、界面上我们再添加1个文本框。
<input type="text" id="txt1" name="txt1" /><br/>
<input type="text" id="txt2" name="txt2" /><br/>
<input type="button" id="btnSub" name="btnSub" value="调用Action" />
此处有2个文本框，我将实现：点击按钮的时候把文本框1中的内容传递到Action进行处理，最终把返回结果显示在文本框2中。
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#btnSub").click(function () {
var tvalue=$("#txt1").val();
$.ajax({
type: "POST",
url: "/Home/test1",
data: "id=" + tvalue,
success: function (sesponseTest) {
$("#txt2").val(sesponseTest);
}
});
});
});
</script>
细心的大家可能会发现，和上面无参数的就是多了点点改动。 这里的data: "id=" …… 带上了1个参数。id 就是我的Action 的参数的名称 id 。 然后把文本框1的值作为参数传递给Action.
多个参数呢，data的每个参数请用&&分开，如（data: "id=12345&&str=test",）……
注意这里的参数名称要和Action 的参数名称相同。
4、我们来看下最终效果。我们在文本框1中先输入内容，然后点击按钮，给文本框2赋值。
asp.net mvc 使用Ajax调用Action 返回数据【转】的更多相关文章
- ASP.NET MVC利用ajax把action的JavaScript注册到页面并执行
相信大家在做Webform时经常会遇到在页面的后台CS文件中根据数据运行结果修改页面显示样式.显示(隐藏).或者弹出框,当时我们会用到ScriptManage或者Page来向页面注册一段js来实现页面 ...
- Asp.Net Mvc - 在OnResultExecut* 拦截Action返回的HTML
在Asp.Net MVC项目中通过重写ActionFilterAttribute中的方法,我们就可以在轻松的在Action方法执行前后做一些特殊的操作如:[身份认证.日志记录.内容截取等]. 但是我们 ...
- ASP.Net MVC 在ajax接收controller返回值为Json数据
首先,再次回忆一下ajax的标准用法:(这张图写的比较详细了)(转) 页面部分ajax代码: $.ajax({ url: "/Home/Login?account=&q ...
- Asp.Net MVC 利用ReflectedActionDescriptor判断Action返回类型
System.Web.Mvc.ReflectedActionDescriptor descriptor = filterContext.ActionDescriptor as System.Web.M ...
- Ajax调用Conrtoller返回数据
前端ajax function doRefund(){ $.ajax({ type: "POST", catch: false, url: "@Url.Action(&q ...
- asp.net mvc 使用ajax请求 控制器 (PartialViewResult)分部的action，得到一个分部视图(PartialView)的HTML，进行渲染
在asp.net mvc 使用ajax请求获取数据的时候,我们一般是返回json或者xml,然后解析这些数据进行渲染,这样会比较麻烦,可以请求一个 分部action,返回一个分部视图 直接可以渲染,不 ...
- Asp.Net MVC 使用 Ajax
Asp.Net MVC 使用 Ajax Ajax 简单来说Ajax是一个无需重新加载整个网页的情况下,可以更新局部页面或数据的技术(异步的发送接收数据,不会干扰当前页面). Ajax工作原理 Ajax ...
- ASP.NET MVC之Ajax如影随行
一.Ajax的前世今生 我一直觉得google是一家牛逼的公司,为什么这样说呢?<舌尖上的中国>大家都看了,那些美食估计你是百看不厌,但是里边我觉得其实也有这样的一个哲学:关于食材,对于种 ...
- ASP.NET MVC 实现AJAX跨域请求方法《1》
ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...
随机推荐
- Linux -- 目录基本操作(1)
cd 切换目录 1.切换到指定目录下 #cd 相对/绝对目录 [root@localhost ~]# cd /home/tom/demo [root@localhost demo]# 2.切换到某个用 ...
- iOS学小程序从0到发布(适合iOS开发看)
Emmmm,最近一波失业潮.富某康.某团.摩某.京某.知某.某浪.58 某大面积裁员,那么在这个千钧一发之际,单纯iOS开发也着实不好过,回过头看一下,裁掉的都是单一选手,为了节约成本公司留下的都是身 ...
- Java并发编程（九）线程间协作（下）
上篇我们讲了使用wait()和notify()使线程间实现合作,这种方式很直接也很灵活,但是使用之前需要获取对象的锁,notify()调用的次数如果小于等待线程的数量就会导致有的线程会一直等待下去.这 ...
- 给Extjs的window弹窗的关闭事件添加验证
问题:我想在window点击右上角叉关闭时添加一些验证,来确定是否关闭? 实现: 首先想到的是拦截window的关闭事件,在它关闭前添加验证,但是有一个问题是,如何阻止它的关闭和组织关闭后,如何让它再 ...
- Javascript--将十进制数字转换成罗马数字显示
下午在FCC(FreeCodeCamp)中文网上做到一道练习题:将给定的数字转换成罗马数字.折磨了一个多小时,终于能把基本功能给实现了.过程如下: 关于罗马数字 罗马数字的详细介绍可见百度,或者罗马数 ...
- STM32（5）——通用定时器基本定时器
1.STM32的Timer简介 STM32中一共有11个定时器,其中2个高级控制定时器,4个普通定时器和2个基本定时器,以及2个看门狗定时器和1个系统嘀嗒定时器. 其中系统嘀嗒定时器是前文中所描述的S ...
- 生成并调用so动态库
本文更新于2019-01-03. 生成库 头文件fn.h如下: #ifndef __FN_H__ #define __FN_H__ #ifdef __cplusplus extern "C& ...
- ACM--移动桌子--贪心--HDOJ 1050--Moving Tables
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem Descript ...
- Hystrix使用
Hystrix是Netflix开源的一款容错系统,能帮助使用者码出具备强大的容错能力和鲁棒性的程序.如果某程序或class要使用Hystrix,只需简单继承HystrixCommand/Hystrix ...
- IDEA-Debug调试操作
基本概念 快捷键和eclipse还是有区别的,不过基本概念是相通的 Step into F7 单步调试进入函数内部. Step over F8 单步调试不进入函数内部,如果装了金山词霸2006则 ...