SlideShare a Scribd company logo
1 of 42
2011/10/24
吳俊毅
大綱
 緣起
 何謂設計模式、為什麼談設計模式?
 從設計模式談軟體開發
 ASP.NET MVC (Model View Controller) 概論
 ASP.NET MVC 的發展
 ASP.NET MVC vs WebForm
 ASP.NET MVC 的執行生命週期
 什麼是ASP.NET Razor,它希望做到什麼?
 第一個MVC 應用程式、微軟的範例專案裡做了什麼?
 透過EDM (Enity Data Model)實做 C/R/U/M 的應用程式。
 Model (模組)設計,一定要用EDM (Enity Data Model)嗎?
緣起
什麼是MVC?
MVC 的誕生
什麼是MVC?
 MVC 是(Model View Controller) 的簡稱。MVC不是一
種程式語言,有些人會說MVC是一種架構。但嚴格來
說,MVC應該是一種設計模式,一種撰寫程式的一種
框架、設計樣式(Design Pattern)。
 他希望透過一種權責分明的架構來增加軟體開發的可
維護性、可擴充性、延展性等,並可多人同時開發。
 理論上來說,M、V、C 三個部分可以完全拆開來開發,
因為Controller 也是一個獨立的類別。
 在實際開發的情形中,Model會另外開一個Visual
Studio的專案來開發,再提供給Controller參考使用。
什麼是MVC?
MVC 的誕生
 MVC 最早是在1974年由Trygve Reenskaug 所提出,並
直接應用在當時最流行的Smalltalk中。
 透過MVC,使『商業邏輯層』、『資料表現層』在開
發的時候,完全的切割開來。
Model
模型
View
檢視
Controller
控制器
主要負責定義資料的格式、資料的存取界面、DAL
等。通常會將商業邏輯定義在此。
直接與使用者互動的使用者介面,UI。通常只負責
資料的呈現,與使用者輸入資料。或在加上畫面資
料的驗證等。
負責控制系統流程,操作面的邏輯,畫面如何跳轉
等。也負責接收View傳過來的資料。
何謂設計模式、為什麼談設計模式?
 早期軟體開發為了解決當時最直接的商業問題。成是
語言簡單,系統沒有那複雜。
 到了後期,軟體的開發越來越龐大且複雜,軟體開發
的維護性、擴充性相對的浮現。因此人們開始針對軟
體設計的方法、樣式等等來尋找出一種比較可行的方
法。這是就是設計模式(Design Pattern)的雛形。
 MVC 為程式碼的分層,與N-Tier系統的分層概念上有
些不同。要解決的問題也有些不同。
 不過,當然!實務上Model會拆解另一個Visual Studio
專案來開發,若再透過Odata協定開放出來即為分散
式應用系統。
從設計模式談軟體開發
 對開發人員而言,所謂好的軟體系統不外乎:
1. 易於維護
2. 易於擴充 (尤其在客戶需求不斷的變更的時候)
3. 容易開發 (適用於團隊的)
4. 可以多人開發 (尤其在現今軟體日益龐大的時代)
 但設計模式一定有一些門檻。
 初期在開發時,需花較多的時間規劃。也就是進行架
構的設計,才能充分發揮上述的特性。
 Design Pattern也需為團隊合作的共通標準。
 結論:沒有真正好的Design Pattern ,只有適用該團
隊的Design Pattern,合適的Design Pattern完成上述
的條件。
ASP.NET MVC
(Model View Controller) 概論
 各個分層的職責
1. Model的職責
2. Controller的職責
3. View的職責
4. 網址路由概念 Route
Model的職責
 Model 可翻為模型,不過如果以它的職責來看,翻成
資料模型會比較貼切。一般來說Model要負責所有與
資料有關的任務:
1. 定義資料結構
2. 與資料庫溝通 (DAL)
3. 進行資料格式的驗證
4. 定義商業邏輯規則
5. 對資料進行加工等處理
在.NET的平台,直接支援Model開發的不外乎就是
Entity Framework、LINQ to SQL。當然,您也可以自
行開發,甚至將DataTable轉換為View 參考的強型別。
Controller的職責
 Controller 翻譯為控制器,它幾乎
可以說是掌握前端與後端的物件,
其負責的工作如下:
1. 決定與前端View溝通的協定,一
般來說,當然就是HTTP
2. 決定系統運作的流程,如A.aspx
到B.aspx
3. 決定要顯示哪一個View到前端,
與當發生錯誤時要回應哪一個畫
面
4. 決定回應的網址結構
View的職責
 就是UI的呈現,直接與USER互動,處理(輸入/輸出)
