在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 ,