聲明：本教程是誤人子弟的，如果你想成為高手，那千萬不要往下讀。在ASP.NET 的WebForm中，你可能發現實現AJAX很簡單，因為.NET類庫都為你準備好了UpdatePanel控制項，用該控制項來實現AJAX就等於一行代碼都不用寫。然而，在MVC裡面，幾乎所有的伺服器控制項都失效了，那怎麼辦呢？用傳統的JS代碼的話又會很複雜，呵呵，放心，別忘了，當下jQuery是很流行的，做WEB開發自然是少不了JQ，雖然嚴格上說，它是提供給前台的網頁設計人員使用的，但對於AJAX，我們不妨也用上它。 今天，我們一起來做一個簡單的玩意兒，通過JQ來實現在MVC架構下的AJAX功能吧。1、建立一個ASP.NET MVC應用程式項目，建立項目方法（略）。2、把模板預設產生的Models、Controllers、Views下面的類和頁面全部刪除，呵呵，不需要，免得浪費硬碟空間，老師過說，一KB空間一串金，串金難買一KB空間。3、在Models目錄下建立一個Person類，類帶三個公用屬性：Name，City，QQ。
public class Person { public string Name { get; set; } public string City { get; set; } public string QQ { get; set; } }
4、在Controllers目錄上右擊，從彈出的菜單中依次選擇【添加】→【Controller...】，在彈出對話方塊中輸入控制器的名稱。注意，控制器名必須以Controller結屬。
把控制器命名為PersonController。
5、在控制器中定義一個類比搜尋的方法。
// GET: /Person/Search public JsonResult Search() { // 取得URL參數值 string key = Request.QueryString["s"]; List<Person> list = new List<Person>(); list.AddRange(new Person[] { new Person{Name="aaaakd",City="天津",QQ="22654554"}, new Person{Name="zooewu",City="長沙",QQ="665542114"}, new Person{Name="ddalion",City="北京",QQ="224545"}, new Person{Name="odtkkfuq",City="上海",QQ="624587"}, new Person{Name="pulirjd",City="北京",QQ="33211576"}, new Person{Name="woegd",City="北京",QQ="32845215"}, new Person{Name="menksale",City="廣州",QQ="88017564"}, new Person{Name="fulintang",City="上海",QQ="4675136"}, new Person{Name="gkaong",City="徐州",QQ="354115465"}, new Person{Name="fgdongse",City="南京",QQ="5514364"}, new Person{Name="zhafule",City="北京",QQ="0124560"}, new Person{Name="tueimesh",City="北京",QQ="2138575"}, new Person{Name="huzmte",City="珠海",QQ="72669952"}, new Person{Name="kefbicha",City="長沙",QQ="6845126"}, new Person{Name="niufangz",City="西安",QQ="62154024"}, new Person{Name="goupan",City="東莞",QQ="8546221165"}, new Person{Name="hatengf",City="深圳",QQ="123621"}, new Person{Name="dangwu",City="大同",QQ="6584123355"}, new Person{Name="qiulikljh",City="海口",QQ="32564411"}, new Person{Name="lanjuii",City="山海關",QQ="684895412"} }); // 通過搜尋關鍵查出合適字錄 List<Person> result = list.Where(p => p.Name.Contains(key)).ToList(); // 返回JSON return Json(result); }
6、在Global.asax檔案中，把映射的URL路改一下，把控制器的名字改為剛才建的控制器名字，但不要Controller，只要前面一部分。
routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Person", action = "Index", id = UrlParameter.Optional } // Parameter defaults );
7、在Views目錄下建立一個檔案夾，注意名字要和控制器一樣，命名為Person。
8、在剛才的Person檔案夾下面再建立一個頁面，名為Index.aspx，注意，要和Action的名字相同。
好，現在嘗試運行一下，看是否正常。按下F5調試運行。
OK，看到頁面就說明運行成功了。
9、開啟剛才建的視圖頁面，我們來做一個簡單的搜尋網頁面，該頁面使用AJAX來完成搜尋，也就是說搜尋結果在頁面中動態顯示，頁面不重新整理。
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script> <style type="text/css"> .tb { padding: 0px; border: 1px solid #33CCFF; border-collapse: collapse; border-spacing: 0px; font-size: 13px; font-family: 黑體; } th { margin: 0px; padding: 3px; background-color: #003399; border-right-style: solid; border-bottom-style: solid; border-right-width: 1px; border-bottom-width: 1px; border-right-color: #33CCFF; border-bottom-color: #33CCFF; color: #FFFFFF; text-align: center; width: 80px; font-size: 14px; } td { border-right-style: solid; border-bottom-style: solid; border-right-width: 1px; border-bottom-width: 1px; border-right-color: #33CCFF; border-bottom-color: #33CCFF; padding: 3px; } </style></head><body> <div> <h2> 歡迎進入ASP.NET誤人子弟樣本程式</h2> </div> <div> 請輸入關鍵詞： <input type="text" id="txt" name="txt" /> <input type="button" id="btn" name="btn" value="搜尋" onclick="getList()" /> </div> <div> <h4> 搜尋結果</h4> <table id="tb" class="tb"> </table> </div></body></html>
下面是處理AJAX的指令碼。
<script type="text/javascript"> function getList() { // 取出文字框中的值 var key = $("#txt").val(); $.getJSON('/Person/Search?s=' + key, function(data) { var html = '<tr><th>姓名</th><th>城市</th><th>QQ號</th></tr>'; $.each(data, function(index, item) { html += '<tr>' + '<td>' + item.Name + '</td>' + '<td>' + item.City + '</td>' + '<td>' + item.QQ + '</td>' + '</tr>'; }); $("#tb").html(html); }); }</script>
10、再來運行一下，在文字框中輸入“z”，點搜尋，奇怪了，沒反應，咋麼回事呢？
首先，你要檢查一下你的javascript代碼，尤其是jQuery代碼，很容易寫錯，好的，反覆檢查了，沒錯啊，是這樣，那為什麼沒反應呢？
來，咱們再來開啟控制器的C#代碼，把Search方法的return後面的代碼改一下，也就是在Json方法另一個重載，再加一個允許GET方式訪問的參數：
public JsonResult Search() { ........ // 返回JSON return Json(result, JsonRequestBehavior.AllowGet); }
然後，你再運行一下看，結果出來了沒？
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
