利用 asp.net mvc 提升您的 web 應用程式

利用 ASP.NET MVC 提升您的 Web 應用程式董大偉 [email protected]台灣微軟 MSDN 講座講師TechED 2007, 2008 講師

Develop Web Application with ASP.NET MVC本場次大綱從 5W1H 看 ASP.NET MVC什麼是 MVC? 透過這樣的架構開發的應用程式有何優點 ?ASP.NET MVC Framework 又是什麼 ?和 ASP.NET WebForm 技術不同嗎 ?如何利用 ASP.NET MVC 來開發 MVC 應用程式 ?如何撰寫出較好的 Web 應用程式 ?

解決方案總是從問題而來 - Develop Web Application with ASP.NET MVC

ASP.NET MVC 的 5W 1HWHAT - 什麼是 ASP.NET MVC?WHEN - 何時需要使用 ASP.NET MVC?WHY - 為何要使用 ASP.NET MVC?WHO - 誰適合來使用 ASP.NET MVC?WHERE - 在些場合中需要使用 ASP.NET MVC?HOW - 如何開發 ASP.NET MVC 應用程式 ?

What's ASP.NET MVC? - Techniques For Developing MVC Web Applications

什麼是 MVC? - Develop Web Application with ASP.NET MVC

MVC…是一種設計模式。MVC 這個 Pattern 要求我們在開發程式的時候，把我們要透過程式碼達成的一個功能，在設計時切割成Model 、 View 、 Controller 這三個部分 ( 的程式碼 ) 。每一個部分可以獨立互不干涉，但執行時可以互相合作，已達成功能，開發時亦可由不同的開發人員進行開發、同時也便於 Unit Test 。目的：

降低程式碼之間的相依性、提高重用性便於多人開發、單元測試、降低開發成本結構清晰、利於後續維護…


Controller

ModelView


ASP.NET MVC微軟平台上新提供的 MVC 開發架構，透過這組類別庫，開發人員可以 MVC 架構來建立 Web應用程式。這組 MVC 架構可以同時提高程式的延展性與彈性，降低 .aspx 頁面與後端資料庫、商業邏輯之間的相依性，達成大型專案的快速開發、高重用性、容易調整與維護的目的。

什麼是 ASP.NET MVC Framework - Develop Web Application with ASP.NET MVCASP.NET MVC Framework 是…

架構在 ASP.NET 技術上的一組 Framework 。讓開發人員得以輕鬆建立出 MVC 架構的應用程式。提供建構 MVC 應用程式所需的基礎類別、以及相關工具(Helper) 。概念上與 ASP.NET WebForm 並不相同，不支援事件驅動、Web Controls 、或是 Postback… 等機制。支援了一些 ASP.NET 過去相當優秀的設計，例如 Master-Page 、 MemberShip 、 UserControl 等機制。

ASP.NET MVC Framework

•負責與UI顯示有關的部分，在這個部分當中的程式碼，只應該與 UI(或UI上的操作)有關，不應該有任何與商業邏輯、後端資料庫有關的任何程式碼，對於Web應用程式來說，就是Render出HTML與前端JavaScript操作的部分。

View

•這個部分的程式碼可以是部分的商業邏輯、可以是應用程式當中所需要的運算規則或演算法、Controller中的程式碼可以依照實際的需求(功能)決定調用(或存取)哪一個Model、可以動態的決定用哪一個View來呈現運算後的結果，Controller同時也負責回應前端 View所產生的事件(或需求)。Controller

•一般來說就是Data Model，同時負責了實際資料庫存取的部分，這部分的程式碼負責把後端資料庫給封裝起來，讓Controller或View可以完全不(需要)知道(或不在乎)後端資料庫的長相究竟為何，只需要透過Model即可正確的存取後端資料庫。

Model


.aspx Member

HR

Bmi

.aspx

.aspx ViewData

Post

Get

ControllersData

Model

LinqToSql(.dbml)

ADO.NET Entity Framework(.edmx)

ModelsViews

Protected Sub Button_GetBMI_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button_GetBMI.Click Dim BMI As Single Dim height, weight As Single ' 從 UI 取得身高體重 height = Me.TextBox_Height.Text weight = Me.TextBox_Weight.Text ' 計算 BMI( 主要邏輯運算 ) BMI = weight / (height / 100) ^ 2 ' 顯示 BMI Me.Label_Result.Text = " 計算結果 BMI=" & BMI ‘ 將資料儲存到資料庫 SqlDataSource1.InsertCommand = "Insert into BmiData (Height,Weight,BMI) values (@Height,@Weight,@BMI)" SqlDataSource1.InsertParameters.Add("Height", height) SqlDataSource1.InsertParameters.Add("Weight", weight) SqlDataSource1.InsertParameters.Add("BMI", BMI) ' 顯示訊息 If SqlDataSource1.Insert() > 0 Then ClientScript.RegisterStartupScript(Me.GetType, "", "alert(' 儲存成功 ');", True) Else ClientScript.RegisterStartupScript(Me.GetType, "", "alert(' 儲存失敗 ');", True) End If

