ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4

ASP.NET MVC 4 RC 新增功能介紹

ASP.NET MVC 4 就快出來了，你跟上了嗎？

中文姓名：吳俊毅

英文姓名：Gelis Wu

Email: [email protected]

MSN：[email protected]

Blog：http://www.dotblogs.com.tw/gelis/

專長：.NET 相關 Solution、Web 應用、分散式應用程式

開發、Architecture Design、系統分析／設計。

About Me

MVP Adward 2011/2012Visual C#

2

mailto:[email protected]


http://www.dotblogs.com.tw/gelis/

ASP.NET MVC 的發展歷史

3

雖然MVC 4 有些新增功能到了RC的時候被移除掉了，不過

它還是可圈可點之處啦。

感覺 MVC 4 RTM 好像拖了很久！不過開發人員是辛苦的，

所以我們也不要太計較。

雖然讓我們等了很久，不過我們相信，我們的等待是值得的

RTM正式版已於2012/8/15上市了

寫在前面

4

所使用的開發環境

如何將 MVC3 的專案升級成 MVC4


大綱

5




大綱

6

Windows 7 Home Premium

Visual Studio 2010 Ultimate &.NET Framework 4.0

Visual Studio 2012 Ultimate RC & .NET Framework 4.5

RC

在Visual Studio 2012 RC 中使用的版本已經是MVC 4.0 RC的

版本

建議使用 Windows Platform Installer 4.0 來安裝。

當然也可以下載Visual Studio 2010使用的 MVC 4.0 RC 版本

或者使用8/15最新Release的Visual Studio 2012 RTM


7




大綱

8

要將 ASP.NET MVC3 轉成 MVC4 絕招、第一式、乾坤大挪

移。

所謂的乾坤大挪移就是 COPY

因此我們首先得建立一個空的ASP.NET MVC 4.0 的專案

第一式、乾坤大挪移

9

Demo、使用現有MVC3專案

10


11


12

首先先建立好一個空的ASP.NET MVC 4.0的應用程式。

步驟一、先搬Model

13

首先先建立好一個空的ASP.NET MVC 4.0的應用程式。

步驟一、先搬Model

如果Namespace有變動，記得要修改。

14

步驟二、再搬Controller

15

不是所有都一起搬過去。

步驟三、續搬View

16



17



18



19



記得修改model的Namespace

20

步驟三、續搬View(2)

21

MVC 4 中新增兩個 appSeettings 的屬性值

MVC 3 相關參考版本

MVC 4 相關參考版本

步驟四、確認 web.config

22

如果你的MVC應用程式有使用到一些third-party的Library，如果它可

能使用到舊版的mvc相關參考，請再<configuration>加入如下敘述：

步驟五、確認 web.config (續)

23




大綱

24

ASP.NET Web API

Enhancements to Default Project Templates

Mobile Project Template

Display Modes

jQuery Mobile, the View Switcher, and Browser Overriding

Task Support for Asynchronous Controllers

Database Migrations

Empty Project Template

Add Controller to any project folder

Bundling and Minification


25

ASP.NET Web API



Display Modes



Database Migrations





26

同 WCF Data Service ，且支援RESTful介面，但是它更簡化，更簡

單，易於實作。

只支援HTTP協定，透過 GET/POST 方式提供遠端使用XML或JSON資料格

式進行呼叫與使用。

更容易讓多種裝置使用：如平板、智慧型裝置、桌上型電腦、其他平台

服務、瀏覽器…

支援非同步執行特性，有更加之延展性

支援 ASP.NET MVC 的 Routing 功能

強行別的HttpRequestMessage與HttpResponseMessage，因此模型繫

結與驗證更加容易。

認識 ASP.NET Web API

27

Web API vs. WCF Service vs. WCF Data Service

28

ASP.NET 4.5 Web API 架構

29

使用 Visual Studio 2012 RC 的 Web API 樣板建立

Web API 應用程式。

使用 jQuery 取得資料。

Demo 1

30

範例實作、從無到有，建立一個 CRUD 應用程式

Demo 2

31

使用 SQL Express

Vistual Studio 2012 RC 會提示資料庫不相容，手動升

級即可。

Demo 2 (續)

32

使用 SQL Express


級即可。

Demo 2 (續)

33

使用 SQL Express


級即可。

Demo 2 (續)

34

使用 SQL Express


級即可。

Demo 2 (續)

35

當你沒有引用 JSON.NET 物件時，無法掛載應用程式

Self-Host 掛載 Web API (1)

36

當你沒有引用 JSON.NET 物件時，無法掛載應用程式


37

必須以系統管理員權限執行，否則……


38

將 EDM Model 包裝成 Class Library

建立 Self-Host Console 專案

將 MyCusAPIController.cs 檔案加入Self-Host

Console 專案中


39

Seft-Host 基本必須安裝的套件


40

Seft-Host 基本必須安裝的套件


41

撰寫 Self-Host 掛載程式碼


42

Demo…


43

ASP.NET Web API



Display Modes



Database Migrations





44

