Upload
alan-tsai
View
370
Download
6
Embed Size (px)
DESCRIPTION
針對寫asp.net webform 的人介紹asp.net mvc 介紹為什麼使用mvc。 Asp .Net MVC 在 Model View Controller 3個部分開發的時候會用到的內容。 和一些常用的工具、套件、方法。
Citation preview
Asp .Net MVCALAN TSAI
2014-07-16
Agenda
為什麼要用 MVC ? MVC 基本概念 Asp .Net MVC vs Asp.net webform
針對每一個部分做介紹 Model
View
Controller
工具介紹、技巧
為什麼要用 MVC ?
Asp .Net Webform 的崛起
Asp .Net Webform 的起源
優點 不需要很懂 Html 。
不需要很懂整個 Http 運作的概念。
Asp .Net Webform 的問題是什麼?
缺點 成也蕭何敗蕭何
每一個 Request 很重
SoC :完全沒有 Separation Of Concern
DRY : Don’t Repeat Yourself
如何製作 API 文件? Class Diagram ?
如何測試程式邏輯?
Model View Controller
Controller
輕Model
重
View笨
• 商業邏輯• 處理儲存資料 (DAL)• 畫面上面顯示的資料
來源
• 決定要呼叫那些商業邏輯• 決定要顯示哪一個 View• 決定要帶給 View 什麼
Model
• 定義畫面要顯示的模板
Asp .Net MVC
Open Source - http://aspnetwebstack.codeplex.com/
V1.0 (2009 年 ) ~ V5.2(2014 年 4 月 ) – 差不多 1 年 1 版
整個脫離了 Asp .Net – 現在只要是支援 OWIN 的 Server 都可以架設
衍生出很多不同的 Framework
Web Api 專門用來開發 RESTFul
SignalR – 用來開發及時訊息
Demo – 3 分鐘建立 CRUD 功能
Convention Over Configuration
Model
Model 的職責
Controller
輕Model
重
View笨
• 商業邏輯• 處理儲存資料 (DAL)• 畫面上面顯示的資料
來源
• 決定要呼叫那些商業邏輯• 決定要顯示哪一個 View• 決定要帶給 View 什麼
Model
• 定義畫面要顯示的模板
DAL (Data Access Layer)
搭配 Entity Framework
EF 6 之後開放原始碼: https://entityframework.codeplex.com/
不會直接使用 DbContext ,而是會使用Repository Pattern + Unit of Work
EF 可以參考官網: http://msdn.microsoft.com/en-US/data/ee712907
ViewModel
Model 代表 DB 的樣子。
ViewModel 則是畫面要顯示的內容。 不是所有資料都是從畫面輸入取得。 ViewModel 最好除了 Property 之外什麼都不要有
ViewModel 資料轉入 Model 可以用 AutoMapper 。
Model重
View笨
ViewModel
資料驗證 Data Annotation
資料驗證 不只是前端
後端也會在 ModelBinding 的時候做:
支持那些 Data Annotation
http://msdn.microsoft.com/en-us/library/dd901590(VS.95).aspx
顯示用的 Annotation
顯示用的 Annotation
http://msdn.microsoft.com/en-us/library/dd901590(VS.95).aspx
Controller
Controller 的職責
Controller
輕Model
重
View笨
• 商業邏輯• 處理儲存資料 (DAL)• 畫面上面顯示的資料
來源
• 決定要呼叫那些商業邏輯• 決定要顯示哪一個 View• 決定要帶給 View 什麼
Model
• 定義畫面要顯示的模板
Controller 和 Action
Controller 只是普通的 Class 繼承 System.Web.Mvc.Controller
名稱都是 {name}Controller – 在 URL 對應的時候值對應 {name} 的部分 例如 HomeController -> Home
Action 則是 Controller 裡面的方法 用來接受傳進來的資料並且決定要返回什麼。
ActionResult
Action 返回的 BaseClass
http://msdn.microsoft.com/zh-tw/library/system.web.mvc.actionresult(v=vs.118).aspx
Action 傳遞資料到 View 的方法
Action return 的時候可以傳入一個 Model - StrongType
就是自己定義的一個 Class
也就是 ViewModel
可以使用 ViewBag ( ViewData )來傳入一些通用資料 就是一個 Dictionary
ViewBag 和 ViewData 是一樣的來源, ViewBag 使用 Dynamic 包一層
TempData
存在 Session ,第一次被讀取之後就清空 適合做 Alert 訊息的儲存媒介
ActionFilter
和 Servlet 裡面的 Filter 一樣概念 http://
www.dotnetexpertguide.com/2013/02/aspnet-mvc-action-filter-life-cycle.html
可以被註冊在 3 個不同層級: Global
Controller
Action
ModelBinding
傳統做法: 有 ModelBinding :
ModelBinding 決定那些要做 Binding
可以設定 BindAttribute 的 Include 和 Exclude 達到 White/Black List 的效果。
這邊有 Security 疑慮
使用 ViewModel 可以避免掉
http://odetocode.com/blogs/scott/archive/2012/03/12/complete-guide-to-mass-assignment-in-asp-net-mvc.aspx
http://blog.kkbruce.net/2011/10/aspnet-mvc-model-binding6.html#.U8OdmvmSxYQ
RouteConfig
App_Start/RouteConfig.cs - 設定網站的路由對應:
可以設定每一個部分的預設值和對應的 Constraint :
對應 Action 的 Attribute
可以指定某一個 Action 是對應到那個 HttpRequest 。 如果不給,預設是 HttpGet
假設在建立一個方法也叫做Create(string id) ,可以 Compile過,但是在 Runtime 會出問題。 沒法判斷 Create() 和
Create(string id) 的差異
ValidateAntiForgeryToken
資安 避免掉 CSRF ( Cross Site Request Forgery )
在 View 裡面也需要加
View
View 的職責
Controller
輕Model
重
View笨
• 商業邏輯• 處理儲存資料 (DAL)• 畫面上面顯示的資料
來源
• 決定要呼叫那些商業邏輯• 決定要顯示哪一個 View• 決定要帶給 View 什麼
Model
• 定義畫面要顯示的模板
Razor
檔案結尾是 .cshtml
請不要使用 .aspx ( 傳統那種 )
Razor 語法
單行程式碼 – 以 @ 做開頭
如果是一系列的程式碼 (code block) – 以 @{ } 在裡面的都是程式碼
如果在一系列程式碼想要輸出內容可以用@: - 單行<text></text> - 多行
更多請參考:http://www.asp.net/web-pages/overview/getting-started/introducing-razor-syntax-(c)
View 的組成
View 裡面有一個參數叫做 Layout
用來指定 Master Page 是那一頁 在 _ViewStart.cshtml 會指定預設
在 View 下面的 Shared 資料夾是共通會查詢的
View 如何定義模板
在 Asp .Net Webform 會定義
Asp .Net MVC 使用: 下圖表示有一個區塊叫做“ scripts” ,在內頁不一定 (false) 要有這個區塊的內容。
然後在內頁使用:
View 如何定義模板
假設輸入的內容不在任何 @section 裡面
會出現在 Mater 模板裡面的 @RenderBody
強型別 (Strong Type) 的 View
當 Controller 回傳 View 的時候,可以帶上 Model
在 View 裡面可以定義此Model 是什麼形態
這樣就可以有強型別 (Strong Type) 的 View
HtmlHelper
這些是方便建立對應的 Html
有 2 種格式: {name}(弱性別 ) – 例如 TextBox
{name}For (強型別 )– 例如 TextBoxFor
HtmlHelper
盡量使用有帶 For 的 Helper
能夠和 Model 所設定的 Annotation 對應 在 ModelBinding 不容易出現問題
有一個參數可以代入這個 html 的 attribute
假設 attribute 是 class ,在使用上要加上 @
常用的 Html 可以寫成自己的 HtmlHelper
http://www.asp.net/mvc/tutorials/older-versions/views/creating-custom-html-helpers-cs
http://www.codeproject.com/Tips/720515/Custom-HTML-Helper-for-MVC-Application
Html.Raw
Razor 預設輸出都是有受到 HtmlEncode 。
用 Html.Raw 可以輸出純 Html 內容。
請搭配 AntiXss 避免 Xss 疑慮。
Html.Partial 和 Html.Action
常用頁面可以抓出來做成一個通用的頁面
如果通用頁面的內容比較靜態 呼叫 Html.Partial 來使用頁面內容 (Model等資訊是由呼叫頁面傳過去 )
常見的有網頁的 header 和 footer
通常 view 的名字前面會加下底線 (_)
如果通用頁面內容需要經過處理 使用 Html.Action (Model 資訊是在 Action 的時候建立 )
有一個叫做 Html.Render{name} (例如 RenderAction/RenderPartial )的對應方法 – 產出一樣,差別在 Render{name} 直接寫入畫面,而 {name} 則是返回一個 string 。
Template 概念
兩種 Template
DisplayTemplates – Html.DisplayFor
EditorTemplates – Html.EditorFor
會依照以下內容的值去找對應的 Template
[UIHint]
[DataType]
資料本身的 Type
Html.DisplayFor Template
資料夾必須為 DisplayTemplates
放在 View 裡面的 Shared 下面表示全域
放在個別 Action 的 View 下面表示針對某個 Action
Html.EditorFor Template
資料夾必須為 EditorTemplates
放在 View 裡面的 Shared 下面表示全域
放在個別 Action 的 View 下面表示針對某個 Action
Url.*
當需要某個 action 的連接的時候,請不要 hard code連接 使用 Url.* helper
自動代入和 Route 有關
Area
把網站在切割
可以獨立拆出來成為一個 Project
http://kevintsengtw.blogspot.tw/2013/07/aspnet-mvc-area-backend.html#.U8ZEzfmSxYQ
對於把 Area獨立抽出來作為一個專案感興趣可以看 http://elegantcode.com/2012/04/06/mvc-portable-areas/
Bundling And Minification
Bundling 就是把一堆 js/css捆成一包 減少 request 的來回
Minification
減少 css 和 js 所需要的空間
先在 BundleCollection 註冊 ScriptBundle 和 StyleBundle
要使用的時候在用 @Styles.Render 和 @Scripts.Render
資源、工具、開發技巧、 Library
Asp .net Mvc 資源
官網 – 非常豐富 http://www.asp.net/
http://www.asp.net/mvc - mvc相關
教學影片 http://
pluralsight.com/training/Player?author=scott-allen&name=mvc4-building-m1-intro&mode=live&clip=0&course=mvc4-building
MvcMusicStore - sample
http://www.asp.net/mvc/tutorials/mvc-music-store/mvc-music-store-part-1
Web API
專門用來做 RESTFul Service
可以依照註解產生 api 文件: http://
www.dotblogs.com.tw/jasonyah/archive/2013/11/23/how-to-automatically-generate-webapi-documentation.aspx
請參考: 官網: http://www.asp.net/web-api
教學影片:http://www.asp.net/web-api/videos
http://pluralsight.com/training/Player?author=jon-flanders&name=aspnetwebapi-m1-introduction&mode=live&clip=0&course=aspnetwebapi
SignalR
及時動態資訊
能夠自動偵測使用 WebSocket或者 Long Polling
VS 2013 的 Browser Link 就是使用此技術
請參考: 官網: http://www.asp.net/signalr
教學影片: http://www.asp.net/signalr/videos
MVA 學習 .Net 的好地方
Microsoft Virtual Academy (MVC) 微軟虛擬學院 http://www.microsoftvirtualacademy.com/
不只有開發相關,如果對 Sql或者Windows Server 有興趣裡面都有 大部分是英文,不過中文內容也慢慢多,加上有些英文影片有中文字母
Nuget
管理 Library Package
預設有安裝在 VS 裡面 可以動下載缺少的 Dll
官網 https://www.nuget.org/
中文介紹(有點舊,不過概念都一樣) http://blog.darkthread.net/post-2011-03-12-nuget.aspx
Visual Studio
Go to View
在 Action 裡面點右鍵快速定位 View
Go to Controller
在 View 裡面點右鍵
Snippet
Mvcaction4
Mvcpostaction4
Web Essentials 2013
快速找到頁面
直接修改頁面內容
直接刷新頁面
http://vswebessentials.com/
Automapper
ViewModel 和 Model 直接對應
直接的 ModelBinding 有資安疑慮
https://github.com/AutoMapper/AutoMapper/wiki/Getting-started
設定參考: http://kevintsengtw.blogspot.tw/2013/04/automapper-configuration.html
AntiXss - Microsoft Web Protection Library
https://wpl.codeplex.com/
Server.HtmlEncode 是用黑名單方式處理
AntiXss 使用白名單
Json.Net
把資料以 Json格式輸出
http://james.newtonking.com/json
Documentation
http://james.newtonking.com/json/help/index.html
Linq
Linq 是 C# 裡面非常非常重要的功能
Linq 101 Sample
http://code.msdn.microsoft.com/101-LINQ-Samples-3fb9811b
LinqPad
http://www.linqpad.net/
此工具也有範例和教學在裡面,可以直接嘗試效果 .Net 開發著必備
Q & A謝謝大家