1. ASP.NET MVC

2. AGENDA
• MVC (Model-View-Control)
• ASP.NET MVC
• 系統開發流程
• 範例實作
• 程式說明

3. MVC (Model-View-Control)
• What is MVC
– 1979年在smalltalk語言使用
• 資料表現層、商業邏輯層
– Design Pattern(設計樣式) or framework (框架)
– Separation of Concerns (關注點分離)
• Components
– View (檢視)
• 負責使用者介面相關呈現，包括輸入與輸出
– Control (控制器)
• 負責控制系統的流程，決定網頁操作流程，回應用戶端的要求與
錯誤處理
– Model (模型)
• 負責定義資料格式與資料存取介面，包括商業邏輯與資料驗證

4. The relationship between MVC
主動
被動
1. 顯示出所要開啟的網頁
2. 使用者登入驗證
1
2
3. 內部資料的存取
3

5. ASP.NET MVC
• View
– HTML/XML/CSS
– JSON
– Javascript (jQuey, JQuery UI, Ext JS,…)
– AJAX
• Control
– ASP.NET Controller
• Model
– ADO.NET
– Entity Framework
– LINQ to SQL
– Database operation

6. ASP.NET MVC & Web Form
Web Form
• 優點
– 快速開發 (viewstate)
– 不用了解HTML & CSS
• 缺點
– 控制元件不易微調
– 不容易測試
MVC
• 優點
– 簡化複雜度
– 易於分工
– 更容易測試
– 採用同一套開發習慣
• 缺點
– 缺乏元件支援

7. ASP.NET MVC & Web Form
Web Form
• View based
• Design Flow
– 建立”Order”資料夾
– 建立”addorder.aspx”
– 從工具列拉UI元件
– 連接到datasource
• Example Code
– File structure
– About
– Register/login
MVC
• Controller based
• Design Flow
– URL配置
– Controller對應
– 取得對應的Model
– 將model的資料傳到view
– 實作view
• Example Code
– File structure
– About
– Register/login

8. 系統開發流程
1. 網站規劃
– 網站規畫
– 網站功能
– 資料模型規畫
2. 建立Model
3. 建立Controller
4. 調整View

9. 範例實作 – 網站規劃
• 建立一個可以新增、修改、刪除SNMP設備
的網頁
• 資料庫設計
索引 名稱 資料型別 允許空值 範圍
Key Index int
DeviceName nvarchar(32)
DeviceIP varhar(32)
SNMPVersion int 1 ~ 2
ReadCommunity varchar(32)
WriteCommunity varchar(32)
DeviceType int ●
DeviceStatus int ●

10. 範例實作 – 建立Model
• 選Models-> 右鍵 -> 加入 -> 類別

11. 範例實作 – 建立Model
• DeviceInfo.cs
– 程式碼優先開發模式 (Code First)
– using System.ComponentModel;
– using System.ComponentModel.DataAnnotations;
• [Key]：索引
• [Required]：可否為null
• [DisplayName(“設備名稱”)]：View上面所看到的名稱
• [MaxLength(32)]：最大的字串長度
• [Range(1, 2)]：數值的範圍

12. 範例實作 – 建立Controller
• 選”Controller” ->右鍵 -> 加入 -> 控制器

13. 範例實作 – 調整View
• 將DeviceType與DeviceStatus的欄位隱藏起來

14. 程式說明
• 如何看到Model存放的資料
• RouteConfig.cs
• DeviceInfoController.cs
• Index.cshtml
• Create.cshtml