使用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的更多相关文章

随机推荐

  1. SharePoint默认的欢迎WebPart中超链接样式

    转:http://www.cnblogs.com/Bear-Study-Hard/archive/2010/03/22/1691641.html 在core.css文件中 .ms-SpLinkButt ...

  2. [转载]C#基础-Func,Action

    Func,Action 的介绍及其用法 Func是一种委托,这是在3.5里面新增的,2.0里面我们使用委托是用Delegate,Func位于System.Core命名空间下,使用委托可以提升效率,例如 ...

  3. HDU 1163 Eddy's digital Roots

    Eddy's digital Roots Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...

  4. 55人班37人进清华北大的金牌教师之32条教育建言! z

    他带的一个55人的班,37人考进清华.北大,10人进入剑桥大学.耶鲁大学.牛津大学等世界名校并获全额奖学金,其他考入复旦.南开等大学.不仅 如此,校足球冠军.校运动会总冠军.校网页设计大赛总冠军等6项 ...

  5. (转载)HTML与XHTML有什么区别

    转自:http://zhidao.baidu.com/link?url=8wvu7Jbzr-wjeKdWCwWkIiJNSpO3HHLERkgQu1QzuLOPT0zvzkHn9HbAFEjPdchP ...

  6. 求一字符串最长不重复字符子串的长度【Java 版】

    一. 前言 最近学习有点断断续续,整理的一些知识点要么不完整,要么完全没搞懂,不好拿上台面,还是先在草稿箱躺着吧.偶尔在浏览大牛博客http://coolshell.cn的时候,发现大牛业余时间也在做 ...

  7. iOS 之NSJSONReadingOptions说明【转】

    首先用代码来说明NSJSONReadingMutableContainers的作用: NSString *str = @"{\"name\":\"kaixuan ...

  8. Windows版词汇小助手V3.0发布了

    欢迎使用词汇小助手 作者:IT小小龙 电子邮箱:long_python@126.com 个人博客:http://blog.sina.com.cn/buduanqs 一款跨平台词汇查询记忆学习软件. 已 ...

  9. wuzhicms短信API 实例调用

    1.接口调用 $sendsms = load_class('sms','sms'); echo $sendsms->send_sms('18911549611', '888888', 1); / ...

  10. Express细节探究(1)——app.use(express.static)

    express相信是很多人用nodejs搭建服务器的首选框架,相关教程有很多,也教会了大家来如何使用.如果你想更深的了解他的细节,不妨和我一起来研究一下. 先来看一个每个人都用到的方法app.use( ...