『一氣呵成』、從前端殺到後端的『直搗狂龍式』寫法ClassicBmiWebAP

MVC 三合一應用程式

這種程式我們稱為：MVC三合一寫法

MVC 三合一的問題 - Develop Web Application with ASP.NET MVC

在同一個事件當中 , 又處理 UI, 又處理邏輯 , 又存取 DB前端 .aspx 頁面與後端資料庫密不可分前端 .aspx 頁面與後端商業邏輯程式碼難分難捨即使具有 DataAccess Class 也難免保證開發人員遵循 (*)牽一髮而動全身

MVC 三合一的問題 - Develop Web Application with ASP.NET MVC

應該如何改進 ?1. 將 Business Logic 獨立出來2. 將資料庫存取部分獨立出來結果：1. 程式碼相依性降低、可重用性提高2. 程式碼變多 ?3. 效能會提升嗎 ?

DEMO: 調整 MVC 三合一程式，使之將 Business Logic 獨立出來將資料庫存取部分獨立出來程式碼相依性降低、可重用性提高

D:\MyDoc\0T.教育訓練\Microsoft MSDN講座-ASP.NET MVC\ClassicBmiWebAP2

MVC 的目的 - Develop Web Application with ASP.NET MVC

避免在同一段程式碼當中 , 又處理 UI, 又處理邏輯 , 又存取 DB…降低程式之間的相依性、提高重用性讓程式碼結構更加清晰不同的模塊可由擅長該技術的專職開發人員進行開發，降低開發成本，提高產能便於 Unit Test 、使 TDD 成為可能


•負責與UI顯示有關的部分，在這個部分當中的程式碼，只應該與 UI(或UI上的操作)有關，不應該有任何與商業邏輯、後端資料庫有關的任何程式碼，對於Web應用程式來說，就是Render出HTML與前端JavaScript操作的部分。

View

•這個部分的程式碼可以是部分的商業邏輯、可以是應用程式當中所需要的運算規則或演算法、Controller中的程式碼可以依照實際的需求(功能)決定調用(或存取)哪一個Model、可以動態的決定用哪一個View來呈現運算後的結果，Controller同時也負責回應前端 View所產生的事件(或需求)。Controller

•一般來說就是Data Model，同時負責了實際資料庫存取的部分，這部分的程式碼負責把後端資料庫給封裝起來，讓Controller或View可以完全不(需要)知道(或不在乎)後端資料庫的長相究竟為何，只需要透過Model即可正確的存取後端資料庫。

Model


.aspx Member

HR

Bmi

.aspx

.aspx ViewData

Post

Get

ControllersData

Model

LinqToSql(.dbml)

ADO.NET Entity Framework(.edmx)

ModelsViews

DEMO: 建構第一個 MVC 應用程式建立 ASP.NET MVC Web Application 建立 BMI Controller 與 Index

Action 建立 ViewPage( 含欄位 ) 撰寫 BMI Class 在 Controller 中接收參數調用 BMI Class, 輸出結果

D:\MyDoc\0T.教育訓練\Microsoft MSDN講座-ASP.NET MVC\BmiMvcApp

MVC 希望在程式面達成的效果View 與 Business Login 、 Model 之間徹底脫鉤絕緣透過 Controller 轉派

資料來源： http://images.google.com.tw/imgres?imgurl=http://ash-mvc.org/media/Image/ash-mvc-architecture.gif&imgrefurl=http://ash-mvc.org/&h=301&w=351&sz=15&hl=zh-TW&start=2&tbnid=SgcaMgMTQ1kRfM:&tbnh=103&tbnw=120&prev=/images%3Fq%3DMVC%26gbv%3D2%26complete%3D1%26hl%3Dzh-TW


認識 Controller - Develop Web Application with ASP.NET MVC

負責接收 Browser 端透過 HTTP GET/POST 傳來的RequestUrl 可決定該 Request 由哪一個 Controller 、哪一個Action 來負責Controller 當中可以進行各種運算、亦可能包含商業邏輯、各種演算法…等程式碼。如果有需要，可調用 Model 來進行後端資料庫存取的動作。最後決定由哪一個 View 來處理結果的呈現。同時將 View 需要呈現的資料透過 ViewData 傳遞給View 。

關於 URL Routing - Develop Web Application with ASP.NET MVC

