ASP .NET 4.5新功能預覽(上)
文‧圖/王寧疆 2012/5/15 下午 05:19:14
網頁開發的主流技術-ASP .NET即將推出最新的4.5版,加足馬力拋開競爭對手的挑戰,在網頁設計與開發工具的領域繼續以領導者之姿獨走。
ASP .NET 4.5在支援網頁開發方面不但在編輯HTML文件與CSS樣式表有長足的進步,而且支援編輯最新的「HTML 5」與「CSS 3」,協助網頁程式設計師善用最新的網頁開發技術設計網站。
新版本的 .NET Framework在核心與功能提供了更多對網站開發技術強有力的支援,ASP .NET 4.5本身也對WebForm網站開發不遺餘力推升其開發的動能,當然在重要性與日俱增的MVC Framework方面,ASP .NET 4.5的支援火力也不曾稍歇,在社群網站已經普及到廣大的網民,成為網路族群每日不可或缺的精神食糧的時代,支援利用社群網站(例如Facebook網站)登入網站的功能也是滿足網站程式設計師開發需求不可或缺的功能之一。
在這一篇文章中,我們將要探討Microsoft支援網站開發的最新ASP .NET技術,洞燭機先,善用最新的技術打造成功的網站。
認識ASP .NET 4.5
Microsoft即將推出,代號為Visual Studio 11的程式開發工具支援最新版本的網站開發技術-ASP .NET 4.5,擁有眾人期盼的HTML 5文件和CSS 3樣式表編輯功能,支援基於IE 9.0的Javascript的功能寫作提示(Intellisense),支援開發適合智慧型手機與平板電腦瀏覽的網頁,支援更簡易的非同步作業,支援適用於各種SQL Server資料庫的Universal Provider,支援更彈性的Request Validation,以及支援將網站使用的Javascript程式檔與CSS樣式檔打包成單一的檔案以縮短檔案的下載速度,改善網頁瀏覽效率的打包處理技術。
Visual Studio 11.支援的超強網頁編輯功能
第一個要為大家介紹的新功能是Visual Studio 11超強的網頁編輯功能,Visual Studio 11不但支援編輯最新的HTML 5文件,CSS 3樣式表,也提供最新的Javascript程式碼編輯功能。
功能更強大的HTML文件編輯器
在編輯HTML和ASPX文件的功能方面,Visual Studio 11會在你編輯start tag時自動同步修改end tag的內容,省去程式設計師在修改start tag之後必須自行修改end tag的功夫。對習慣使用Web使用者控制項建立網頁的程式設計師安裝了Visual Studio 11之後,可以很容易地將現有的網頁內容建立成Web使用者控制項,程式設計師只要反白欲建立成Web使用者控制項的網頁內容,使用滑鼠右鍵點中反白的內容,從出現的功能表選擇[Extract to User Control]功能,就可以將所反白的內容建立成Web使用者控制項,而且會自動為網頁加入註冊Web使用者控制項的語法並加妥已建立成Web使用者控制項的宣告。
在支援HTML 5文件編輯方面,Visual Studio 11支援編輯HTML 5規格的文件。有了Visual Studio 11,程式設計師可以很容易地為網頁加入可以播放音樂的〈audio〉標籤,可以播放影片的〈video〉標籤,利用〈input〉標籤的type屬性設定輸入欄位能夠接受的資料格式 (為ASP .NET的TextBox控制項設定TextMode屬性可以達到相同的效果) ,為 〈input type="file"〉 標籤設定multiple屬性以便執行多檔上傳 (為ASP .NET的FileUpload控制項設定AllowMultiple屬性可以達到相同的效果) 。
熟悉ASP .NET網站開發技術的程式設計師或多或少都受惠於[智慧標籤(Smart Tag)]提供的快捷功能,但是使用舊版本的Visual Studio開發網頁的程式設計師必須切換到網頁的[設計]畫面,才能夠使用控制項的智慧標籤功能表,如果在[原始檔]編輯畫面,就無法使用到控制項的智慧標籤功能表。Visual Studio 11提供的[原始檔]編輯畫面改善了舊版本的Visual Studio的缺點,讓程式設計師可以和在[設計]畫面編輯網頁一樣方便地使用智慧標籤功能表。
圖1所示即為在網頁的[原始檔]編輯畫面利用〈GridView〉標籤左下角的智慧標籤功能表設定GridView屬性常用屬性的畫面:

