当前位置:编程学习 > asp >>

在ASP.NET MVC2.0中使用Jquery库进行Action调用

 

MVC的一般模式都是Controller里的Action对应一个View页面,网上给的例子也大都是这样的场景,这个Action要么是List,Create,Edit,每个页面对应一个从Action中返易做图来的ActionResult,页面之间的跳转也就会有刷新,当时看MVC关于Ajax的介绍时,自己只是知道在script文件夹下放着需要的js库,但并不知道怎样使用,不过自己当时想的是这些js应该可以在不刷新的情况下进行Controller中的调用。于是奔着这个思路开始

例如一个普通的Action(写在HomeController中的)

public JsonResult GetJson() { return Json(new { Message1 = "It is worked", Message2 = "……again!" }); }

 

返回一个Json对象

页面代码:

 

ByJQuery:<br />

 

Region1:<span id="region1"></span><hr />

 

Region2:<span id="region2"></span><hr />< p>

 

<input type="button" onclick="DoSomething()" value="OK"/></p>

 

<script type="text/javascript">

 

function DoSomething()

 

{ $.getJSON("Home/GetJson", null, function(data)

 

{ $("#region1").text(data.Message1);

 

$("#region2").text(data.Message2); }) }

 

</script>

 

在页面放置两个span标签用于显示结果,一个按钮用于触发ajax事件,利用jquery的getJSON方法,第一个参数是用于指明请求地址,在这里就是Action的地址,第二个为可选参数(待发送Key/value 参数),第三个参数为载入成功时回调函数,在此我们需要将它显示在两个span上(关于getJSON函数的具体内容参阅jquery的api),好了,这样一个简单的利用jquery调用Action的实例就完成了。

 

当然简单的还不能解决具体的问题,因为毕竟上面的action没有参数,很多时候我们编写的Action是有参数的,这时候需要我们从页面中取得参数,传给Action进行处理:

public ActionResult JqueryDemo(string content)

 

{

 

//对传入进来的content进行一系列的操作

 

data.Add(content);//将传入一参数添加到List<string>类型的data中去

 

return Json(data);

 

}

 

页面代码段:

ByJqueryDemo:<br />

 

<input type="text" id="input1" />

 

<input type="button" value="ByJquery" onclick="GetByJquery()" />

 

<div id="JqueryResult"></div>

 

<script type="text/javascript" >

 

function GetByJquery()

 

{ $.ajax( {

 

type: "POST",

 

url: "/Home/JqueryDemo",

 

data: "content=" + $("#input1").val(),

 

success: function(msg) { $("#JqueryResult").text(msg); } });

 

}

 

</script>

 

其中的ajax函数有很多option,而且所有的option都是可选的,而我们传参数时就需要填写data选项把参数传过去,如果是多个参数则要加上&

这样参数就可以顺利的传到Action中了,关于ajax函数的其他用法可以参考jquery的api,因为我也是个初学者,所以就先写到这吧。

摘自:zhongshuling2009的专栏

补充:Web开发 , ASP.Net ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,