最近学习.net mvc，特此记录一下jquery在其中的用法；
通过简单的例子来说明一下ajax请求在.net MVC中的使用。
首先明确一下目的：网页中有两个输入框，当监听到输入框有输入动作时，ajax请求后台查询相应数据，然后显示响应数据。
下面开始动手：
一、项目准备
1、新建asp.net mvc新项目；ps: 本人环境：vs2013
2、将jQuery文件拷贝到Content目录下；
二、服务器端
1、HomeController中新建方法：AjaxResponseTest()，用来显示视图。代码如下：
public ActionResult AjaxResponseTest()
{
return PartialView();
}
2、HomeController中新建QueryByYm方法，用来响应Ajax请求。代码如下：
public ActionResult QueryByYm()
{
// Json(queryRst.ToList(), JsonRequestBehavior.AllowGet);
return Content(DateTime.Now.ToString());
}
这里并没有什么动态处理，如果要获得参数，可直接使用 Request.QueryString["y"] 来获得，然后查询数据库或者进行其它操作，再返回需要的结果即可。
如果返回Json格式，可以使用Json方法，但注意，如果是Get请求，VS会报错，需要加入 JsonRequestBehavior.AllowGet参数。
三、前台
1、Views/Home路径下新建AjaxResponseTest.cshtml，内容如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="~/Content/themes/Jquery/jquery-1.4.1.min.js"></script>
<script src="~/Content/js/AjaxMvcTest.js"></script>
<title>AjaxMvcTest</title>
</head>
<body>
<div id="queryKw">
<label>年份：</label>
<input id="iyear" name="queryInput" type="text" value="" autocomplete="off"><br />
<label>月份：</label>
<input id="iMonth" name="queryInput" type="text" value="" autocomplete="off">
</div>
<div id="response"><p></p></div>
</body>
</html>
这个文件并没有用到Razor视图引擎，可以自己直接建并改好名称就行。注意jquery-1.4.1.min.js和AjaxMvcTest.js两个js文件的引用路径就好了。
2、content目录中新建AjaxMvcTest.js文件，用来发送前台请求，内容如下：
$(document).ready(function(){
$.each($("#queryKw [name=queryInput]"), function (idx, item) { jQuery(item).get(0).addEventListener("input", function (obj) { GetResponse(); }) });
});
function GetResponse()
{
var y = $("#iyear").val();
var m = $("#iMonth").val();
$.ajax({
url: 'QueryByYm',
datatype: "json",
data:
{
y: y,
m:m
},
success: function (data)
{
$("#response p").html(data);
},
error: function () {
alert("未知原因，加载失败！");
}
})
}
上面第一行给相应的控件添加了监听事件，输入框有动作时调用GetResponse函数向后台发送请求。url即为控制器中的方法名称。data中是参数。获得响应后，将响应数据添加到页面相应的地方。
好了，下面来参观一下成果：
在输入的时候，下面的日期会发生变化。效果如下：
如果服务器端返回的是JSON格式的数据，使用 eval(data)来获得JSON对象，然后使用each方法循环遍历添加就好了。
可以将以下方法稍加改造：
在html中添加：
<select id="userSelect"></select>
然后修改QueryByYm()方法为：
public ActionResult QueryByYm()
{
List<SelectListItem> list = new List<SelectListItem> {
(new SelectListItem(){Text="op1", Value= "1"}),
(new SelectListItem(){Text="op2", Value= "2"}),
(new SelectListItem(){Text="op3", Value= "3"})
};
return Json(list.ToList(), JsonRequestBehavior.AllowGet);
//return Content(DateTime.Now.ToString());
}
最后AjaxMvcTest.js的GetResponse()的success项中修改响应：
success: function (data)
{
// $("#reaponse p").html(data);
var dataObj = eval(data);
$.each(dataObj, function (idx, item) {
$("#userSelect").append("<option value='" + item.Value + "'>" + item.Text + "</option>");
});
}
当检测到输入之后，select选项就被加入，效果如下：
到此，在ASP.NET中简单的jQuery ajax的使用就完成了。