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謝謝大家