asp.net mvc 利用Ajax挪用Action 前往数据

来源：北大青鸟新途校区|发布时间：2016-05-21|浏览量：

应用asp.net mvc 挪用Action方式很俭朴。

1、无参数方式。

1、起首，引进jquery-1.5.1.min.js 剧本，依照版本分歧巨匠自行选择。

 s cript src= @Url.Content( ~/s cripts/jquery-1.5.1.min.js ) type= text/javas cript /s cript 

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个按钮。那上面我们来完成当按钮单击时辰挪用后台方式前往字符并赋值给文本框的。

 s cript type="text/javas cript" language="javas cript"  $(document).ready(function () { $("#btnSub").click(function () { $.ajax({ type: "POST", url: "/Home/test1", data: "", success: function (sesponseTest) { $("#txt1").val(sesponseTest); /s cript 

很俭朴，上面大要先容下用到的各个属性和方式。
$(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 并前往一个字符串给文本框赋值了。

4、上面就是我们究竟完成结果：当我们单击按钮的时辰，经由过程Ajax挪用了后台的1个Action 并前往一个字符串给文本框赋值了。2、带参数方式。

我们理想项目中可以常常会碰到界面中需求传送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中。

 s cript type="text/javas cript" language="javas cript"  $(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); /s cript 

认真的巨匠可以会发现，和下面无参数的就是多了点点改动。
这里的data: id= ……   带上了1个参数。id  就是我的Action 的参数的称号 id  。  然后把文本框1的值作为参数传送给Action.

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

注重这里的参数称号要和Action 的参数称号不异。

4、我们来看下究竟结果。我们在文本框1中先输出内容，然后点击按钮，给文本框2赋值。

上一篇：.Net框架的构成

下一篇：ASP.NET运转机制