有關的工作:
1. 決定使用何種IU呈現:HTML、XAML、XML、
Silverlight、Flash 等等
2. 將Controller 傳送過來的資料顯示於View上。
3. 將View的資料傳送給對應的Controller (透過Action
決定)
4. 決定傳送給Controller的方式(GET、POST、XML
HTTP Request)
5. 進行前端基本資料驗證
6. 如果Controller回傳的資料為強型別(Model),View
也需要參考該Model的類別定義。
網址路由概念 Route
 其實就是一種REST (Representational State Transfer)
的應用方式。
 例子:
 http://localhost:1445/Customer/Details/ALFKI
路由網址比對
 MVC 交由MvcHendler來處理。
 網址路由在HttpApplication的Applicant_Start註冊完成
 使用動作過濾器 Action Filter 找出對應的Action
 單一個Controller 方法的處理回傳一個HTTP Request的結
果。
 若找不到對應的Controller,會回傳404找不到(網頁/資源)
ASP.NET MVC 的發展
Date Version Notes
2007-12-10 ASP.NET MVC Framework 以CTP方式釋出
2008-03-05 ASP.NET MVC Preview 2 已釋出
2008-05-01 ASP.NET MVC Preview 3 已釋出
2008-07-16 ASP.NET MVC Preview 4 已釋出
2008-08-28 ASP.NET MVC Preview 5 已釋出
2008-10-16 ASP.NET MVC Beta 已釋出
2009-01-27 ASP.NET MVC RC 已釋出
2009-03-03 ASP.NET MVC RC 2 已釋出
2009-03-17 ASP.NET MVC 1.0 已釋出
2009-07-31 ASP.NET MVC 2.0 Preview 1 已釋出
2009-11-17 ASP.NET MVC 2.0 Beta 已釋出
2010-03-11 ASP.NET MVC 2.0 RTM 已釋出
2010-10-06 ASP.NET MVC 3.0 Beta 持續更新中
2010-11-08 ASP.NET MVC 3.0 RC 已釋出
2011-01-13 ASP.NET MVC 3.0 RTM 已釋出
ASP.NET MVC 4 提供什麼新功能?
 在微軟這次推出的 ASP.NET MVC 4.0 為 Developer
Preview 的版本,新增的功能如下:
1. 加強的預設站台的Style,透過CSS的增強來呈現加強一
些效果。
2. 增加了 Mobile WebSite 開發的範本。
3. 新增 Display Modes ,可以針對特定用戶的Browser 類
型加以回傳特定的 View。
4. jQuery Mobile 版本, 增加 View Switcher 與 Browser
Overriding 功能。
5. Recipes 它是一個方便您在Visual Studio 裡擴充其功能,
就像在Visual Studio 中使用NuGet一樣。
6. 支援新的非同步Controller 解決方案。
7. 支援 Azure SDK 的開發。
ASP.NET MVC 缺點
 使用MVC導入、開發時,規劃時間較長。
 由於與WebForm架構上的不同,無法使用:
1. ASP.NET WebForm 事件驅動模型
2. ASP.NET WebForm 頁面追蹤機制
3. (WebControl/Server Control) & 與相扶相成的
ViewState機制
4. ASP.NET 新增的System.Web.SiteMapProvider
5. 設計模式下無視覺化Designer 可以使用
 無法將現有WebForm無法全數移轉至MVC,不過理論
上可以將現有DAL改以模型方式提供View參照使用
ASP.NET 基本事件生命週期
Page_Load
Page_Unload
Textbox1_Changed
Button1_Click
(執行 PostBack)
1. Change Events
2. Action Events
Page is disposed
Control hierarchy is rendered
OnInit
ASP.NET MVC 生命週期
 沒有所謂的Page_Load,只有Controller的Constructor
HTTP Request
網指路由比對
Model 繫結 & 取得資料
執行 View 的內容 & 回傳
找出對應的Controller & Action
回傳結果 HTTP Response
什麼是ASP.NET Razor,
它希望做到什麼?
 ASP.NET Razor 從MVC 3.0 的時候出現,剛出現時還
沒有 VS 2010 的SDK工具,剛開始是很式驗性質的加
在 WebMatrix中,而它的出現,主要目的在於改善現
有 MVC 中 (View) 引擎的寫法:因此重點是,它也不
是要你全部使用Razor去開發撰寫網站
 更精確的說:它是想要更簡化View的撰寫方式,希望
