通常在ASP.NET MVC中使用AJAX，指的是在JQuery中使用AJAX。当然如果你JAVAScript能力强的话，完全可以脱离JQuery。JQuery带给我们很多便利，省了很多时间在兼容性上的调试。
这篇文章我们讨论的是AJAX在ASP.NET MVC中的使用，从最简单的实现AJAX，到控制器生成JSON，最后到控制器-数据库-JSON，再到视图的呈现，听起来好像很麻烦，但其实并不。
新建一个项目，新建一个控制器，取名为：AJAXController。修改代码如下：
public ActionResult Index()
{
return View();
}
public ActionResult helloAJAX()
{
return Content("Hello AJAX","text/plain");
}
右击Index()，新建视图。视图注意要加载JQuery。
<h1 id="result1"></h1>
$(document).ready(function () {
$.ajax({
type: 'GET',
url: '@Url.Action("helloAJAX","AJAX")',
success: function (result) {
$('#result1').html(result);
}
});
});
运行Index，看看h1是不是已经加载了控制器helloAJAX()。
现在我们右击Models文件夹，新建一个类，取名为Product，源代码如下:
public class Product
{
public string Id { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
}
现在再次回到控制器，增加一个JSONdata控制器类，代码如下。
public ActionResult JSONdata()
{
var products = new List<Product>()
{
new Product() {Id="1",Name="蛋糕",Price=120 },
new Product() {Id="2",Name="饼干",Price=20 },
new Product() {Id="3",Name="曲奇",Price=160 },
};
return Json(products, JsonRequestBehavior.AllowGet);
}
打开视图，修改成如下样子：
<h1 id="result1"></h1>
<div class="active">点击此处加载本地的JSON</div>
<div id="result2"></div>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'GET',
url: '@Url.Action("helloAJAX","AJAX")',
success: function (result) {
$('#result1').html(result);
}
});
$('.active').click(function () {
$.ajax({
type: 'GET',
dataType: 'json',
contentType: 'application/json',
url: '@Url.Action("JSONdata","AJAX")',
success: function (result) {
var tostr = '';
for (var i = 0; i < result.length; i++) {
tostr += '<br />ID: ' + result[i].Id + '<br />Name:' + result[i].Name + '<br />Price: ' + result[i].Price + '<br />======================='
}
$('#result2').html(tostr);
}
});
});
});
</script>
运行后，如下图：
AJAX
下面，我们将对数据库做出查询，并将查询的结果格式化为JSON，使用AJAX将JSON传递到HTML页面。
在这里，我拿出来的数据库是AxCMS的数据库的Contents的数据，对AxCMS不理解的，点击这里查看。
Contents表存在着1对1的关系，查询的时候要注意，我这里直接输出全部数据，相当简单：
private AxCMSDBContext db = new AxCMSDBContext();
public ActionResult DataToJSON()
{
var contents = db.Contents;
return Json(contents.ToList(), JsonRequestBehavior.AllowGet);
}
然后修改视图就可以啦：
<h1 id="result1"></h1>
<div class="active">点击此处</div>
<div id="result2"></div>
<div class="activedata">点击此处</div>
<div id="result3"></div>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'GET',
url: '@Url.Action("helloAJAX","AJAX")',
success: function (result) {
$('#result1').html(result);
}
});
$('.active').click(function () {
$.ajax({
type: 'GET',
dataType: 'json',
contentType: 'application/json',
url: '@Url.Action("JSONdata","AJAX")',
success: function (result) {
var tostr = '';
for (var i = 0; i < result.length; i++) {
tostr += '<br />ID: ' + result[i].Id + '<br />Name:' + result[i].Name + '<br />Price: ' + result[i].Price + '<br />======================='
}
$('#result2').html(tostr);
}
});
});
$('.activedata').click(function () {
$.ajax({
type: 'GET',
dataType: 'json',
contentType: 'application/json',
url: '@Url.Action("DataToJSON", "AJAX")',
success: function (result) {
var tostr = '';
for (var i = 0; i < result.length; i++) {
tostr += '<br />USER: ' + result[i].User + '<br />Title:' + result[i].Title + '<br />Content: ' + result[i].Content + '<br />======================='
}
$('#result3').html(tostr);
}
});
});
});
</script>
运行成功，最后我们优化一下JQuery的写法：
$('.activedata').on("click", function (e) {
e.preventDefault();
$.ajax({
type: 'GET',
dataType: 'json',
contentType: 'application/json',
url: '@Url.Action("DataToJSON", "AJAX")',
success: function (result) {
$(result).each(function (index, item) {
$('#result2').append('USER:' + item.User + '<br />Title:' + item.Title + '<br />Content:' + item.Content + '<br />=======================<br />');
});
}
});
});
谢谢大家。转帖的时候请把凉风有兴或者AlexZeng.net进行署名。本文版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
