使用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调用Action 返回数据【转】的更多相关文章

  1. ASP.NET MVC利用ajax把action的JavaScript注册到页面并执行

    相信大家在做Webform时经常会遇到在页面的后台CS文件中根据数据运行结果修改页面显示样式.显示(隐藏).或者弹出框,当时我们会用到ScriptManage或者Page来向页面注册一段js来实现页面 ...

  2. Asp.Net Mvc - 在OnResultExecut* 拦截Action返回的HTML

    在Asp.Net MVC项目中通过重写ActionFilterAttribute中的方法,我们就可以在轻松的在Action方法执行前后做一些特殊的操作如:[身份认证.日志记录.内容截取等]. 但是我们 ...

  3. ASP.Net MVC 在ajax接收controller返回值为Json数据

    首先,再次回忆一下ajax的标准用法:(这张图写的比较详细了)(转) 页面部分ajax代码: $.ajax({            url: "/Home/Login?account=&q ...

  4. Asp.Net MVC 利用ReflectedActionDescriptor判断Action返回类型

    System.Web.Mvc.ReflectedActionDescriptor descriptor = filterContext.ActionDescriptor as System.Web.M ...

  5. Ajax调用Conrtoller返回数据

    前端ajax function doRefund(){ $.ajax({ type: "POST", catch: false, url: "@Url.Action(&q ...

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

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

  7. Asp.Net MVC 使用 Ajax

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

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

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

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

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

随机推荐

  1. Annotation原理

    为什么使用注解: 1.通过注解,可保存源数据在Java源代码中:并且注解不同于注释,注解享有编译期的类型检查保护. 2.可在描述符性质的类或接口中抽取重复性的工作,通过注解来简化与自动化这些工作. 注 ...

  2. c#网络加密传输

    网上已经有很多测试,我就不多说了.先说说我的测试. 1.net framework 都应该合适. 2.RSACryptoServiceProvider类在.net core 下无法调用xml导出方法( ...

  3. nodejs中npm以及yarn常用指令

    1.npm下载相关 1.npm install/i vue //下载vue的包 2.npm i vue --save-dev / -D //下载vue的包,并添加到开发依赖中 3.npm i //下载 ...

  4. [NOI2015]软件包管理器(树链剖分,线段树)

    题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖(即下载安装这个 ...

  5. putty登录出现access denied的解决办法

    [转]https://www.aliyun.com/jiaocheng/152659.html 在/etc/ssh/sshd_config 中有个 PermitRootLogin, 改成“Permit ...

  6. mac安装配置mysql

    目录 mac安装配置mysql 1.mysql的安装 2.设置root用户的密码 3.分别执行一下命令 4.配置mysql环境变量 mac安装配置mysql 1.mysql的安装 ​ 安装过程十分简单 ...

  7. Immutable.js 以及在 react+redux 项目中的实践

    来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...

  8. Redis 之持久化

    目录 一.前言 二.持久化类型之 RDB 三.持节化类型之AOF 四.Redis 持久化类型的抉择 五.持久化的恢复 六.持久化问题的分析定位与优化 七.回顾总结 一.前言 首先,来回顾下前面文章的知 ...

  9. [笔记] FireDAC DataSet 导入及导出 JSON

    刚好需要将 FireDAC DataSet (TFDDataSet, TFDQuery...) 转成 JSON,网上找了一圈,原来从 XE6 开始就支持这个功能了: 储存: DataSet1.Save ...

  10. 用python实现购物车功能

    """功能要求:1.要求用户输入自己拥有的总资产,例如:20002.显示商品列表的序号,商品名称,商品价格,让用户根据序号选择商品,然后加入购物车 例如: 1 电脑 19 ...