在撰寫 View 的時候使用的(符號/表示法) 減到最
低。 他是因應MVC 撰寫View 的一些問題而出現的
 並不表示您不需要 Controller & Model
ASP.NET Razor 的架構
 ASP.NET Razor 可視為ASP.NET的衍伸,因為它是建
構在 ASP.NET 之上
ASP.NET Razor 的特性
 1.使用了@符號
 在 ASP.NET Razor 裡我們都知道 @ 為特殊符號,用已
告知 Razor 編譯器來處理。
 當有一區段的程式碼時,我們可以用 @{... 程式敘
述...} 刮起來。
 ASP.NET Razor 的註解撰寫方式為 @* 註解內容 *@
 Razor 可以將一段 HTML 的輸出做成一個方法,又稱
做內嵌方法。
 要使用它的話,網頁任一個需要輸出的地方撰寫如下:
 Razor裡面,要在畫面上 Runtime 輸出變成一段
HTML 時可使用 HtmlString 類別。
 也可以撰寫方法,使用 @functions {} 關鍵字
第一個MVC 應用程式
練習(1)實作一個登入畫面
 加入一個Controller,並命名為HomeController
練習(1)-續
 從Controller點選滑鼠右鍵,加入檢視。
練習(1)-續
 實作相關程式碼。
 了解Controller 如何與View互動。
 何謂簡單模型繫結?如何使用?
 頁面如何跳轉?Controller的控制流程。
微軟的範例專案裡做了什麼?using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Mvc4EDMInternetApp.Controllers {
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Modify this template to kick-
start your ASP.NET MVC application.";
return View();
}
public ActionResult About()
{ ViewBag.Message = "Your quintessential app description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your quintessential contact page.";
return View();
}
}
}
練習(2)
練習(3)
Q & A
geliswu@wistronits.com

More Related Content

What's hot

Puerperium normal & abnormal prof.salah roshdy
Puerperium normal & abnormal prof.salah roshdyPuerperium normal & abnormal prof.salah roshdy
Puerperium normal & abnormal prof.salah roshdy
Salah Roshdy AHMED
 

What's hot (20)

Physiology of lactation
Physiology of lactationPhysiology of lactation
Physiology of lactation
 
Unstable lie
Unstable lieUnstable lie
Unstable lie
 
Spring boot 를 적용한 전사모니터링 시스템 backend 개발 사례
Spring boot 를 적용한 전사모니터링 시스템 backend 개발 사례Spring boot 를 적용한 전사모니터링 시스템 backend 개발 사례
Spring boot 를 적용한 전사모니터링 시스템 backend 개발 사례
 
Female reproductive system
Female reproductive systemFemale reproductive system
Female reproductive system
 
Rpa usecase
Rpa usecaseRpa usecase
Rpa usecase
 
Implantation (General Embryology)
Implantation (General Embryology)Implantation (General Embryology)
Implantation (General Embryology)
 
FETAL SKULL AND MATERNAL PELVIS (Dr. Utpala Mazumder).pptx
FETAL SKULL AND MATERNAL PELVIS (Dr. Utpala Mazumder).pptxFETAL SKULL AND MATERNAL PELVIS (Dr. Utpala Mazumder).pptx
FETAL SKULL AND MATERNAL PELVIS (Dr. Utpala Mazumder).pptx
 
Amniotic flud
Amniotic fludAmniotic flud
Amniotic flud
 
Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証
 
Puerperium normal & abnormal prof.salah roshdy
Puerperium normal & abnormal prof.salah roshdyPuerperium normal & abnormal prof.salah roshdy
Puerperium normal & abnormal prof.salah roshdy
 
ネットワーク超入門
ネットワーク超入門ネットワーク超入門
ネットワーク超入門
 
Ruby on Rails の特徴とそのエコシステム
Ruby on Rails の特徴とそのエコシステムRuby on Rails の特徴とそのエコシステム
Ruby on Rails の特徴とそのエコシステム
 
Prolapse - 1
Prolapse - 1Prolapse - 1
Prolapse - 1
 
超高速!実践MaaSアプリ開発講座
超高速!実践MaaSアプリ開発講座超高速!実践MaaSアプリ開発講座
超高速!実践MaaSアプリ開発講座
 
Physiology of Pregnancy for Undergraduates
Physiology of Pregnancy for UndergraduatesPhysiology of Pregnancy for Undergraduates
Physiology of Pregnancy for Undergraduates
 
