最近學習.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的使用就完成了。