▲ 圖1 利用GridView控制項的智慧標籤功能表設定GridView屬性常用屬性的畫面。
除了智慧標籤功能表以外,Visual Studio 11也支援程式設計師利用網頁的[原始檔]編輯畫面為控制項加入事件處理程序,你只要於網頁的[原始檔]編輯畫面為控制項設定事件處理程序,再選擇[Create New Event]功能,就可以直接為指定的控制項製作事件處理程序。圖2所示即為為GridView控制項製作Sorted事件處理程序的畫面:

▲ 圖2 為GridView控制項製作Sorted事件處理程序的畫面。
如果網頁有套用主版頁面(Master Page),程式設計師可以使用滑鼠的右鍵點中網頁的[設計]畫面或是[原始檔]編輯畫面顯示的內容,再從出現的功能表選擇[Edit Master]功能,就可以快速切換到網頁套用的主版頁面的編輯畫面,對主版頁面的內容進行編輯。
功能更強大的Javascript程式編輯器
除了編輯HTML 5文件的支援以外,Visual Studio 11在編輯Javascript程式檔案方面不但支援編輯ECMAScript5規格的程式碼,而且提供Go To Definition(移至定義)功能,讓程式設計師可以快速找到欲檢視的Javascript函數。程式設計師只要使用滑鼠的右鍵點中欲檢視的Javascript函數名稱,從出現的功能表選擇[Go To Definition]功能,或是按下F12功能鍵,就可以直接跳至欲檢視的Javascript函數,檢視完畢後還可以按下[Ctrl+"-"]組合鍵跳回原先的位置,在維護Javascript程式檔案方面提供實用的幫助。
在功能提示(Intellisense)方面,Visual Studio 11支援依據任何的Javascript檔案的內容提供功能提示,你只要在寫作Javascript檔案的時候,於Javascript檔案的最前面利用〈reference〉標籤參考到當做功能提示來源的Javascript檔案,如下:
/// 〈reference path="Scripts/MyScript.js" /〉
就可以在使用到被參考的Javascript檔案的內容時得到友善的功能提示,降低寫作程式發生語法錯誤的機會。
談到對編輯Javascript的支援就不能不談Visual Studio 11對知名的jQuery Javascript Library的支援。Visual Studio 11不但支援利用jQuery Javascript套件開發網頁的功能,也支援於網頁中使用jQuery Template。例如以下的網頁便會利用jQuery Template顯示人員資料,並將年齡超過30歲的人員用紅色的文字加註:

執行上述的網頁你將會看到如圖3的結果:

▲ 圖3 利用jQuery Template顯示人員資料的網頁執行的結果。
功能更強大的CSS樣式表編輯器
在編輯CSS文件方面,Visual Studio 11支援編輯CSS 3規格的內容,而且內建色彩選擇功能,當我們在編輯CSS樣式表中的色彩時,就可以透過Visual Studio 11提供的色彩選擇功能方便地輸入色彩,如圖4所示:

▲ 圖4 編輯樣式表的色彩時利用Visual Studio 11的色彩選擇功能輸入色彩的情形。
如果所編輯的樣式有隸屬關係,例如td隸屬於table,則Visual Studio 11會自動依據樣式的隸屬關係加以縮排,利於檢視與維護,例如以下的樣式表內容就是Visual Studio 11自動縮排的結果:
table {
}
table td {
}
新版的Visual Studio 11支援程式設計師編輯CSS樣式表時也可以像編輯一般的程式碼一樣整段展開或收合CSS樣式表的內容,或是將CSS樣式表的內容整段標示為註解,或是解除整段樣式表的註解。