Abnormal Uterine Bleeding in Perimenopausal Women
Abnormal Uterine Bleeding in Perimenopausal WomenAbnormal Uterine Bleeding in Perimenopausal Women
Abnormal Uterine Bleeding in Perimenopausal Women
 
H사 RPA Usecase
H사 RPA UsecaseH사 RPA Usecase
H사 RPA Usecase
 
Obstetric manoeuvres
Obstetric manoeuvresObstetric manoeuvres
Obstetric manoeuvres
 
受託開発でテストファーストしたらXXXを早期発見できてハイアジリティになったはなし
受託開発でテストファーストしたらXXXを早期発見できてハイアジリティになったはなし受託開発でテストファーストしたらXXXを早期発見できてハイアジリティになったはなし
受託開発でテストファーストしたらXXXを早期発見できてハイアジリティになったはなし
 
Menarche.pptx
Menarche.pptxMenarche.pptx
Menarche.pptx
 

Similar to Asp.net mvc 基礎

利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式
Chui-Wen Chiu
 
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
Kyle Shen
 
Asp.net+mvc4框架揭秘
Asp.net+mvc4框架揭秘Asp.net+mvc4框架揭秘
Asp.net+mvc4框架揭秘
Zhenhua Tang
 
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日
twMVC
 
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
Wade Huang
 

Similar to Asp.net mvc 基礎 (20)

ASP.NET MVC The Begining
ASP.NET MVC The BeginingASP.NET MVC The Begining
ASP.NET MVC The Begining
 
twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)
twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)
twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手)
 
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4
 
利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式利用 ASP.NET MVC 提升您的 Web 應用程式
利用 ASP.NET MVC 提升您的 Web 應用程式
 
與 Asp.net mvc 的第一次親密接觸 - twMVC#1
與 Asp.net mvc 的第一次親密接觸 - twMVC#1與 Asp.net mvc 的第一次親密接觸 - twMVC#1
與 Asp.net mvc 的第一次親密接觸 - twMVC#1
 
KSDG-ASP.NET MVC 5 Overview (偽三國誌)
KSDG-ASP.NET MVC 5 Overview (偽三國誌)KSDG-ASP.NET MVC 5 Overview (偽三國誌)
KSDG-ASP.NET MVC 5 Overview (偽三國誌)
 
Asp.Net Mvc 1.0
Asp.Net Mvc 1.0Asp.Net Mvc 1.0
Asp.Net Mvc 1.0
 
Asp.net mvc 從無到有 -twMVC#2
Asp.net mvc 從無到有 -twMVC#2Asp.net mvc 從無到有 -twMVC#2
Asp.net mvc 從無到有 -twMVC#2
 
twMVC#02 | ASP.NET MVC 從無到有
twMVC#02 | ASP.NET MVC 從無到有twMVC#02 | ASP.NET MVC 從無到有
twMVC#02 | ASP.NET MVC 從無到有
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
 
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
 
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練42016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練4
 
Asp.net+mvc4框架揭秘
Asp.net+mvc4框架揭秘Asp.net+mvc4框架揭秘
Asp.net+mvc4框架揭秘
 
20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日20130823微軟雲端平台開發者日
20130823微軟雲端平台開發者日
 
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
 
ASP.NET MVC 快速上手
ASP.NET MVC 快速上手ASP.NET MVC 快速上手
ASP.NET MVC 快速上手
 
Asp.Net MVC 一教就上手
Asp.Net MVC 一教就上手Asp.Net MVC 一教就上手
Asp.Net MVC 一教就上手
 
twMVC#05 |開發與移轉 ASP.NET MVC 4.0 應用程式到 Windows Azure Platform
twMVC#05 |開發與移轉 ASP.NET MVC 4.0 應用程式到 Windows Azure PlatformtwMVC#05 |開發與移轉 ASP.NET MVC 4.0 應用程式到 Windows Azure Platform
twMVC#05 |開發與移轉 ASP.NET MVC 4.0 應用程式到 Windows Azure Platform
 
Angular js入门分享 by 王栋
Angular js入门分享   by 王栋Angular js入门分享   by 王栋
Angular js入门分享 by 王栋
 
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
 

More from Gelis Wu

架構設計好簡單系列 設計符合團隊的範本精靈 (Project template)
架構設計好簡單系列   設計符合團隊的範本精靈 (Project template)架構設計好簡單系列   設計符合團隊的範本精靈 (Project template)
架構設計好簡單系列 設計符合團隊的範本精靈 (Project template)
Gelis Wu
 

