通常在ASP.NET MVC中使用AJAX爬虱，指的是在JQuery中使用AJAX檐薯。當然如果你JAVAScript能力強的話躬拢，完全可以脫離JQuery窿侈。JQuery帶給我們很多便利，省了很多時間在兼容性上的調(diào)試鸽心。
這篇文章我們討論的是AJAX在ASP.NET MVC中的使用滚局，從最簡單的實現(xiàn)AJAX，到控制器生成JSON顽频，最后到控制器-數(shù)據(jù)庫-JSON藤肢，再到視圖的呈現(xiàn)，聽起來好像很麻煩糯景，但其實并不嘁圈。
新建一個項目省骂，新建一個控制器，取名為：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是不是已經(jīng)加載了控制器helloAJAX()彬犯。
現(xiàn)在我們右擊Models文件夾厉膀，新建一個類杭跪，取名為Product，源代碼如下:
public class Product
{
public string Id { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
}
現(xiàn)在再次回到控制器茂翔，增加一個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>
運行后，如下圖：
下面府树，我們將對數(shù)據(jù)庫做出查詢俐末，并將查詢的結(jié)果格式化為JSON，使用AJAX將JSON傳遞到HTML頁面奄侠。
在這里卓箫，我拿出來的數(shù)據(jù)庫是AxCMS的數(shù)據(jù)庫的Contents的數(shù)據(jù)，對AxCMS不理解的垄潮，點擊這里查看烹卒。
Contents表存在著1對1的關(guān)系，查詢的時候要注意弯洗，我這里直接輸出全部數(shù)據(jù)旅急，相當簡單：
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>
運行成功，最后我們優(yōu)化一下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 />');
});
}
});
});
謝謝大家牡整。轉(zhuǎn)帖的時候請把涼風有興或者AlexZeng.net進行署名藐吮。本文版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）
