網頁

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
圖一:ASP.NET MVC 4 專案樣版 UI

adaptive rendering 技術
圖二:adaptive rendering 技術

Log On 使用 jQuery UI 的效果
圖三: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 手機專案樣版
圖四: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 都快要變成基本技能、要求之一。

加油,我們的肝!

參考資料

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。