Embed Size (px)
Citation preview
教育部改善師資經費補助
正修科技大學
103 年度教師 校外研習成果報告
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ASP.NET MVC 5 開發實戰：從入門到進階 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
團體 ■個人
單 位：圖書資訊處
單位主管： （簽章）
職 稱：技士
姓 名： 陳淑芬
執行期間： 103 年 9 月 28 日 至 11 月 02 日 (每周六)
教評會審查期間： 學年度第 次（ 年 月 日）
一. 什麼是 MVC
(一) 基本觀念
MVC 模式（Model-View-Controller）:一種軟體工程架構模式，把軟體系統分成三個核心架構：
模型、檢視、控制器。各自處理自己的專業任務。主要目的可以用來簡化應用程式的開發
流程與增強程式的可維護性。
1. 模型（Model）
(1) 保存應用程式狀態
(2) 執行應用程式商務邏輯（Business logic）：用來描述應用程式功能性的演算法以及
資料庫與使用者介面之間資料的交換。Model 層擁有最多的處理任務，封裝了應用
程式中對資料的存取並提供可重複使用的函式庫，像是資料庫存取的抽象化、郵件
的遞送、資料的驗證與稽核都會發生在此。
經由模型返回的資料是不具相依性，就是說模型與資料格式無關，即是一個模型能為
多個檢視提供資料。由於應用於模型的程式碼只需寫一次就可以被多個檢視重用，於
是減少了程式碼的重複性。
2. 檢視（View）
(1) 提取模型狀態
(2) 執行呈現邏輯（Presentation logic）組織回應畫面：是使用者看到並與之互動的介面。
對老式的 Web 應用程式來說，檢視就是由 HTML 元素組成的介面，在新式的 Web 應用
程式中，HTML 依舊在檢視中扮演著重要的角色，但一些新的技術已層出不窮，它們包
括 XHTML，XML/XSL，WML 等一些標識語言和 Web services。
如何處理應用程式的介面變得越來越有挑戰性。MVC 一個大的好處是它能為你的應用
程式處理很多不同的檢視。在檢視中其實沒有真正的處理事件，它只是作為一種輸出
資料並允許使用者操縱。
3. 控制器（Controller）
(1) 接受請求：接受使用者的輸入並調用模型和檢視去完成使用者的需求。
(2) 驗證請求
(3) 判斷要轉發請求給哪個模型
(4) 判斷要轉發請求給哪個畫面
當點擊 Web 網頁中的超連結和發送 HTML 表單時，控制器本身不輸出任何東西和做任
何處理。它只是接收請求並決定調用哪個模型構件去處理請求，然後用確定用哪個檢
視來顯示模型處理返回的資料。
(二) 為何要使用 MVC
MVC 模式的目的是實作一種動態的程式設計，使後續對程式的修改和擴充功能簡化，並
且使程式某一部分的重複利用成為可能。除此之外，此模式透過對複雜度的簡化，使程式
結構更加直覺。軟體系統透過對自身基本部分分離的同時也賦予了各個基本部分應有的功
能。專業人員可以透過自身的專長各司其職：
1. 控制器 Controller：負責轉發請求，對請求進行處理。
2. 檢視 View：介面設計人員進行圖形介面設計。
3. 模型 Model：程式設計師編寫程式應有的功能如實作演算法、資料庫專家進行資料管理
和資料庫設計。
(三) 優點、缺點與適用範圍
1. 優點：
(1) 透過將應用程式細分成模型、檢視和控制器的方式，讓管理複雜性更為容易。
(2) 此架構不使用檢視狀態或伺服器表單。因此對於想要完全掌控應用程式行為的開發
人員來說，MVC 架構相當理想。
(3) 此架構使用前端控制器模式，透過單一控制器處理 Web 應用程式要求。如此可讓
您設計支援豐富的路由基礎結構的應用程式。
(4) 能為測試為導向的開發工作 (Test-Driven Development，TDD) 提供更佳的支援。
(5) 能充分搭配大型開發人員團隊所支援的 Web 應用程式，同時適用於需要充分掌控
應用程式行為的 Web 設計人員。
(6) 簡化程式設計，多個檢視能共享一個模型、同一個模型可以被不同的檢視重用，所
以大大提高了代碼的可重用性。
(7) 模組之間保持相互獨立的關係，控制器是自包含（self-contained）指高獨立內聚的
物件，與模型和檢視保持相對獨立，所以可以方便的改變應用程式的資料層和業務
規則。
2. 缺點：
(1) 由於它沒有明確的定義，所以完全理解 MVC 並不是很容易。
(2) 使用 MVC 需要精心的計劃，由於它的內部原理比較複雜，所以需要花費一些時間
去思考。
(3) 由於模型和檢視要嚴格的分離，這樣也給測試應用程式到來了一定的困難。每個構
件在使用之前都需要經過徹底的測試。
(4) 另外由於 MVC 模式將一個應用程式分成了三個部件，所以使用 MVC 同時也意味著
將要管理比以前更多的文件。
3. 適用範圍：過去 MVC 模式並不適合小型甚至中等規模的應用程式，這樣會帶來額外的
工作量，增加應用的複雜性。但現在多數軟體設計框架，能直接快速提供 MVC 骨架，
供中小型應用程式開發，此問題不再存在。對於開發存在大量使用者介面，並且邏輯
複雜的大型應用程式，MVC 將會使軟體在健壯性、代碼重用和結構方面上一個新的台
階。儘管在最初構建 MVC 模式框架時會花費一定的工作量，但從長遠的角度來看，它
會大大提高後期軟體開發的效率。
二. ASP.NET MVC 5 執行步驟
建立專案
首先「新增專案」點選「ASP.NET Web 應用程式」。
選擇「ASP.NET Web 應用程式」後，選擇 Web Forms 時，其核心參考就會預設選擇 Web
Forms，如果是 MVC 專案的話，預設核心參考為 MVC 然後亦可以再去勾選加入 Web
Forms 與 Web API。
新增一個「Web Forms」專案，同時加入 MVC 與 Web API 資料夾與核心參考的專案結構
以下是「Web Forms」專案同時加入 MVC 與 Web API 資料夾與核心參考的專案結構
以下是新增一個「MVC」專案但加入 Web Forms 與 Web API 資料夾與核心參考的專案
結構
如加入一個 WebForms 的網頁檔案並且設定為啟始頁：
專案的執行結果如下圖：
如開啟一個單純的 ASP.NET MVC 5 專案，建立後的專案結構如下：
直接執行網站，所看到的網站樣式已經全部使用 Twitter Bootstrap
無論是 MVC 還是 Web Forms 預設的網站樣式改為 Twitter Bootstrap，這個是比較明顯
的改變之一。
(一) Controller
「新增 Controller」
在 ASP.NET MVC 5 裡要加入 Controller 必須要使用 Scaffold（支架）
從支架的選項選擇新增的 Controller 項目
除可以新增一個空白的 Controller 之外，也可以新增一個使用 EF 資料內容並產生
CRUD 內容的控制器，或是新增一個有 CRUD 方法內容的控制器
此選擇建立的是「具有讀取/寫入動作的 MVC 5 控制器」
Controller 程式內容如下
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVC5_Project.Controllers
{
public class myTestController : Controller
{
//
// GET: / myTest /
public ActionResult Index()
{
return View();
}
//
// GET: / myTest /Details/5
public ActionResult Details(int id)
{
return View();
}
//
// GET: / myTest /Create
public ActionResult Create()
{
return View();
}
//
// POST: / myTest /Create
[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
// TODO: Add insert logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
//
// GET: / myTest /Edit/5
public ActionResult Edit(int id)
{
return View();
}
//
// POST: / myTest /Edit/5
[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
try
{
// TODO: Add update logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
//
// GET: / myTest /Delete/5
public ActionResult Delete(int id)
{
return View();
}
//
// POST: / myTest /Delete/5
[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
try
{
// TODO: Add delete logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
}
}
(二) View
從 Scafflod（支架）裡面去新增，以 myTestController 要新增一個 Index View 的步驟
如下
1. 先在 Views 目錄裡新增加一個「myTest」的目錄，以對應 myTestController
2. 在 myTest 目錄按下滑鼠右鍵，並且選擇「加入 > 支架」
3. 在「新增 Scaffold」裡選擇要加入的檢視
支架裡有關檢視的項目有「刪除」「空白」「空白且不含模型」「建立」「清
單」「詳細資料」「編輯」，目前所選擇建立的是「空白」
按下新增後會出現一個「加入檢視」的視窗，這邊要填入檢視名稱、模型類別、
檢視選項等等，這裡就跟之前版本的建立方式類似，但一定要選個模型類別加
入按鈕才會 Enable
因為在「新增 Scaffold」選擇檢視項目時，所選的檢視項目不同的關係，如選
擇的是加入「空白」檢視，加入檢視時就一定要選擇模型類別，如果想要建立
的是一個完全空白的檢視就必須要選「空白且不含模型」
此「加入檢視」的視窗中就沒有模型類別的項目
(三) Model
滑鼠右建新增 Class.
程式範例
using System;
namespace MvcMovie.Models
{
public class Movie
{
public int ID { get; set; }
public string Title { get; set; }
public DateTime ReleaseDate { get; set; }
public string Genre { get; set; }
public decimal Price { get; set; }
}
}
三. 學習心得
經過這次的課程，見識到 MVC 迷人之處，也讓熱愛.NET 的 Web 開發的我多了一
個全新的選擇 ASP.NET MVC，再熟知 MVC 開發模式條理分明後，其有利於分工與管
理，更讓我想推薦給尚未了解的開發人員，因為不願看到 MVC 叫好不叫座；還好上
課的同好們專注的聆聽、仔細的操作，可以感受到 ASP.NET MVC 有要發展出一片天的
潛力。
總結課後心得，其優點之一在於將一個功能區分成許多片段。負責 View 的部分只
需要確定能夠發出正確的要求，以及當資料改變的時候，能夠呈現給使用者正確的結果。
而 Model 只需要保證能夠確實完成要求，讓資料正確地被操作。而最後，Controller 將兩者
結合，一個且有功能的軟體就完成大部分了。雖然可能要花費較多的時間進行前置規劃，
但是一個好的架構，可以讓未來程式變得很容易維護。也讓我見識到有別於以往的專案開
發模式。
然而 MVC 的思想，實際上和物件導向一樣。都是為了能夠讓問題變得更小更細，讓
撰寫程式的人可以專注在小範圍功能的邏輯上。所以好的架構，是提供使用者如何將問題
分割，之後再如何組合的想法。如果不了解其思考方式，冒然硬是將功能分為 MVC 三個
部分，反而會讓程式變得比原來的更加難以維護。甚至會用許多不必要的心力在開發。
最後身為資訊人就注定背負隨著資訊蓬勃發展的腳步同時也要積極學習、面對挑戰的
使命，如果沒有這樣的認同就無法享受追求新技術的過程，更沒有勇氣將新技術嘗試在專
案之中。這一次為期一個半月的 MVC5 的課程中，使我深深感受到身為資訊人需要不斷學
習的壓力，但正如前述在獲得新的知識與技術後，又能將它以自己的方式與能力展現出
來，對於當中的碩甜果實帶來的快感並非旁人所能了解感受。
正修科技大學接受獎補助款著作之著作權授權書
一、本人 陳淑芬 授權正修科技大學圖書館將本人在正修科技大學任教（職）期間接受
補助款之著作，其紙本收錄於乙方館內供借閱使用，電子檔收錄於典藏系統內集中管理
典藏。
二、著作種類包括：1.進修 2.研究 3.研習 4.著作 5.升等送審 6.改進教學 7.編纂教材 8.製作教具
等八項。
三、本人同意將上開著作之全文電子檔，非專屬、無償授權予正修科技大學圖書館，得不限
地域、時間與次數，以微縮、光碟或其他數位化方式重製，並得將電子檔上載網路，提
供讀者個人非營利性質及合理使用之線上檢索、閱覽、下載、列印，或以光碟存放館內
供師生借閱。
四、本人保證授權典藏之著作及相關資料內文具原創性，並無侵害他人智慧財產權、隱私權
之情事。
五、著作清單︰
著作
種類
系所
單位 作者 著作名稱
著作
年度 紙本
電子
檔 備註
研習 圖書資
訊處 陳淑芬
ASP.NET MVC 5 開發實戰：
從入門到進階 103 有 有
六、本授權書已取得其他共同作者之授權（各共同作者均在本授權書簽署或獨立簽署本授權
書）。
著作權人(親筆簽名)：
電話：07-7358800#8275
地址：833 高雄市鳥松區澄清路 840 號
電子信箱：[email protected]
共同作者（親筆簽名)：
身分證字號/統一編號：
電話：
手機：
地址：
電子信箱：
中華民國 104 年 02 月 24 日