URL Routing 機制負責將 Browser 傳來的 Request對應到 Controller 與 Action 。在這種設計架構下，我們可以用同一個『頁面』負責同一種『工作』。可降低頁面的數量，每一個頁面 (View) 清楚的負責一種『功能』，不需要撰寫許多頁面負責同樣的功能( 例如不同資料表的顯示 ) 。URL 直接對應到『功能』，在邏輯上更加直覺。

http://localhost:50302/bmi/index

Web Site Controller Action


Controller 中程式碼的撰寫方式 , 同名處理不同的 Verbs' HTTP GET: /Bmi/Index Function Index() As ActionResult (… 略… ) Return View() End Function

' HTTP POST: /Bmi/Index <AcceptVerbs(HttpVerbs.Post)> _ Function Index(ByVal TxbHeight As Single, ByVal TxbWeight As Single) As ActionResult (… 略… ) Return View() End Function

使用預設的 View( 也就是BMI/Index.aspx) 來回應

從 View 欄位接收參數

關於 URL Routing - Develop Web Application with ASP.NET MVC

例如，底下的 URL 可以用來顯示編號為 17 的產品：

請注意 Global.asax 檔案 ( 設定 Url Route, 底下為預設 )

http://store.abc.com/product/ShowDetails/17

Web Site Controller Action ID

routes.MapRoute( _ "Default", _ "{controller}/{action}/{id}", _ New With {.controller = "Home", .action = "Index", .id = ""} _)


Controller 中程式碼的撰寫方式

各種 ActionResultViewResult, EmptyResult, RedirectResult, JavaScriptResult, ContentResult, FileContentResult, FilePathresult, FileStreamResult, …

' GET: /product/ShowDetails Function ShowDetails(ID As Integer) As ActionResult

' 取得 ID' 透過 Data Model 抓取資料庫中的內容‘ 將資料傳遞給 ViewPage

Return View() End Function

Controller 如何與 View溝通 ? - Develop Web Application with ASP.NET MVC

抓取 ViewPage上的欄位值' POST: /Bmi/Index <AcceptVerbs(HttpVerbs.Post)> _ Function Index(ByVal TxbHeight As Single, ByVal TxbWeight As Single) As ActionResult (… 略… ) ' 使用預設的 VIew Return View() End Function


透過 ViewData將資料傳給 ViewPage' POST: /Bmi/Index <AcceptVerbs(HttpVerbs.Post)> _ Function Index(ByVal TxbHeight As Single, ByVal TxbWeight As Single) As ActionResult Dim BMI As Single Dim MyBMI As New BMI ' 使用 BMI 類別進行運算 MyBMI.Height = TxbHeight MyBMI.Weight = TxbWeight BMI = MyBMI.GetBMI() ' 將執行結果傳遞給 View ViewData("result") = BMI ' 使用預設的 VIew Return View() End Function


透過 ViewData將資料傳給 ViewPage' POST: /Bmi/Index <AcceptVerbs(HttpVerbs.Post)> _ Function Index(ByVal TxbHeight As Single, ByVal TxbWeight As Single) As ActionResult

(… 略… ) Return View(Model) End Function

可傳遞任何的物件給ViewPage


建立在 Controllers 資料夾中繼承自 System.Web.Mvc.Controller負責回應 Browser 的各種 Request如何從 ViewPage 接收參數 ?透過 ID 、透過 ViewPage 上的欄位如何傳遞參數給 ViewPage?透過 ViewData 、透過 ViewResult 的 Model 參數

認識 ViewPage - Develop Web Application with ASP.NET MVC

負責展示層 UI 的顯示。與商業邏輯運算、後端資料庫均無關。在這個部分當中可以有程式碼，但程式碼只應該與 UI( 或UI 上的操作 ) 有關，不應該有任何與商業邏輯、後端資料庫有關的任何程式碼，對於 Web 應用程式來說，主要就是 Render 出 HTML 與前端 JavaScript操作的部分。繼承於 System.Web.Mvc.ViewPage 。可透過 ViewData 取得來自 Controller 的資料。可透過 Model 取得來自 Controller 的複雜資料。具有 HtmlHelper 可使用，便於開發。


與過去 ASP 類似的程式撰寫方式可透過 HTML Helper協助產生需要的 Html Element不支援 Web Controls可透過 ViewData抓取到 Controller 傳遞過來的資料 <% Using Html.BeginForm() %> <br/> 身高： <% =Html.TextBox("TxbHeight") %> <br/> 體重： <% =Html.TextBox("TxbWeight") %> <input type="submit" value="Calculate" /><% End Using%>

<% If ViewData("result") IsNot Nothing Then Response.Write("BMI:" & ViewData("result")) %>


Html Helper 支援…Html.ActionLink(linkText,ActionName,ControllerName)Html.TextBox(name)Html.TextArea(name)Html.RadioButton(name,value)Html.BeginForm()Html.Encode(value)…

