ASP.NET MVC - MVC 4 Developer Preview 新功能介紹(一)

為簡省抓圖時間，本篇圖是直接引用 http://www.asp.net/learn/whitepapers/mvc4-release-notes 的圖，特此告知，內文不在特別註明。如有版權問題，請通知我。

增強預設專案樣版

1. 一個新技術 adaptive rendering，能讓預設的樣版板在桌上型瀏覽器與手機瀏覽器運作良好，而不用任何客制化。
2. 使用JavaScript來提供豐富的 UI。例如，ASP.NET MVC 4預設專案樣版中的 Login 與 Register 使用 jQuery UI 來顯示。(測試發現，目前只能在 ASP.NET MVC 4 for C#，能有此效果，ASP.NET MVC 4 for VB，雖然是新 UI，但未提供此效果。)

圖一：ASP.NET MVC 4 專案樣版 UI

圖二：adaptive rendering 技術

圖三：Log On 使用 jQuery UI 的效果

Mobile 專案樣版

Mobile 可以說是 ASP.NET MVC 4 的重頭戲，ASP.NET MVC 4 有很大一部分都是在加強 Mobile 瀏覽器的相容性。在測試時，因為沒有使用 Mobile 模擬器，基本上是可以正常在桌上型瀏覽器顯示及操作相關 Mobile 專案樣版。另注意，與上面一樣，目前 ASP.NET MVC 4 for VB 還未加入這個 Mobile 專案樣版，想過過癮的話，必須開 C# 專案才有。

圖四：ASP.NET MVC 4 手機專案樣版

它使用與 Internet Application 一樣的樣版，但介面上採用 jQuery Mobil，這讓它在 Touch 行動設備上的顯示與運作可以良好。

ASP.NET MVC 4 的顯示模式(Display Modes)

這裡所謂的顯示模式簡單的想，如果你是從手機瀏覽器來的 Request，我就回應手機版網頁給你，其他我就回應一般網頁給你。你也可以針對特別版本來設計其回應網頁，程式會自動判斷，然後回應。

新顯示模式，讓應用程式依 Request - Browser's 兩者相依關係來選擇。

例如，
Destop Browser → Request → 回應 \Views\Home\Index.vbhtml
Mobile Browser → Request → 回應 \ Views\Home\Index.mobile.vbhtml

• 如果你 Views\Shared 下包含 _Layout.vbhtml 及 _Layout.mobile.vbhtml (即ASPX裡的 Site.Master 主版頁面)，同上，手機會使用 _Layout.mobile.vbhtml，其他會使用 _Layout.vbhtml。
• 如果你 Views\Shared 下包含 _MyPartial.vbhtml 及 _MyPartial.mobile.vbhtml (即ASPX裡的 LogOnUserControl.ascs 或使用者控制項或部份檢視)，當程式 @Html.Partial("_MyPartial") 運作時，同上，手機會使用 _MyPartial.mobile.vbhtml，其他會使用 _MyPartial.vbhtml。

你也能建立特別 views, layouts, partial views 給其他的設備，只要注冊新 DefaultDisplayMode Instance 到指定名稱，例如，"iPhone"。我們在 Global.asax 的 Application_Start 方法來註冊 iPhone 這個字串：

DisplayModes.Modes.Insert(0, New DefaultDisplayMode("iPhone") With { _
	.ContextCondition = ( _
        Function(context) context.Request.UserAgent.IndexOf( _
                          "iPhone", _
                          StringComparison.OrdinalIgnoreCase) >= 0) _
})

之後，如果是由 iPhone 所發出的 Request，程式就會去找 _Layout.iPhone.vbhtml 來回應。

ASP.NET MVC 4 測試心得

就目前 ASP.NET MVC 4 開發者預覽版的測試而言，一是 UI 上的改進，二是 Mobile 的支援。 ASP.NET MVC 本身並無太大更動。另外我們也發現，從 ASP.NET MVC 4 這一版開始，全面使用 jQuery 相關技術，不管是 jQuery UI、jQuery Mobile，看來 jQuery 都快要變成基本技能、要求之一。

加油，我們的肝！

參考資料

• ASP.NET MVC 4 Developer Preview Release Notes