快捷導(dǎo)航

使用jQuery輕松實(shí)現(xiàn)Ajax的實(shí)例代碼

更新時(shí)間：2010年08月16日 15:39:17 作者：

在Asp.Net的MVC架構(gòu)中使用jQuery是一件很容易的事情，而使用jQuery實(shí)現(xiàn)Ajax更加簡(jiǎn)單。

生成Asp.Net MVC框架后，已經(jīng)包含了jQuery腳本，相關(guān)環(huán)境設(shè)置可參看我的另一篇文章：Asp.Net MVC實(shí)例。這里，我們?nèi)匀唤柚鷮?shí)例中的環(huán)境。在生成的框架中的Scripts文件夾中已經(jīng)可以看到j(luò)Query的腳本。
我們?cè)赥estModel.cs中創(chuàng)建一個(gè)函數(shù)，以取得Json數(shù)據(jù)，仍然使用Tets表，包含兩個(gè)字段：Id和Name。

復(fù)制代碼代碼如下:

 
//JsonDataArray 
public static Array GetJsonArray(String name) 
{ 
Array data = null; 
try 
{ 
data = (from c in testDb.test 
where c.name.Contains(name) 
select new { c.id, c.name }).ToArray(); 
}catch(ArgumentNullException ae) 
{} 
return data; 
} 

Json數(shù)據(jù)，簡(jiǎn)單來說，即使用Key-Value數(shù)組形式的數(shù)據(jù)。然后按默認(rèn)選項(xiàng)創(chuàng)建一個(gè)控制器，生成的控制器只有一個(gè)方法：Index()。我們?cè)賱?chuàng)建一個(gè)方法，以供jQuery調(diào)用。完成的代碼如下：JQueryController.cs。注意：在MVC2.0中默認(rèn)情況中禁止jQuery調(diào)用服務(wù)器數(shù)據(jù)，所以必須在代碼中增加訪問權(quán)限：JsonRequestBehavior.AllowGet。

復(fù)制代碼代碼如下:

 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using MvcWeb.Models; 
namespace MvcWeb.Controllers 
{ 
public class JQueryController : Controller 
{ 
// 
// GET: /JQuery/ 
public ActionResult Index() 
{ 
return View(); 
} 
public JsonResult FindByName(string name) 
{ 
return Json(TestModel.GetJsonArray(name), JsonRequestBehavior.AllowGet); 
} 
} 
} 

然后在Index()上按右鍵，按默認(rèn)選項(xiàng)生成一個(gè)視圖，可在Views/JQuery看到生成的代碼：Index.aspx，生成的代碼非常簡(jiǎn)單，我們?cè)俨迦隨cript代碼，完成如下：

復(fù)制代碼代碼如下:

 
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
JQuery 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
$('#updater').hide(); 
$('#dataHead').hide(); 
$('#linkFind').click(function(event) { 
event.preventDefault(); 
$('#dataHead').show(); 
$('#updater').show(); 
$.getJSON('/JQuery/FindByName/', { name: $('#textSearch')[0].value }, function(data) { 
$('#testList > div').remove(); 
$.each(data, function(i, item) { 
$('#testList').append('<div>' + item.id + ' ' + item.name + '</div>'); 
}); 
}); 
$('#updater').hide(); 
}); 
}); 
</script> 
<h2>使用jQuery實(shí)現(xiàn)Ajax實(shí)例</h2> 
<div id="query"><%= Html.TextBox("textSearch") %>&nbsp;<a href="#" id="linkFind">搜索</a>&nbsp;&nbsp;&nbsp; 
<span class="update" id="updater">&nbsp;Loading...&nbsp;&nbsp;&nbsp;</span></div> 
<div id="dataHead" >ID Name</div> 
<div id="testList"></div> 
</asp:Content> 

運(yùn)行項(xiàng)目，在文本框中輸入“t”，按“搜索”，在頁面沒有刷新的情況下顯示出查詢到的數(shù)據(jù)，如下圖：

另外，在Ajax開發(fā)中，還可以使用Ajax的基礎(chǔ)函數(shù)$.ajax進(jìn)行調(diào)試，當(dāng)出現(xiàn)錯(cuò)誤時(shí)，可以打印錯(cuò)誤信息。例如，對(duì)上述的調(diào)用可以用下面代碼調(diào)試：

復(fù)制代碼代碼如下:

 
<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
$('#linkFind').click(function(event) { 
event.preventDefault(); 
var handleData = function(data) { alert("success:" + data); } 
var handleErr = function(e) { 
alert(e.responseText); 
} 

$.ajax({ 
type: "get", 
url: "/Jquery/FindByName", 
data: "name=t", 
success: handleData, 
error: handleErr 
}); 
}); 
}); 
</script> 