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

ASP.NET MVC 4 RC 新增功能介紹
ASP.NET MVC 4 就快出來了，你跟上了嗎？

 中文姓名：吳俊毅
 英文姓名：Gelis Wu
 Email: geliswu@wistronits.com
 MSN：wergelis@msn.com
 Blog：http://www.dotblogs.com.tw/gelis/
 專長：.NET 相關 Solution、Web 應用、分散式應用程式
開發、Architecture Design、系統分析／設計。
About Me
MVP Adward 2011/2012
Visual C#
2

 雖然MVC 4 有些新增功能到了RC的時候被移除掉了，不過
它還是可圈可點之處啦。
 感覺 MVC 4 RTM 好像拖了很久！不過開發人員是辛苦的，
所以我們也不要太計較。
 雖然讓我們等了很久，不過我們相信，我們的等待是值得的
 RTM正式版已於2012/8/15上市了
寫在前面
4

 所使用的開發環境
 如何將 MVC3 的專案升級成 MVC4
 ASP.NET MVC 4 RC 新增功能介紹
大綱
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

 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
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

 使用 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

級即可。
Demo 2 (續)
33

級即可。
Demo 2 (續)
34

級即可。
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
Enhancements to Default Project
Templates
44

 ASP.NET Web API
 Display Modes
46

 ASP.NET Web API
 Display Modes
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
51

 讓掌上型智慧裝置使用者也可以選擇使用PC版本檢視網頁
 目前Yahoo、MSN 等大型入口網站皆提供此功能。
 透過 User Agent 判斷，因此可以做到特定平台使用特定的
View
 通常與 Display Modes 一起使用。
jQuery Mobile, the View Switcher, and
Browser Overriding
52

 使用方式，在Views/Shared的底下放置
_ViewSwitcher.cshtml檔案，並撰寫如下內容：
Browser Overriding (2)
53

 接著撰寫對應的 ViewSwitcherController
 記得在 _Layout.mobile.cshtml 加上
Browser Overriding (3)
54

 ASP.NET Web API
 Display Modes
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
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
74

 ASP.NET Web API
 Display Modes
75

 在HTTP 中傳輸 JavaScript 或 CSS 的時候，它會幫您一
除掉一些不必要 [字元] 與 [空白]
 使用方式..
Bundling and Minification
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: wergelis@msn.com
 Facebook: http://fb.me/gelis.wu
聯絡資訊
82

 官網：http://mvc.tw
 臉書：http://fb.me/twmvc
 G+ ：http://mvc.tw/+
84
twMVC

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

More Related Content

What's hot (18)

Similar to twMVC#04 | ASP.NET MVC 4 新功能介紹(快速上手) (20)

More from twMVC (20)

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