asp.net mvc 使用Ajax
使用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的更多相关文章
- ASP.NET MVC 实现AJAX跨域请求方法《1》
ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...
- asp.net mvc 使用ajax请求 控制器 (PartialViewResult)分部的action,得到一个分部视图(PartialView)的HTML,进行渲染
在asp.net mvc 使用ajax请求获取数据的时候,我们一般是返回json或者xml,然后解析这些数据进行渲染,这样会比较麻烦,可以请求一个 分部action,返回一个分部视图 直接可以渲染,不 ...
- 在Asp.Net MVC中用Ajax回调后台方法
在Asp.Net MVC中用Ajax回调后台方法基本格式: var operData = ...; //传递的参数(action中定义的) var type = ...; //传递的参数(action ...
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...
- Asp.Net MVC 使用 Ajax
Asp.Net MVC 使用 Ajax Ajax 简单来说Ajax是一个无需重新加载整个网页的情况下,可以更新局部页面或数据的技术(异步的发送接收数据,不会干扰当前页面). Ajax工作原理 Ajax ...
- Asp.Net MVC Unobtrusive Ajax
1. Unobtrusive JavaScript介绍 说到Unobtrusive Ajax,就要谈谈UnobtrusiveJavaScript了,所谓Unobtrusive JavaScript ...
- ASP.NET MVC之Ajax如影随行
一.Ajax的前世今生 我一直觉得google是一家牛逼的公司,为什么这样说呢?<舌尖上的中国>大家都看了,那些美食估计你是百看不厌,但是里边我觉得其实也有这样的一个哲学:关于食材,对于种 ...
- ASP.NET MVC 实现 AJAX 跨域请求
ASP.NET MVC 实现AJAX跨域请求的两种方法 和大家分享下Ajax 跨域的经验,之前也找了好多资料,但是都不行,后来看到个可行的修改了并测试下 果然OK了 希望对大家有所帮助! 通常发送 ...
- ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则
ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...
- Asp.net MVC 中Ajax的使用 [分享]
文章转自 http://www.huiyoumi.wang/upload/forum.php?mod=viewthread&tid=75&extra= Asp.net MVC 抛弃了A ...
随机推荐
- Android Touch(2)View.OnTouchEvent与View.OnTouchListener区别
1,在官方文档 docs/reference/android/view/View.OnTouchListener.html 中对OnTouchListener的描述 Interface definit ...
- MS UI Automation Introduction
MS UI Automation Introduction 2014-09-17 MS UI Automation是什么 UIA架构 UI自动化模型 UI自动化树概述 UI自动化控件模式概述 UI 自 ...
- Codeforces Round #320 (Div. 2) D. "Or" Game 数学
D. "Or" Game time limit per test 2 seconds memory limit per test 256 megabytes input stand ...
- hdu4427Math Magic
4427 dp[i][j][k] i为K位的最小公倍数 j为k位的和 k以滚动数组的形式 这题最棒的是 有一个强有力的剪枝 组成公倍数m的肯定都是M的质因子 这样1000里面最多就30多个 复杂度可过 ...
- 使用ajaxfileupload插件提示Uncaught TypeError:has no method 'handleError'
最近使用ajaxfileupload插件上传文件时,后台正常运行时,可以正常使用:当后台出现异常时,上传后没有任何反应,也无任何返回信息,使用chrome查看时,发现ajaxfileupload插件报 ...
- 使用JAVA直观感受快速排序与冒泡排序的性能差异
初学算法,肯定会编写排序算法 其中两个最为有名的就是冒泡排序和快速排序 理论上冒泡排序的时间复杂度为O(N^2),快速排序的时间复杂度为O(NlogN) 下面本门使用JAVA,分别编写三段排序程序 对 ...
- git大文件管理
由于git在每一个commit时都会变动过的文件全部保存(不像其他的系统,只做文件增量存储),外加未变动文件的引用,这样如果在文件系统中有一些大的二进制文件,比如图片,视频,那么很快你的repo就将变 ...
- Qt之QLabel
简述 QLabel提供了一个文本或图像的显示,没有提供用户交互功能. 一个QLabel可以包含以下任意内容类型: 内容 设置 纯文本 使用setText()设置一个QString 富文本 使用setT ...
- Codeforces Round #275 (Div. 2)
A. Counterexample 题意:给出l,r,找出使得满足l<a<b<c<r,同时满足a,b的最大公约数为1,b,c的最大公约数为1,且a,b的最大公约数不为1 因为题 ...
- Jquery源码中的Javascript基础知识(三)
这篇主要说一下在源码中jquery对象是怎样设计实现的,下面是相关代码的简化版本: (function( window, undefined ) { // code 定义变量 jQuery = fun ...