.NET Magazine國際中文電子雜誌
作 者：許薰尹
審 稿：張智凱
文章編號：N130113202
出刊日期：2013/1/16
ASP.NET MVC 4支援AJAX技術來建立用戶端應用程式，AJAX可以搭配一個輕量型、開放源碼的函式庫-- jQuery來撰寫用戶端程式碼。透過jQuery，可以很容易地選取網頁中的項目、註冊事件處理常式、設計動畫等等功能，還可以透過非同步方式叫用服務端程式碼。
因jQuery簡潔易學，所以漸漸地成為網站設計師的最愛。ASP.NET MVC 4以jQuery為基礎，新增許多用戶端功能，例如用戶端驗證機制。這一篇文章中，將介紹在ASP.NET MVC 4專案內建的用戶端函式庫，以及透過AJAX設計非同步的功能。
我們先來建立一個專案為範例，以便了解基本專案引用哪些用戶端函式庫，從Visual Studio 2012開發工具 -「檔案」-「新增」-「專案」，在「新增專案」對話盒中選取程式語言，例如本範例選擇「Visual C#」，從「Web」分類中，選取「ASP.NET MVC 4 Web應用程式」，為專案取一個名稱，然後按下「確定」鍵，請參考下圖所示：
圖 1：ASP.NET MVC 4 Web應用程式。
建立一個ASP.NET MVC 4應用程式「基本」範本專案後，Visual Studio 2012會自動在專案中建立許多目錄，以及一些程式碼檔案到專案之中，請參考下圖所示：
圖 2：建立ASP.NET MVC基本專案。
預設函式庫
預設專案的Scripts目錄中便包含了jQuery 1.7版的函式庫，以及jQuery UI、jQuery Validation、jquery.validate.unobtrusive…等等函式庫，請參考下圖所示：
圖 3：ASP.NET MVC空白專案Scripts目錄預設包含許多JavaScript函式庫。
從「工具」-「選項」-「JavaScript」-「IntelliSense」-「參考」，根據Visual Studio 2012的設定，請參考下圖所示：
圖 4：_references.js檔案。
Visual Studio 2012會自動參考網站中Scripts目錄下的_references.js檔案來提供撰寫jQuery、jQuery UI…等函式庫的智慧型感知提示功能。
_references.js檔案內容如下：
/// <reference path = "jquery-1.8.3.js" />
/// <reference path = "jquery-ui-1.8.20.js" />
/// <reference path = "jquery.validate.js" />
/// <reference path = "jquery.validate.unobtrusive.js" />
/// <reference path = "knockout-2.1.0.debug.js" />
/// <reference path = "modernizr-2.5.3.js" />
同樣地，在Scripts目錄下vsdoc附檔名的檔案也是用來協助Visual Studio 2012開發工具提供智慧型感知功能用的。
Modernizr是一個開放源碼(Open Source)的函式庫，可以讓你在JavaScript程式中判斷瀏覽器是否有支援HTML 5的某些功能，目前的最新的版本是2.6.2版，同樣可以使用NuGet的功能自動下載、安裝最新版。
利用NuGet工具安裝Modernizr的步驟為：在Visual Studio 2012工具-「方案總管」-點選專案，按滑鼠右鍵，從快捷選單選取「管理NuGet套件」，請參考下圖所示：
圖 5：管理NuGet套件。
接著便會跳出「管理NuGet套件」對話盒，從線上搜尋Modernizr進行安裝，請參考下圖所示：
圖 6：安裝Modernizr。
此外在專案中包含unobtrusive字眼的js檔案是微軟所撰寫的，用來支援Unobtrusive JavaScript功能，稍後再述。Knockout函式庫主要是應用在用戶端套用MVVM模型時，可以使用宣告式語法來實現資料繫結功能，其官方網站在http://knockoutjs.com/，您也可以使用NuGet下載最新版本，參考下圖所示：
圖 7：安裝Knockout函式庫。
同樣地，若要使用到最新版本的jQuery，也可以開啟「管理NuGet套件」對話盒，從線上搜尋jQuery進行安裝，請參考下圖所示：
圖 8：安裝jQuery。
使用jQuery
在建立ASP.NET MVC 4類型的專案時，Views資料夾中包含一個_ViewStart.cshtml檔案，這個檔案在網站啟動時會自動執行。預設檔案中設定Layout屬性為Views/Shared資料夾中的_Layout.cshtml檔案：
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
_Layout.cshtml檔案定義了網站中所有網頁可以共用的版面配置頁(Layout Page)，包含每個網頁共有的HTML標籤和引用的樣式表、或JavaScript，參考下列程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<meta name = "viewport" content = "width=device-width" />
<title> @ViewBag.Title </title>
@Styles.Render( "~/Content/css" )
@Scripts.Render( "~/bundles/modernizr" )
</head>
<body>
@RenderBody()
@Scripts.Render( "~/bundles/jquery" )
@RenderSection( "scripts", required: false )
</body>
</html>
建立控制器
我們來看一個使用jQuery的MVC範例，在專案之中加入一個控制器，從「方案總管」-專案-「Controllers」目錄上方按滑鼠右鍵，從快捷選單選取「加入」-「控制器」，請參考下圖所示：
圖 9：加入控制器。
接著便會出現「加入控制器」對話盒，為控制器取一個名稱，例如本範例中的「HomeController」，請參考下圖所示：
圖 10：設定控制器名稱。
建立檢視
預設控制器中包含一個Index方法，讓我們為它建立對應的檢視。將滑鼠游標停留在HomeController Index方法上方按滑鼠右鍵，然後選取快捷選單上的「加入檢視」選項，請參考下圖所示：
圖 11：加入檢視。
在「加入檢視」對話盒設定檢視的名稱為「Index」。勾選「使用配置或主版頁面」，從「選取版面配置頁」對話盒挑選「~/Views/Shared/_Layout.cshtml」然後按下「確定」，再按下「加入」按鈕，請參考下圖所示：
圖 12：加入檢視。
Visual Studio 2012會在Views\Home目錄下產生一個Index.cshtml檔案，預設檔案上方，使用Layout屬性引用~/Views/Shared/_Layout.cshtml頁：
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml" ;
}
建立自訂樣式
在Content目錄下的Site.css檔案中，定義以下自訂CSS樣式：
.details {
display: none;
}
.title {
font-size: 1em;
}
設計檢視
修改Index.cshtml，加入以下HTML標籤顯示課程資料：
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml" ;
}
<h2> Index </h2>
<h3> 課程清單: </h3>
<ul>
<li class = "title">
<h5> ASP.NET MVC </h5>
<div class = "details" >
ASP.NET MVC 可以建立網站應用程式。
</div>
</li>
<li class = "title">
<h5> C# </h5>
<div class = "details">
C#是個好用的程式語言
</div>
</li>
<li class = "title">
<h5> Visual Basic </h5>
<div class = "details">
Visual Basic的語法簡易易學。
</div>
</li>
</ul>
測試與執行
在Visual Studio 2012中，按F5鍵來執行程式，在瀏覽器上輸入以下URL(注意您的埠號可能和本文不同，請將以下23300埠號代換成實際的埠號)：
http://localhost:23300/
執行的結果如下圖所示：
圖 13：顯示課程清單。
加入自訂JavaScript
接下來，我們希望當使用者將滑鼠移動到Index檢視上任一本課程名稱上方時，可以利用jQuery動畫特效，顯示課程說明，我們將jQuery程式碼放在自訂的JavaScript檔案中。首先在專案中加入一個JavaScript檔。從「方案總管」-專案-「Scripts」目錄上方按滑鼠右鍵，從快捷選單選取「加入」-「新增項目」，請參考下圖所示：
圖 14：加入自訂JavaScript。
選「JavaScript」，然後按下「新增」按鈕，請參考下圖所示：
圖 15：加入JavaScript檔案。
在JavaScript1.js檔案中加入jQuery程式碼，當滑鼠移動到有套用title樣式的項目時，就把details項目以slideDown動畫特效顯示出來；若從套用title樣式的項目移開時，就把details項目以slideUp動畫特效隱藏：
$().ready( function () {
$(".title").hover( function () {
$( ".details", $(this) ).slideDown( 250 );
}, function () {
$( ".details", $(this) ).slideUp( 250 );
})
});
在檢視(*.cshtml)之中，若要引用自訂的JavaScript1.js，因為此檔案中的程式使用到jQuery物件，因此引用自訂JavaScript1.js程式的程式碼必需要出現在引用jQuery函式庫之後才行。若檢視_Layout.cshtml檔案，其中有一行程式呼叫RenderBody()；而以下這行會產生引用jQuery函式庫的標籤：
@Scripts.Render( "~/bundles/jquery" )
此行程式的下一行則用來產生一個名為Scripts的區段：
@RenderSection( "scripts", required: false )
我們可以在檢視(*.cshtml)中任何地方利用Razor @section 語法定義一個scripts區段，以產生引用自訂JavaScript的標籤。因為_Layout.cshtml檔案的定義，引用自訂JavaScript標籤一定會出現在引用jQuery函式庫之後。修改Index.cshtml程式如下，在<h2 >標籤上加入@section Scripts的定義：
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml" ;
}
@section Scripts {
<script src = "~/Scripts/JavaScript1.js"> </script>
}
<h2> Index </h2>
<h3> 課程清單: </h3>
<ul>
<li class = "title">
<h5> ASP.NET MVC </h5>
<div class = "details">
ASP.NET MVC 可以建立網站應用程式。
</div>
</li>
<li class = "title">
<h5> C# </h5>
<div class = "details">
C#是個好用的程式語言
</div>
</li>
<li class = "title">
<h5> Visual Basic </h5>
<div class = "details">
Visual Basic的語法簡易易學。
</div>
</li>
</ul>
測試與執行
在Visual Studio 2012中，按F5鍵來執行程式，在瀏覽器上輸入以下URL(注意您的埠號可能和本文不同，請將以下23300埠號代換成實際的埠號)：
http://localhost:23300/
執行的結果如下圖所示：
圖 16：整合jQuery。
訂閱