1. 利用 ASP.NET MVC 提升您的
Web 應用程式
董大偉 David@studyhost.com
台灣微軟MSDN講座講師
TechED 2007, 2008講師
2. Develop Web Application with ASP.NET MVC
本場次大綱
從5W1H看ASP.NET MVC
什麼是MVC?
透過這樣的架構開發的應用程式有何優點?
ASP.NET MVC Framework又是什麼?
和ASP.NET WebForm技術不同嗎?
如何利用ASP.NET MVC來開發MVC應用程式?
如何撰寫出較好的Web應用程式?
3. 解決方案總是從問題而來
- Develop Web Application with ASP.NET MVC
ASP.NET MVC的 5W 1H
WHAT - 什麼是ASP.NET MVC?
WHEN - 何時需要使用ASP.NET MVC?
WHY - 為何要使用ASP.NET MVC?
WHO - 誰適合來使用ASP.NET MVC?
WHERE - 在些場合中需要使用ASP.NET MVC?
HOW - 如何開發ASP.NET MVC 應用程式?
4. 什麼是MVC?
- Develop Web Application with ASP.NET MVC
MVC…
是一種設計模式。
MVC這個Pattern要求我們在開發程式的時候,把我們要透過
程式碼達成的一個功能,在設計時切割成Model、View、
Controller這三個部分(的程式碼)。
每一個部分可以獨立互不干涉,但執行時可以互相合作,已
達成功能,開發時亦可由不同的開發人員進行開發、同時也
便於Unit Test。
目的:
降低程式碼之間的相依性、提高重用性
便於多人開發、單元測試、降低開發成本
結構清晰、利於後續維護
…
6. 什麼是MVC?
- Develop Web Application with ASP.NET MVC
ASP.NET MVC
微軟平台上新提供的MVC開發架構,透過這組
類別庫,開發人員可以MVC架構來建立Web應
用程式。這組MVC架構可以同時提高程式的延
展性與彈性,降低.aspx頁面與後端資料庫、商
業邏輯之間的相依性,達成大型專案的快速開
發、高重用性、容易調整與維護的目的。
7. 什麼是ASP.NET MVC Framework
- Develop Web Application with ASP.NET MVC
ASP.NET MVC Framework是…
架構在ASP.NET技術上的一組Framework。
讓開發人員得以輕鬆建立出MVC架構的應用程式。
提供建構MVC應用程式所需的基礎類別、以及相關工具
(Helper) 。
概念上與ASP.NET WebForm並不相同,不支援事件驅動、
Web Controls、或是Postback…等機制。
支援了一些ASP.NET過去相當優秀的設計,例如Master-
Page、MemberShip、UserControl等機制。
18. 關於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
19. 認識Controller
- Develop Web Application with ASP.NET MVC
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欄位接收參數
20. 關於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 = ""} _
)
21. 認識Controller
- Develop Web Application with ASP.NET MVC
Controller中程式碼的撰寫方式
各種ActionResult
ViewResult, 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
22. 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
23. Controller如何與View溝通?
- Develop Web Application with ASP.NET MVC
透過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
24. Controller如何與View溝通?
- Develop Web Application with ASP.NET MVC
透過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
25. 認識Controller
- Develop Web Application with ASP.NET MVC
建立在Controllers資料夾中
繼承自System.Web.Mvc.Controller
負責回應Browser的各種Request
如何從ViewPage接收參數?
透過ID、透過ViewPage上的欄位
如何傳遞參數給ViewPage?
透過ViewData、透過ViewResult的Model參數
26. 認識ViewPage
- Develop Web Application with ASP.NET MVC
負責展示層UI的顯示。
與商業邏輯運算、後端資料庫均無關。
在這個部分當中可以有程式碼,但程式碼只應該與UI(或
UI上的操作)有關,不應該有任何與商業邏輯、後端資料
庫有關的任何程式碼,對於Web應用程式來說,主要就
是Render出HTML與前端JavaScript操作的部分。
繼承於System.Web.Mvc.ViewPage 。
可透過ViewData取得來自Controller的資料。
可透過Model取得來自Controller的複雜資料。
具有HtmlHelper可使用,便於開發。
27. 認識ViewPage
- Develop Web Application with ASP.NET MVC
與過去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")) %>
28. 認識ViewPage
- Develop Web Application with ASP.NET MVC
Html Helper支援…
Html.ActionLink(linkText,ActionName,ControllerName)
Html.TextBox(name)
Html.TextArea(name)
Html.RadioButton(name,value)
Html.BeginForm()
Html.Encode(value)
…
30. 認識Model
- Develop Web Application with ASP.NET MVC
負責了實際資料庫存取的部分。
這部分的程式碼負責把後端資料庫給封裝起來,讓
Controller或View可以完全不(需要)知道(或不在乎)後端
資料庫的長相究竟為何,只需要透過Model即可正確的
存取後端資料庫。
有效的隔離展示層程式碼與後端資料庫
可透過Bind修飾字將ViewPage上的資料繫結到
Controller的參數,以便於儲存到DB
Contoller中可透過ViewResult的Model參數將從DB取得
的資料以物件型態傳遞給ViewPage。(請注意ViewPage
須設定泛型型別)
31. 認識Model
- Develop Web Application with ASP.NET MVC
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
32. 認識Model
- Develop Web Application with ASP.NET MVC
承接的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>
33. 認識Model
- Develop Web Application with ASP.NET MVC
儲存(回寫)資料時,亦可透過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
35. 關於Unit Test
- Develop Web Application with ASP.NET MVC
由於View與Business Logic已經切割開來,
有助於Unit Test的進行。
D:MyDoc0T.教育訓練Microsoft MSDN講座-ASP.NET MVCBmiMvcApp
<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
36. 解決方案總是從問題而來
- Develop Web Application with ASP.NET MVC
ASP.NET MVC的 5W 1H
WHAT - 什麼是ASP.NET MVC?
WHEN - 何時需要使用ASP.NET MVC?
WHY - 為何要使用ASP.NET MVC?
WHO - 誰適合來使用ASP.NET MVC?
WHERE - 在些場合中需要使用ASP.NET MVC?
HOW - 如何開發ASP.NET MVC 應用程式?