使用asp.net mvc 调用Action方法很简单。

一、无参数方法。

1、首先，引入jquery-1.5.1.min.js 脚本，根据版本不同大家自行选择。

  1. <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

2、在Controllers中书写前台Ajax需要调用的Action，比如：

  1. public ActionResult test1()
  2.         {
  3.             return Content("返回一个字符串");
  4.         }

这个Action返回了一个字符串。注意这里的返回，不是return View();

3、我们回到前台，假设我的功能是当页面中1个按钮单击时调用后台的Action并返回1个字符串。

  1. <input type="text" id="txt1" name="txt1" />
  2. <input type="button"  id="btnSub" name="btnSub" value="调用Action" />

如上，我的界面里放了1个文本框和1个按钮。那下面我们来实现当按钮单击时候调用后台方法返回字符并赋值给文本框的。

  1. <script type="text/javascript" language="javascript">
  2.     $(document).ready(function () {
  3.         $("#btnSub").click(function () {
  4.             $.ajax({
  5.                 type: "POST",
  6.                 url: "/Home/test1",
  7.                 data: "",
  8.                 success: function (sesponseTest) {
  9.                     $("#txt1").val(sesponseTest);
  10.                 }
  11.             });
  12.         });
  13.     });
  14. </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基础上我们稍作改动。

  1.  public ActionResult test1(string id)
  2.         {
  3.             return Content(id + "返回一个字符串");
  4.         }

这个Action需要一个参数id  ，最后还是返回了一个字符画。

2、界面上我们再添加1个文本框。

  1. <input type="text" id="txt1" name="txt1" /><br/>
  2. <input type="text" id="txt2" name="txt2" /><br/>
  3. <input type="button"  id="btnSub" name="btnSub" value="调用Action" />

此处有2个文本框，我将实现：点击按钮的时候把文本框1中的内容传递到Action进行处理，最终把返回结果显示在文本框2中。

  1. <script type="text/javascript" language="javascript">
  2.     $(document).ready(function () {
  3.         $("#btnSub").click(function () {
  4.             var tvalue=$("#txt1").val();
  5.             $.ajax({
  6.                 type: "POST",
  7.                 url: "/Home/test1",
  8.                 data: "id=" + tvalue,
  9.                 success: function (sesponseTest) {
  10.                     $("#txt2").val(sesponseTest);
  11.                 }
  12.             });
  13.         });
  14.     });
  15. </script>

细心的大家可能会发现，和上面无参数的就是多了点点改动。 这里的data: "id=" ……   带上了1个参数。id  就是我的Action 的参数的名称 id  。  然后把文本框1的值作为参数传递给Action.

多个参数呢，data的每个参数请用&&分开，如（data: "id=12345&&str=test",）……

注意这里的参数名称要和Action 的参数名称相同。

4、我们来看下最终效果。我们在文本框1中先输入内容，然后点击按钮，给文本框2赋值。

C#_ajax_demo的更多相关文章

随机推荐

  1. windows和linux间互传文件

    方法1:Xshell传输文件 用rz,sz命令在xshell传输文件 很好用,然后有时候想在windows和linux上传或下载某个文件,其实有个很简单的方法就是rz,sz 首先你的Ubuntu需要安 ...

  2. Tomcat 7 Connector 精读（2） 协议处理器 Http11Protocol（待续）

    . Http11Protocol是阻塞式IO的实现,上图的几个方法是它的生命周期相关的方法.

  3. org.springframework.web.filter.DelegatingFilterProxy的理解

    org.springframework.web.filter.DelegatingFilterProxy可以将filter交给spring管理. 我们web.xml中配置filter时一般采用下面这种 ...

  4. Unity3D入门之JavaScript动态创建对象

    接着上一篇Unity3D入门文章,这里继续使用JavaScript脚本语言. 调试:Unity集成了MonoDevelop编辑器,在代码某行的左侧点击,即可下一个断点.然后先关闭Unity编辑器,在M ...

  5. A Tour of Go Range continued

    You can skip the index or value by assigning to _. If you only want the index, drop the ", valu ...

  6. url 中文编解码

    unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...

  7. Qt学习笔记-1 开发环境建立

    关于Qt在这里不做过多介绍,吸引我的地方是有几点: 1.用C++开发语言: 2.多平台(wWindows.MAC.Linux.Android等): 3.界面所见几所得.其他的可以百度上了解: 从本文开 ...

  8. 把SVN添加到windows服务

    sc create SVN_Service binpath= "D:\DevTools\Subversion\bin\svnserve.exe --service --root D:\Dev ...

  9. 我的JS 类 写法

    长这样! var p,p1; //构造函数 function Person(name) { this.name = name; } //原型对象 var proto = { getName : fun ...

  10. Vim Skills——Windows利用Vundle和Github进行Vim配置和插件的同步

    OS:Windows Vim安装完成之后,目录如下 vim73:vim运行时所需的文件,对应目录为$VIMRUNTIME变量 vimfiles:第三方的文件,对应目录为$VIM/vimfiles _v ...