Response.Write("Hello LOLOTA")

 

MVC這個設計架構大約是起始於1979年，由 Trygve Reenskaug 在 Smalltalk 上實作的一種design pattern。

當時他提出的這個理論內容可以參考「Thing Model View Editor」，後來在1988年，由 Glenn Krasner 以及

Stephen Pope 共同出版「A Cookbook for Using the Model-View-Controller User Interface Paradigm

in Smalltalk -80」論文，對當時MVC更有顯著的影響。

 

其實在 ASP.NET MVC 提出之前，在很多程式語言上都已經有實現 MVC 的架構，像是 JAVA、PHP、Ruby、Python等。

微軟在.NET Frameowork 3.5 SP1中，也提供了MVC的設計架構來讓網頁設計師能夠設計更具彈性的網頁。

 

為什麼我們要使用ASP.NET MVC?

在傳統 ASP.NET 網頁開發，設計者只要透過畫面拖拉物件，設定相關屬性，在對應的事件撰寫相關程式碼就

可以簡單地寫出一個 ASP.NET 應用程式。但是往往商業邏輯混和介面控制項的程式碼，再加上不小心的 ViewState 應用，往往效能以及測試上都會造成很大的麻煩，另外在維護以及擴充調整方面，彈性也不夠大。所以才有了 ASP.NET MVC 架構產生。

 

 

MVC架構指的是 Model、View 以及 Controller。

Model指的是用來顯示結果的資料來源，舉例來說，在Northwind資料庫中，Employees資料表就是一個Model。View則是

用來顯示資料的界面，而Controller則是接收 View 傳入的內容，用來改變Model的狀態，然後選擇對應的View來回傳要顯示的結果。

 

我們可以透過下圖來看整個執行的步驟：

 

 

1. 使用者在瀏覽器中輸入網址，發出 Request，由 controller 接收這個 Request。

2. Controller 接收 Request 之後，向 Model 要求所需的資料。

3. Model 將符合的資料送給 Controller。

4. Controller 將數據送到 View (ex: aspx網頁)。

5. 然後 View 在顯示資料在使用者的瀏覽器中。

 

由這個圖看來，Controller 扮演了一個非常重要的角色。其實，在 ASP.NET MVC 裡，

撰寫 Controller 程式碼就是最重要的部份。

 

 

我們就 Step By Step 來看看 ASP.NET MVC：

1.

在 Visual Studio 2010 中開啟一個新的 ASP.NET MVC 2 Web Application。

 

2.

選擇不要建立測試專案：

 

3.

整個專案的架構如下：

 

Models目錄存放的是有關於 Model 的物件，像是Linq to SQL 或是 ADO.NET Entity Data Model。

Views目錄是存放網頁，像是 aspx 或是 ascx 等。

Shared目錄存放網頁所要共用的部份，像是 Site.Master 以及 ascx。

Controllers目錄則是放置 Controller 物件，這裡命名都採用 XXXController(XXX可以根據View的功能性決定)

 

 

4.

按下 F5 執行，顯示的畫面如下：

 

6.

按下 About 連結，你會看到 URL 會這樣切換。

 

 

在此有一個小插曲，筆者的 VS2010 此時預設以 FireFox 開啟，但是在 ASP.NET MVC  中，

你會發現要去切換瀏覽器，會找不到選項：

 

此時只要新增一個 aspx 網頁，就可以透過它來切換瀏覽器：(換完再砍掉)

 

 

7.

接下來，我們看到 Global.asax.cs，其中定義了整個 MVC 專案的 URL 路由(route)以及路由邏輯。

 

 

IgnoreRoute這裡是去設定要忽略的 URL 路由。MapRoute則是去設定要如何對應 URL 路由。

我們可以看到程式碼中預設路由名稱為 Default，URL 路由的規則為{controller}/{action}/{id}，

預設參數則是為 controller = "Home", action = "Index", id = ""。

 

 

我們再透過一個 CRUD 的例子來瞭解 ASP.NET MVC：

1.

首先，建立一個 ADO.NET Entity Data Model(這邊我們以北風資料庫為範例)：

 

選擇 Generate from Database。

 

設定資料來源：

 

選擇 Categories，然後按下完成：

 

2.

我們可以看到預設的 HomeController 內容如下：

 

我們另外新增一個 MyIndex 的 Action：

 

請先 Build 專案，然後，我們在 Index 上按下滑鼠右鍵，選擇Add View：

 

設定下列選項，然後按下Add：

 

然後就會產生 MyIndex.aspx 網頁：

 

在 Site.Master 檔案中加入：

 

按下F5執行，並切換到 MyIndex 頁籤時顯示的內容：

 

3.

再加入編輯的程式碼如下：

這裡的 AcceptVerbs 屬性設定了 HttpVerbs.Get 及 HttpVerbs.Post，這代表設定這個標籤的

action 去分別處理 HTTP GET 以及 HTTP Post。

 

同樣地去新增View

 

設定的內容：

 

產生的 edit.aspx 網頁內容：

 

按下 F5 執行，當你在剛剛的列表中按下 Edit 時，會切換到對應的編輯畫面：

 

 

4.

加入 Create 的程式碼：

 

建立View：

 

當建立好 Create.aspx 網頁時，按下 F5 執行，然後選擇 Create New：

 

這裡看完應該會覺得有點怪，因為 CategoryID 是自動編號，不需要顯示。

我們可以在 Create.aspx 中作調整，寫入紅框內的程式碼：

 

畫面就會變成這樣：

 

5.

加入 Details 的程式碼：

 

新增 View 的設定：

 

 

當產生 Details.aspx 網頁後，按下 F5 執行，並切換到 Category 列表時，按下 details 連結就會產生下圖：

6.

接下來 Delete 這部份就比較不一樣，因為在剛剛產生 View 的選項中沒有 Delete 的項目，

另外，當你要刪除一筆資料時，是不會再產生一個畫面來處理。

所以我們可以這樣作：

 

新增刪除的程式碼：

 

然後在 MyIndex.aspx 中新增：

 

按下 F5 試看看刪除功能：

 

 

這樣整個 CRUD 功能一下子就完成了，是不是很方便呢？

針對 ASP.NET MVC 還有一些進階的東西可以讓我們更瞭解如何使用，這個我們留待後面篇幅再說明。

 

試煉大會，我們下次見囉～～

 

 

參考資料：

http://c2.com/cgi/wiki?ModelViewControllerHistory

 

 

如果您有微軟技術開發的問題，可以到MSDN Forum發問。

如果您有微軟IT管理的問題，可以到TechNet Forum發問喔。