Download pdf - ASP.net MVC

Transcript

ASP.NET MVC

AGENDA

• MVC (Model-View-Control)

• ASP.NET MVC

• 系統開發流程

• 範例實作

• 程式說明

MVC (Model-View-Control)

• What is MVC– 1979年在smalltalk語言使用

• 資料表現層、商業邏輯層

– Design Pattern(設計樣式) or framework (框架)– Separation of Concerns (關注點分離)

• Components– View (檢視)

• 負責使用者介面相關呈現,包括輸入與輸出

– Control (控制器)• 負責控制系統的流程,決定網頁操作流程,回應用戶端的要求與錯誤處理

– Model (模型)• 負責定義資料格式與資料存取介面,包括商業邏輯與資料驗證

The relationship between MVC

主動

被動

1.顯示出所要開啟的網頁

2.使用者登入驗證

1

2

3. 內部資料的存取

3

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

ASP.NET MVC & Web Form

Web Form

• 優點– 快速開發 (viewstate)

– 不用了解HTML & CSS

• 缺點– 控制元件不易微調

– 不容易測試

MVC

• 優點– 簡化複雜度

– 易於分工

– 更容易測試

– 採用同一套開發習慣

• 缺點– 缺乏元件支援

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

系統開發流程

1. 網站規劃

– 網站規畫

– 網站功能

– 資料模型規畫

2. 建立Model

3. 建立Controller

4. 調整View

範例實作 –網站規劃

• 建立一個可以新增、修改、刪除SNMP設備的網頁

• 資料庫設計索引 名稱 資料型別 允許空值 範圍

Key Index int

DeviceName nvarchar(32)

DeviceIP varhar(32)

SNMPVersion int 1 ~ 2

ReadCommunity varchar(32)

WriteCommunity varchar(32)

DeviceType int ●

DeviceStatus int ●

範例實作 –建立Model

• 選Models-> 右鍵 ->加入 ->類別

範例實作 –建立Model

• DeviceInfo.cs

–程式碼優先開發模式 (Code First)

– using System.ComponentModel;

– using System.ComponentModel.DataAnnotations;

• [Key]:索引

• [Required]:可否為null

• [DisplayName(“設備名稱”)]:View上面所看到的名稱

• [MaxLength(32)]:最大的字串長度

• [Range(1, 2)]:數值的範圍

範例實作 –建立Controller

• 選”Controller” ->右鍵 ->加入 -> 控制器

範例實作 –調整View

• 將DeviceType與DeviceStatus的欄位隱藏起來

程式說明

• 如何看到Model存放的資料

• RouteConfig.cs

• DeviceInfoController.cs

• Index.cshtml

• Create.cshtml