跟ASP.NET MVC一起使用jQuery

     最近人們對微軟的ASP.NET MVC架構投入了越來越多的關注。ASP.NET MVC功能強大、靈活，除了架構內包含的庫之外，開發人員還可以使用其他庫，jQuery這款流行的JavaScript架構自然也不例外。

     jQuery是一款容易上手的JavaScript庫，任何Web開發平台都可以使用，它跟ASP.NET MVC架構的結合尤為引人矚目。James Estes曾在InfoQ上發表過一篇文章，名為jQuery正在靠1.2版及jQuery UI 贏得人心，談到了jQuery最近的一次發布，並介紹了很多傑出的特性。

     藉由ASP.NET MVC內建的擴充性，開發人員便可以使用第三方庫，例如jQuery。在使用ASP.NET Webforms的時候，如果使用jQuery而不是ASP.NET AJAX，難度會比較大。

　　剛開始撰寫本文的時候，ASP.NET MVC的版本是Preview 4，有些在Preview 4中使用的技術可能無法在早期版本中正常工作。Preview 4可以在CodePlex上下載。

     初步配置

　　我不打算把它寫成一篇完整的jQuery指南，只是簡單給出幾個跟ASP.NET MVC一起使用這款JavaScript庫的樣本。Chad Myers有一篇很精彩的指南，包括了如何上手。

　　首先要保證你有ASP.NET MVC，所以請先從CodePlex上下載安裝(注意：你需要運行Visual Studio 2008才能使用ASP.NET MVC架構)。

　　ASP.NET MVC架構裝好以後，就應該已經建立好了一個新的ASP.NET MVC Web Application工程。

　　下一步，下載jQuery，下載Packed或者是Minified版本，然後放到上面那個工程的Content目錄下。

　　添加一個對Content目錄下jQuery檔案的引用。

　　簡單樣本

　　Ryan Lanciaux寫過一篇很優秀的文章，名為jQuery和ASP.NET MVC架構，其中列出了很多在ASP.NET MVC架構中使用jQuery的關鍵因素。Ryan在文章中進行了詳細闡述：

　　首先要做的就是建立一個ASP.NET MVC(Preview 4)工程，在Home controller下面建立一個新的view和一個controller action，然後把下面幾行字加到view中。

　　This is red text,this is blueand this is green

　　右鍵點擊Controllers檔案夾，選擇“Add New Item”，然後選擇MVC Controller類，任務完成。下一步是建立一個Controller Action：

　　接下來，我們需要建立一個Controller Action，它可以從Model中返回色素值。而且我們不希望重載頁面，我們希望使用Ajax。很幸運，在MVC架構中我們可以使用JsonResult類型來完成這一點。

　　public JsonResult RGBColors(){ Colors.RGB color = new Colors.RGB(); return Json(color);}

　　下一步，建立一個類，用來表示model中的顏色：

　　namespace Colors{ public class RGB { public string Red = “#FF0000″; public string Green = “#00FF00″; public string Blue = “#0000FF”; }}

　　最後一步，用一些jQuery代碼把一切組裝在一起：

       $(document).ready(function()

     { $.getJSON(“/Home/RGBColors”,

     {},

      function(data)

      { $(“.red”).css(“color”, data.Red); $(“.blue”).css(“color”, data.Blue);

      $(“.green”).css(“color”, data.Green); });});

     Ryan指出了一處重要的地方：

　　注意，jQuery代碼是在我們的controller上調用JSON方法。如果我們重載頁面，它就會得到model中定義的色素值。完全無痛。它很簡單，但在Web上使用的時候卻可以千變萬化。

　　上面這個例子簡單示範了如何使用JSON，Ryan和他的兄弟Joel寫了一個Theme Generator Tool，裡面有完整的應用。另外敬請留意，在撰寫本文的過程中，微軟已經發布了ASP.NET MVC架構的Preview 5版本。