More from Gelis Wu (20)

Blazor in NET 8 的重大改變___________________
Blazor in NET 8 的重大改變___________________Blazor in NET 8 的重大改變___________________
Blazor in NET 8 的重大改變___________________
 
.NET 7 升級教戰手冊_V1.0.pdf
.NET 7 升級教戰手冊_V1.0.pdf.NET 7 升級教戰手冊_V1.0.pdf
.NET 7 升級教戰手冊_V1.0.pdf
 
顧問養成秘技 - 顧問服務實戰.pptx
顧問養成秘技 - 顧問服務實戰.pptx顧問養成秘技 - 顧問服務實戰.pptx
顧問養成秘技 - 顧問服務實戰.pptx
 
Net 6 的 blazor 開發新視界
Net 6 的 blazor 開發新視界Net 6 的 blazor 開發新視界
Net 6 的 blazor 開發新視界
 
軟體架構設計的技術養成之路
軟體架構設計的技術養成之路軟體架構設計的技術養成之路
軟體架構設計的技術養成之路
 
深入淺出領域驅動設計:以 .NET 5 與線上房貸申請系統為例
深入淺出領域驅動設計:以 .NET 5 與線上房貸申請系統為例深入淺出領域驅動設計:以 .NET 5 與線上房貸申請系統為例
深入淺出領域驅動設計:以 .NET 5 與線上房貸申請系統為例
 
Blazor Component 開發實戰
Blazor Component 開發實戰Blazor Component 開發實戰
Blazor Component 開發實戰
 
實踐 Clean Architecture(實作高可用性的軟件架構)
實踐 Clean Architecture(實作高可用性的軟件架構)實踐 Clean Architecture(實作高可用性的軟件架構)
實踐 Clean Architecture(實作高可用性的軟件架構)
 
該準備從 .NET Framework 4.x 遷移至 .NET Core 3.0 了嗎?
該準備從 .NET Framework 4.x 遷移至 .NET Core 3.0 了嗎?該準備從 .NET Framework 4.x 遷移至 .NET Core 3.0 了嗎?
該準備從 .NET Framework 4.x 遷移至 .NET Core 3.0 了嗎?
 
專業顧問的技能成長日記
專業顧問的技能成長日記專業顧問的技能成長日記
專業顧問的技能成長日記
 
你的軟體架構夠敏捷嗎?
你的軟體架構夠敏捷嗎?你的軟體架構夠敏捷嗎?
你的軟體架構夠敏捷嗎?
 
使用 .NET Standard 開發跨平台應用程式
使用 .NET Standard 開發跨平台應用程式使用 .NET Standard 開發跨平台應用程式
使用 .NET Standard 開發跨平台應用程式
 
一個 ASP.NET Core 2.1 開發指南
一個 ASP.NET Core 2.1 開發指南一個 ASP.NET Core 2.1 開發指南
一個 ASP.NET Core 2.1 開發指南
 
前端大型系統的基石 TypeScript
前端大型系統的基石 TypeScript前端大型系統的基石 TypeScript
前端大型系統的基石 TypeScript
 
Dot netstandard2.0與.net的未來發展
Dot netstandard2.0與.net的未來發展Dot netstandard2.0與.net的未來發展
Dot netstandard2.0與.net的未來發展
 
客製化的 Web api 的框架設計
客製化的 Web api 的框架設計客製化的 Web api 的框架設計
客製化的 Web api 的框架設計
 
Asp.net identity 2.0
Asp.net identity 2.0Asp.net identity 2.0
Asp.net identity 2.0
 
架構設計好簡單系列 設計符合團隊的範本精靈 (Project template)
架構設計好簡單系列   設計符合團隊的範本精靈 (Project template)架構設計好簡單系列   設計符合團隊的範本精靈 (Project template)
架構設計好簡單系列 設計符合團隊的範本精靈 (Project template)
 
Azure PaaS (WebApp & SQL Database) workshop solution
Azure PaaS (WebApp & SQL Database) workshop solutionAzure PaaS (WebApp & SQL Database) workshop solution
Azure PaaS (WebApp & SQL Database) workshop solution
 
團隊開發永遠的痛 談導入團隊開發的共同規範(Final)
團隊開發永遠的痛   談導入團隊開發的共同規範(Final)團隊開發永遠的痛   談導入團隊開發的共同規範(Final)
團隊開發永遠的痛 談導入團隊開發的共同規範(Final)
 

Asp.net mvc 基礎