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

  1. ASP.NET MVC 实现AJAX跨域请求方法《1》

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

  2. asp.net mvc 使用ajax请求 控制器 (PartialViewResult)分部的action，得到一个分部视图(PartialView)的HTML，进行渲染

    在asp.net mvc 使用ajax请求获取数据的时候,我们一般是返回json或者xml,然后解析这些数据进行渲染,这样会比较麻烦,可以请求一个 分部action,返回一个分部视图 直接可以渲染,不 ...

  3. 在Asp.Net MVC中用Ajax回调后台方法

    在Asp.Net MVC中用Ajax回调后台方法基本格式: var operData = ...; //传递的参数(action中定义的) var type = ...; //传递的参数(action ...

  4. [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传

    原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...

  5. Asp.Net MVC 使用 Ajax

    Asp.Net MVC 使用 Ajax Ajax 简单来说Ajax是一个无需重新加载整个网页的情况下,可以更新局部页面或数据的技术(异步的发送接收数据,不会干扰当前页面). Ajax工作原理 Ajax ...

  6. Asp.Net MVC Unobtrusive Ajax

    1.   Unobtrusive JavaScript介绍 说到Unobtrusive Ajax,就要谈谈UnobtrusiveJavaScript了,所谓Unobtrusive JavaScript ...

  7. ASP.NET MVC之Ajax如影随行

    一.Ajax的前世今生 我一直觉得google是一家牛逼的公司,为什么这样说呢?<舌尖上的中国>大家都看了,那些美食估计你是百看不厌,但是里边我觉得其实也有这样的一个哲学:关于食材,对于种 ...

  8. ASP.NET MVC 实现 AJAX 跨域请求

    ASP.NET MVC 实现AJAX跨域请求的两种方法 和大家分享下Ajax 跨域的经验,之前也找了好多资料,但是都不行,后来看到个可行的修改了并测试下 果然OK了   希望对大家有所帮助! 通常发送 ...

  9. 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 ...

  10. Asp.net MVC 中Ajax的使用 [分享]

    文章转自 http://www.huiyoumi.wang/upload/forum.php?mod=viewthread&tid=75&extra= Asp.net MVC 抛弃了A ...

随机推荐

  1. eclipse中maven项目部署到tomcat

    其实maven项目部署到tomcat的方式很多,我从一开始的打war包到tomcat/webapps目录,到使用tomcat-maven插件,到直接使用servers部署,一路来走过很多弯路. 下面就 ...

  2. ISE MAP报错： Unsupported programming for BSCAN block and JTAG_CHAIN attribute value 1的解决方法

    2014-04-16 17:35:30 ISE MAP报错: Unsupported programming for BSCAN block and JTAG_CHAIN attribute valu ...

  3. ios用户控件

    22:48:452015-03-16说道用控件,很地东方都在用.用好了,可以加快开发进度,提高可维护性,程序的稳定,健壮性,用不好,也可以提高经验值啊,下次就好了,算是学习成本吧. 不同语言,不同项目 ...

  4. linux 多处理器概念

    Linux 提出了 Multi-Processing 的概念,它的调度器可以将操作系统的线程均分到各个核(或硬件线程)上去执行,以此达到并行计算的目的,从而也可以极大地提高系统的性能. 实现计数器 1 ...

  5. 修改Eclipse格式化代默认长度

    eclipse 默认设置的换行长度为80, 格式化代码后,同一个方法里面参数也经常被,换行,非常难看 1.Java代码打开Eclipse的Window菜单,然后 Preferences->Jav ...

  6. UVa572 - Oil Deposits

    解题思路:好久没写搜索了,练练手,陶冶情操.不多说,直接贴代码: #include<cstdio> #include<cstring> #include<algorith ...

  7. T-SQL备忘(2)：聚合函数运算和NULL

    我们看表的数据: 而select AVG(Age) from Member1的结果为27.自己算一下就知道136/6 =22.666.而不是27,因此知道实际上Age为NULL的行没有参与运算.即: ...

  8. 【UVa-442】矩阵链乘——简单栈练习

    题目描述: 输入n个矩阵的维度和一些矩阵链乘表达式,输出乘法的次数.如果乘法无法进行,输出error. Sample Input 9 A 50 10 B 10 20 C 20 5 D 30 35 E ...

  9. C++宏定义详解

    一.#define的基本用法     #define是C语言中提供的宏定义命令,其主要目的是为程序员在编程时提供一定的方便,并能在一定程度上提高程序的运行效率,但学生在学习时往往不能 理解该命令的本质 ...

  10. Java Observable 模式

    一.Observer模式的意图: 在对象的内部状态发生变化时,自动通知外部对象进行响应. 二.Observer模式的构成: ·被观察者:内部状态有可能被改变,而且又需要通知外部的对象 ·观察者:需要对 ...