C#_ajax_demo
使用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赋值。
C#_ajax_demo的更多相关文章
随机推荐
- 禅道,然之和蝉知入驻VM Depot
Posted on 四月 21, 2015 by 陈阳 近日, 易软天创与微软开放技术合作,在虚拟镜像中国站点vmdepot.msopentech.cn上成功部署易软天创的集成管理环境,为希望快速基于 ...
- 嵌入式Linux USB WIFI驱动的移植
硬件平台:飞思卡尔MX258开发板 操作系统:Linux2.6.31 WIFI: RT2860 USB WIFI模组 交叉编译环境:gcc version 4.1.2 调试步骤: 第一步:测试U ...
- Failed to lunch test error when run with Appium (已解决)
[2015-08-10 15:09:07 - androidtest1] Performing android.test.InstrumentationTestRunner JUnit launch[ ...
- 求一字符串最长不重复字符子串的长度【Java 版】
一. 前言 最近学习有点断断续续,整理的一些知识点要么不完整,要么完全没搞懂,不好拿上台面,还是先在草稿箱躺着吧.偶尔在浏览大牛博客http://coolshell.cn的时候,发现大牛业余时间也在做 ...
- JSP的笔记
JSP是一种特殊的Servlet,全称是java server page,属于服务器端语言 就JSP和Servle,HTML比较,三者的优缺点简略如下: Servlet: 缺点:不适合作为HTML的响 ...
- #pragma alloc_text 与 ALLOC_PRAGMA
百度标题中的两部分,可以找到很多文章,现将收集到的其中两篇整理如下: 转载链接:http://hi.baidu.com/billbeggar/item/c378e2ea39a5daeffa42bada ...
- HDU 1540 Tunnel Warfare 线段树区间合并
Tunnel Warfare 题意:D代表破坏村庄,R代表修复最后被破坏的那个村庄,Q代表询问包括x在内的最大连续区间是多少 思路:一个节点的最大连续区间由(左儿子的最大的连续区间,右儿子的最大连续区 ...
- 卡特兰数 BZOJ3907 网格 NOIP2003 栈
卡特兰数 卡特兰数2 卡特兰数:主要是求排列组合问题 1:括号化矩阵连乘,问多少种方案 2:走方格,不能过对角线,问多少种方案 3:凸边型,划分成三角形 4:1到n的序列进栈,有多少种出栈方案 NOI ...
- Storm因机器断电等,启动supervisor异常
Storm因机器断电等,启动supervisor错误 因机器断电或其他异常导致的supervisor意外终止,再次启动时报错: 2014-08-13 10:36:03 b.s.event [ERROR ...
- HDU-4655 Cut Pieces 数学,贪心
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4655 先不考虑相临的有影响,那么总数就是n*prod(ai),然后减去每个相邻的对总数的贡献Σ( Mi ...