設計ASP.NET MVC4應用程式(3)

by vivid 16. 一月 2013 00:39

 

.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應用程式」,為專案取一個名稱,然後按下「確定」鍵,請參考下圖所示:

clip_image002

圖 1:ASP.NET MVC 4 Web應用程式。

建立一個ASP.NET MVC 4應用程式「基本」範本專案後,Visual Studio 2012會自動在專案中建立許多目錄,以及一些程式碼檔案到專案之中,請參考下圖所示:

clip_image004

圖 2:建立ASP.NET MVC基本專案。

 

預設函式庫

預設專案的Scripts目錄中便包含了jQuery 1.7版的函式庫,以及jQuery UI、jQuery Validation、jquery.validate.unobtrusive…等等函式庫,請參考下圖所示:

clip_image005

圖 3:ASP.NET MVC空白專案Scripts目錄預設包含許多JavaScript函式庫。

從「工具」-「選項」-「JavaScript」-「IntelliSense」-「參考」,根據Visual Studio 2012的設定,請參考下圖所示:

clip_image007

圖 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套件」,請參考下圖所示:

clip_image008

圖 5:管理NuGet套件。

接著便會跳出「管理NuGet套件」對話盒,從線上搜尋Modernizr進行安裝,請參考下圖所示:

clip_image010

圖 6:安裝Modernizr。

此外在專案中包含unobtrusive字眼的js檔案是微軟所撰寫的,用來支援Unobtrusive JavaScript功能,稍後再述。Knockout函式庫主要是應用在用戶端套用MVVM模型時,可以使用宣告式語法來實現資料繫結功能,其官方網站在http://knockoutjs.com/,您也可以使用NuGet下載最新版本,參考下圖所示:

clip_image012

圖 7:安裝Knockout函式庫。

同樣地,若要使用到最新版本的jQuery,也可以開啟「管理NuGet套件」對話盒,從線上搜尋jQuery進行安裝,請參考下圖所示:

clip_image014

圖 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」目錄上方按滑鼠右鍵,從快捷選單選取「加入」-「控制器」,請參考下圖所示:

clip_image016

圖 9:加入控制器。

接著便會出現「加入控制器」對話盒,為控制器取一個名稱,例如本範例中的「HomeController」,請參考下圖所示:

clip_image018

圖 10:設定控制器名稱。

建立檢視

預設控制器中包含一個Index方法,讓我們為它建立對應的檢視。將滑鼠游標停留在HomeController Index方法上方按滑鼠右鍵,然後選取快捷選單上的「加入檢視」選項,請參考下圖所示:

clip_image019

圖 11:加入檢視。

在「加入檢視」對話盒設定檢視的名稱為「Index」。勾選「使用配置或主版頁面」,從「選取版面配置頁」對話盒挑選「~/Views/Shared/_Layout.cshtml」然後按下「確定」,再按下「加入」按鈕,請參考下圖所示:

clip_image020

圖 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/

執行的結果如下圖所示:

clip_image021

圖 13:顯示課程清單。

 

加入自訂JavaScript

接下來,我們希望當使用者將滑鼠移動到Index檢視上任一本課程名稱上方時,可以利用jQuery動畫特效,顯示課程說明,我們將jQuery程式碼放在自訂的JavaScript檔案中。首先在專案中加入一個JavaScript檔。從「方案總管」-專案-「Scripts」目錄上方按滑鼠右鍵,從快捷選單選取「加入」-「新增項目」,請參考下圖所示:

clip_image023

圖 14:加入自訂JavaScript。

選「JavaScript」,然後按下「新增」按鈕,請參考下圖所示:

clip_image025

圖 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/

執行的結果如下圖所示:

clip_image026

圖 16:整合jQuery。

Tags:

.NET Magazine國際中文電子雜誌 | ASP.NET MVC | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List