在ASP.NET MVC中，有一个官方提供的AJAXHelper帮助我们做AJAX相关的东西。我用传统的jQuery AJAX技术和AJAXHelper分别实现同一个demo,特此记录一下。
由于是在MVC中，所以创建了一个Home控制器，里面有两个Action,Login()用于一个普通页面，GetInfo()用于返回一个json字符串，定义如下
public class HomeController : Controller
{
public ActionResult Login()
{
return View();
}
public JsonResult GetInfo()
{
return Json(new
{
time = DateTime.Now.ToString(),
flag=new Info[] { new Info { Name="小明",Age= },new Info { Name="小秋",Age= } }
},JsonRequestBehavior.AllowGet);
}
}
public class Info
{
public string Name { get; set; }
public int Age { get; set; }
}
Info类是一个实体模型，主要是让返回的json字符串复杂一点，嘿嘿。
好了，后台完了，下面就分别给出两种不同的处理方法
一：jQuery AJAX:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login</title>
<script src="~/scripts/jquery-2.1.4.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#get").click(function () {
$.ajax({
cache:false,
type: "get",
dataType:"json",
url: "getinfo",
success: function (data, textStatus) {
$("#main").html(data.time);
var bodyTag=$("body");
bodyTag.append("<table>");
$.each(data.flag, function () {
$("body").append("<tr><td>"+this.Name+"</td><td>"+this.Age+"</td></tr>");
})
bodyTag.append("</table>");
}
});
})
})
</script>
</head>
<body><input type="button" id="get" value="获取信息" /><div id="main"></div>
</body>
</html>
在上面的jQuery代码中，我在dom完成加载后，给id为“get”的按钮注册了一个点击事件，点击该按钮后会发起ajax请求，请求的方式为get,返回数据类型为json格式，然后再请求成功success的回调函数中我用了一些jquery的方法操作dom,把返回的数据显示出来。
以上就是用直接调用jQuery AJAX的方法，至于ajax的请求参数我们可以任意修改，留个参考网址：http://www.jquery123.com/jQuery.ajax/
二：利用AJAXHelper
@model WebApplication1.Models.UserViewModel
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login</title>
<script src="~/scripts/jquery-2.1.4.min.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">
function OnSuccess(data) {
var main = document.getElementById("main");
var table = document.createElement("table");
for (var i = 0; i < data.flag.length; i++) {
var tr = document.createElement("tr");
tr.innerHTML = "<td>" + data.flag[i].Name + "</td>" + "<td>" + data.flag[i].Age + "</td>";
table.appendChild(tr);
}
main.appendChild(table);
}
</script>
</head>
<body>
@using (Ajax.BeginForm("getinfo",new AjaxOptions {OnSuccess= "OnSuccess", HttpMethod="Get", AllowCache=false}))
{
<input type="submit" id="get" value="获取信息" />
}
<div id="main">
</div>
</body>
</html>
using的目的在于让表单标签闭合，可以看到AJAXHelper发起ajax请求也是比较简单。和jQuery AJAX直接操作没有区别，不过vs的智能提示还是不错的。这个只有在AJAXHelper中可以体验到。
总结：两种都能完成AJAX请求，但是AJAXHelper和jQuery AJAX是有区别的。具体区别等我研究通了再来记录。嘿嘿
做demo过程中遇到的几个问题：
1.当一个Action返回JsonResult类型时候，Json()方法如果不加JsonRequestBehavior.AllowGet参数，当用get方法请求时会发生500错误。
2.在dom中操作json字符串时候，注意大小写。