DEMO: 將 MVC 應用程式加入資料庫存取使用先前的 BmiMvcApp 加入資料庫調整 ViewPage( 新增欄位 ) 加入 LinqToSql Data Model(封裝資料庫 )

D:\MyDoc\0T.教育訓練\Microsoft MSDN講座-ASP.NET MVC\BmiMvcAppWithDB

認識 Model - Develop Web Application with ASP.NET MVC

負責了實際資料庫存取的部分。這部分的程式碼負責把後端資料庫給封裝起來，讓Controller 或 View 可以完全不 ( 需要 ) 知道 ( 或不在乎 ) 後端資料庫的長相究竟為何，只需要透過 Model 即可正確的存取後端資料庫。有效的隔離展示層程式碼與後端資料庫可透過 Bind修飾字將 ViewPage 上的資料繫結到Controller 的參數，以便於儲存到 DBContoller 中可透過 ViewResult 的 Model 參數將從 DB取得的資料以物件型態傳遞給 ViewPage 。 (請注意ViewPage須設定泛型型別 )


Contoller 中可透過 ViewResult 的 Model 參數將從 DB取得的資料，以物件型態傳遞給 ViewPage 。 (請注意ViewPage須設定泛型型別 )

Dim db As New AddressBookDBDataContext ' ' HTTP GET: /AddressBook/ Function Index() As ActionResult Return View(db.AddressBook.ToList) End Function


承接的 ViewPage ，需要設定泛型型別，以便於取得資料<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of IEnumerable (Of AddressBookMvcApp.AddressBook))" %>

<% For Each item In Model%> <tr> <td> <%=Html.ActionLink("Edit", "Edit", New With {.id = item.uid})%> | <%=Html.ActionLink("Details", "Details", New With {.id = item.uid})%> </td> <td> <%= Html.Encode(item.uid) %> </td> <td> <%= Html.Encode(item.cName) %> </td> <td> <%= Html.Encode(item.cTel) %> </td> <td> <%= Html.Encode(item.cMemo) %> </td> </tr> <% Next%> </table></asp:Content>


儲存 (回寫 ) 資料時，亦可透過 Bind修飾字將ViewPage 上的資料繫結到 Controller 的參數，以便於儲存到 DB 。

'Post: /Home/Create<AcceptVerbs(HttpVerbs.Post)> _Function Create(<Bind(exclude:="uid")> ByVal TableData As AddressBookMvcApp.AddressBook) As ActionResult db.AddressBook.InsertOnSubmit(TableData) db.SubmitChanges()

Return RedirectToAction("Index") End Function

DEMO: 建立資料庫處理 MVC 應用程式 AddressBookMvcApp 加入資料庫 AddressBookDB.mdf 建立 Data Model 建立並規劃 AddressBook Controller

Index – 顯示所有紀錄 Create– 建立資料

建立相對應的 ViewPage( 可用 Wizard) 撰寫 Controller 程式碼

D:\MyDoc\0T.教育訓練\Microsoft MSDN講座-ASP.NET MVC\AddressBookMvcApp

關於 Unit Test - Develop Web Application with ASP.NET MVC

由於 View 與 Business Logic 已經切割開來 , 有助於 Unit Test 的進行。

D:\MyDoc\0T.教育訓練\Microsoft MSDN講座-ASP.NET MVC\BmiMvcApp

<TestMethod()> Public Sub TestMethod1() Dim theBmiController As New BmiController Dim theViewResult As ViewResult = theBmiController.Index(170, 70)

Assert.AreEqual("24.22145", theViewResult.ViewData("result").ToString) End Sub

解決方案總是從問題而來 - Develop Web Application with ASP.NET MVC

ASP.NET MVC 的 5W 1HWHAT - 什麼是 ASP.NET MVC?WHEN - 何時需要使用 ASP.NET MVC?WHY - 為何要使用 ASP.NET MVC?WHO - 誰適合來使用 ASP.NET MVC?WHERE - 在些場合中需要使用 ASP.NET MVC?HOW - 如何開發 ASP.NET MVC 應用程式 ?

SummaryMVC 架構有助於降低程式碼相依性，提高重用性讓系統便於測試、可同時多人開發、降低開發成本程式碼長度 ( 數量 ) 並不會減少、效能不一定會提升適合大型 ( 或超大型 ) 的應用系統MVC著重於架構、並非開發的速度、但當系統規模大到一定程度之後， MVC 架構有助於提高產能將適合的技術用在適當的場合…

ASP.NET MVC 相關資源筆者 BLOG http://blog.studyhost.com/筆者 RUN!PC ASP.NET 3.5 SP1-4.0 專欄ASP.NET網站MVC篇：http://www.asp.net/mvc/

Question & Answer

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market

conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

利用 asp.net mvc 提升您的 web 應用程式

Documents