jQuery是一款容易上手的JavaScript庫任何Web開發平台都可以使用它跟ASPNET MVC框架的結合尤為引人矚目James Estes曾在InfoQ上發表過一篇文章名為jQuery正在靠版及jQuery UI贏得人心談到了jQuery最近的一次發布並介紹了很多傑出的特性
藉由ASPNET MVC內置的擴展性開發人員便可以使用第三方庫例如jQuery在使用ASPNET Webforms的時候如果使用jQuery而不是ASPNET AJAX難度會比較大
剛開始撰寫本文的時候ASPNET MVC的版本是Preview 有些在Preview 中使用的技術可能無法在早期版本中正常工作Preview 可以在CodePlex上下載
初步配置
我不打算把它寫成一篇完整的jQuery指南只是簡單給出幾個跟ASPNET MVC一起使用這款JavaScript庫的示例Chad Myers有一篇很精彩的指南包括了如何上手
首先要保證你有ASPNET MVC所以請先從CodePlex上下載安裝(注意你需要運行Visual Studio 才能使用ASPNET MVC框架)
ASPNET MVC框架裝好以後就應該已經創建好了一個新的ASPNET MVC Web Application工程
下一步下載jQuery下載Packed或者是Minified版本然後放到上面那個工程的Content目錄下
添加一個對Content目錄下jQuery文件的引用
簡單示例
Ryan Lanciaux寫過一篇很優秀的文章名為jQuery和ASPNET MVC框架其中列出了很多在ASPNET MVC框架中使用jQuery的關鍵因素Ryan在文章中進行了詳細闡述
首先要做的就是創建一個ASPNET MVC(Preview )工程在Home controller下面創建一個新的view和一個controller action然後把下面幾行字加到view中
This is red textthis is blueand this is green
右鍵點擊Controllers文件夾選擇Add New Item然後選擇MVC Controller類任務完成下一步是創建一個Controller Action
接下來我們需要創建一個Controller Action它可以從Model中返回色素值而且我們不希望重載頁面我們希望使用Ajax很幸運在MVC框架中我們可以使用JsonResult類型來完成這一點
public JsonResult RGBColors(){ ColorsRGB color = new ColorsRGB(); return Json(color);}
下一步創建一個類用來表示model中的顏色
namespace Colors{ public class RGB { public string Red = #FF″; public string Green = #FF″; public string Blue = #FF; }}
最後一步用一些jQuery代碼把一切組裝在一起
$(document)ready(function()
{ $getJSON(/Home/RGBColors
{}
function(data)
{ $(red)css(color dataRed); $(blue)css(color dataBlue);
$(green)css(color dataGreen); });});
Ryan指出了一處重要的地方
注意jQuery代碼是在我們的controller上調用JSON方法如果我們重載頁面它就會得到model中定義的色素值完全無痛它很簡單但在Web上使用的時候卻可以千變萬化
上面這個例子簡單演示了如何使用JSONRyan和他的兄弟Joel寫了一個Theme Generator Tool裡面有完整的應用另外敬請留意在撰寫本文的過程中微軟已經發布了ASPNET MVC框架的Preview 版本
From:http://tw.wingwit.com/Article/program/ASP/201311/21891.html