45

ASP.NET Web API



Display Modes



Database Migrations




46

ASP.NET Web API



Display Modes



Database Migrations




47

判別是否使用手持智慧裝置上網

使用檔名來辨別要顯示的檔案

從mobile的MVC專案複製相關的

檔案，並將檔案名稱修改為

XXX.mobile.cshtml

mobile的jQuery相關檔案也必

須複製過來。

Display Modes

48

屬於 mobile 使用的 jQuery 檔案可透過 NeGet 來安裝

Display Modes (2)

49

若您還要區分不同的掌上型裝置檢視不同的View時，可以在

Global.asax.cs 加入如下敘述

Display Modes (3)

50

ASP.NET Web API



Display Modes



Azure SDK

Database Migrations




51

讓掌上型智慧裝置使用者也可以選擇使用PC版本檢視網頁

目前Yahoo、MSN 等大型入口網站皆提供此功能。

透過 User Agent 判斷，因此可以做到特定平台使用特定的

View

通常與 Display Modes 一起使用。


52

使用方式，在Views/Shared的底下放置

_ViewSwitcher.cshtml檔案，並撰寫如下內容：

jQuery Mobile, the View Switcher, and Browser Overriding (2)

53

接著撰寫對應的 ViewSwitcherController

記得在 _Layout.mobile.cshtml 加上

jQuery Mobile, the View Switcher, and Browser Overriding (3)

54

ASP.NET Web API



Display Modes



Database Migrations




55

新增可支援非同步作業傳回值的 Task 類別

在需要非同步執行的方法中使用 async 關鍵字

在實際需要等待傳回值的方法前使用 await 關鍵字來等待結果回傳。

新版非同步程式撰寫支援

public async Task<ActionResult> MyCustomers(){

var myApi = new HttpClient();myApi.BaseAddress = new Uri("http://localhost:1168");Task<HttpResponseMessage> response = myApi.GetAsync("api/MyCusAPI/");IEnumerable<Customers> result = await

response.Result.Content.ReadAsAsync<IEnumerable<Customers>>();return View(result);

}

56

新增可支援非同步作業傳回值的 Task 類別

在需要非同步執行的方法中使用 async 關鍵字

在實際需要等待傳回值的方法前使用 await 關鍵字來等待結果回傳。

新版非同步程式撰寫支援

public async Task<ActionResult> MyCustomers(){

var myApi = new HttpClient();myApi.BaseAddress = new Uri("http://localhost:1168");Task<HttpResponseMessage> response = myApi.GetAsync("api/MyCusAPI/");IEnumerable<Customers> result = await

response.Result.Content.ReadAsAsync<IEnumerable<Customers>>();return View(result);

}

57

ASP.NET Web API



Display Modes



Database Migrations




58

Code-First 功能再延伸

資料表Table不需要重新建立，動態加入新欄位

設定更簡單，更易於使用

Database Migrations

59

使用 Basic 範本這

樣就不需要手動使用

NuGet加入jQuery &

jQuery UI &

jQuery Validation

等套件。

如何建立Database Migrations的應用程式1

60

在 Models 資料夾下面建立 Products 類別 (資料表)


61

建立 DbContext 類別


62

編譯後、新增一個 ProductsController


63



64



65

預設VS2012 會幫你將資料儲存到


<connectionStrings><add name="DefaultConnection" providerName="System.Data.SqlClient"

connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-Mvc4DatabaseMigrationApp2-20120729210048;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnet-Mvc4DatabaseMigrationApp2-20120729210048.mdf" /></connectionStrings>

66

程式立即

可以執行

Demo…


67

程式立即

可以執行

Demo…


68

程式立即

可以執行

Demo…


69

Data Migration 的主要功能為，在不重建、清除資料的情況下，動態

刪減欄位。

透過Package Manager Console下Cmdlet指令來完成

首先須先開啟Migration功能：

70


加入實際的欄位

71


最後一個CmdLet，真的將欄位加入到資料庫中。

72


Demo..

73


ASP.NET Web API



Display Modes



Database Migrations




74

ASP.NET Web API



Display Modes



Database Migrations




75

在HTTP 中傳輸 JavaScript 或 CSS 的時候，它會幫您一

除掉一些不必要 [字元] 與 [空白]

使用方式..


76



使用方式..


77



使用方式..


78

使用預設的BundleTable的壓縮功能

79

Bundling and Minification (2)

不使用BundleTable的壓縮功能

80

Bundling and Minification (3)

Demo…


81

Blog: http://www.dotblogs.com.tw/gelis/

MSN: [email protected]

Facebook: http://fb.me/gelis.wu

聯絡資訊

82

http://www.dotblogs.com.tw/gelis/


http://fb.me/gelis.wu

83

官網：http://mvc.tw

臉書：http://fb.me/twmvc

G+ ：http://mvc.tw/+

84

twMVC

http://mvc.tw/

http://fb.me/twmvc

http://mvc.tw/+

Technology

ASP.NET MVC 4 新功能介紹(快速上手) -twMVC#4