在asp.net的MVC架構中使用jQuery是一件很容易的事情，而使用jQuery實作Ajax更簡單。產生Asp.Net MVC框架後，已經包含了jQuery腳本，相關環境設定可參考我的另一篇文章：Asp.Net MVC實例。這裡，我們仍然藉助實例中的環境。在產生的框架中的Scripts資料夾中已經可以看到jQuery的腳本。
我們在TestModel.cs中建立一個函數，以取得Json數據，仍然使用Tets表，包含兩個欄位：Id和Name。
//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數據，簡單來說，即使用Key-Value數組形式的數據。然後按預設選項建立一個控制器，產生的控制器只有一個方法：Index()。我們再創建一個方法，以供jQuery呼叫。完成的程式碼如下：JQueryController.cs。注意：在MVC2.0中預設禁止jQuery呼叫伺服器數據，所以必須在程式碼中增加存取權限：JsonRequestBehavior.AllowGet。
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()上按右鍵，按預設選項產生視圖，可在Views/JQuery看到產生的程式碼：Index.aspx，產生的程式碼非常簡單，我們再插入Script程式碼，完成如下：
<%@ 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實作Ajax實例</h2> <div id="query"><%= Html.TextBox("textSearch") %> <a href="#" id="linkFind">搜尋</a> <span class ="update" id="updater"> Loading... </span></div> <div id="dataHead" >ID Name</div> <div id="testList "></div> </asp:Content>
運行項目，在文字方塊中輸入“t”，按“搜尋”，在頁面沒有刷新的情況下顯示出查詢到的數據，如下圖：
另外，在Ajax開發中，還可以使用Ajax的基礎函數$.ajax進行偵錯，當發生錯誤時，可以列印錯誤訊息。例如，對上述的呼叫可以用下面程式碼調試：
<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>
-