在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的专栏