在過不久 ASP.NET MVC 5 就要正式上線了,從 ASP.NET MVC 2.0 .... ASP.NET MVC 3 ... ASP.NET MVC 4 ... 一直到 ASP.NET MVC 5 短短幾年的時間,也看出微軟在這方面做了不少努力,快來看看這次的 Techday 分享的 ASP.NET MVC 5 新功能探討又會有哪些內容,相信身為 ASP.NET MVC 開發人員你一定不能錯過!
前言
在過不久 ASP.NET MVC 5 就要正式上線了,從 ASP.NET MVC 2.0 .... ASP.NET MVC 3 ... ASP.NET MVC 4 ... 一直到 ASP.NET MVC 5 短短幾年的時間,也看出微軟在這方面做了不少努力,快來看看這次的 Techday 分享的 ASP.NET MVC 5 新功能探討又會有哪些內容,相信身為 ASP.NET MVC 開發人員你一定不能錯過!
開場
Agenda
保哥這次分享的內容大致如下:
Visual Studio 2013 新的範本
- One ASP.NET
- 原本 Visual Studio 2012 的 ASP.NET 範本
One ASP.NET
- 可同時選擇 Web Forms / MVC / Web API 範本
- 可變更驗證方式 - 不驗證、個別使用者帳戶、組織帳戶、Windows 驗證
這部份的內容在之前微軟北美的 TechDays 時就有許多投影片都有講到了,在 Visual Studio 2013 之後會將傳統的 ASP.NET 範本整合成單一的對話框。
Web API 的說明頁面
- 產生文件的 SOP
- 設定流程
-
在 Controller 開頭加上註解
/// <summary> Values API </summary> /// -
在 Action 上方加上註解
// Get 方法 - 為專案加上 XML 檔(專案屬性 -> 建置 -> 輸出 -> XML 文件檔案 - > 建置
- 會在 App_Data 產生 專案的註解 XML 檔案
- 在範本 Area -> App_Star -> HelpPageConfig.cs 修改程式碼
- 重新執行
而從 ASP.NET MVC 4 開始的 Web API ,也讓我們在開發 API 也越來越方便,但伴隨著你網站的 API 越來越多,說明文件也相對顯得重要,而這次的 ASP.NET MVC 5 中而若你的 Visual Studio 2012 有安裝 Update 2 更新套件的話,或是使用 ASP.NET MVC 5,在你建立 Web API 時也將說明頁面放進範本中,簡單幾個設定就可以直接產生 API 說明文件。
- 感謝 KKBruce 前輩修正錯誤 (ASP.NET Web API 範本從 VS 2012 Update 2 開始就內建有 Help Page 的範本)
Visual Studio 2013 新的功能
- Brower Link - 利用 SignalR 讓瀏覽器和 VS 串接起來
- 一鍵重新整理已經 Link 的所有開啟的瀏覽器
- 方便測試行動版網站
- 需啟用偵錯模式
-
若要讓靜態的 .HTML 網頁也能使用 Brower Link 功能,可在 Web.config 加入
<system.webServer>
<modules runAllManageModulesForAllRequests="true"/>
</system.webServer>
- Brower Link 儀表版
- Design Mode - 可直接從瀏覽器修改網頁內容,VS 內的程式碼也會跟著改
- Inspect Mode - 可從瀏覽器選擇某個區塊,會對應到 VS 內的程式碼區塊
- Web Essentials 2013 擴充套件
- unuse CSS - 可分析網站的 CSS 是多餘的
- CssSync - 修改 CSS 樣式不用重新整理頁面
- 全新的支架 - Scaffold
- 以往能直接從 Controller 新增 View -> 現在變成要直接從 View 的資料夾 / 右鍵 / 新增支架 / 選擇檢視頁面
Bootstrap - 全新的預設專案範本
- 由 Twitter 發展
- 支援行動版網頁設計(Responsive)
- 可以讓完全不懂 CSS 的開發人員也能設計出好的網站
- 目前最新版本 3.0 版本
- bootswatch - 提供免費的 Bootstrap 網站版型
- wrapbootswatch - 提供上萬個需付費的 Bootstrap 網站版型
- ASP.NET 內建的 Bootstrap 範本為 2.x 版本 -
- 如何將專案升級到 3.0 版本
- 透過 Nuget 先將套件升級到 3.0 版本
- 到 upgrade-bootstrap.bootply.com 網站
- 將原本的程式碼貼到工具區塊
- Convert to Bootstrap 3
- 將轉換後的程式碼貼回專案
ASP.NET Identity
- 全新的會員管理機制 - 統合所有 ASP.NET 專案
- 使用 Entity Framework Code First 擴充欄位更方便
- 實作 IIdentityStrore 能自由選擇會員資料儲存的位置
- 支援 Claims-based authentication
- ASP.NET Identity 核心類別
- IdentityStoreManagers - 管理資料儲存位置
- IdentityAuthenticationManager - 只管使用者 登入 / 登出 兩件事情
- 若專案要引用 ASP.NET Identity 可透過 Nuget 安裝
- 內建四種身分驗證機制
- 不驗證
- 個別使用者帳戶 - 傳統表單驗證或整合第三方網站登入
- 組織帳戶
- Windows 驗證
- 整合 Facebook 登入
- 到 Facebook 新增新的應用程式
- 複製 appId 、appSecret 到網站內設定
- 需啟用 SSL 連線模式
- 需到專案屬性 -> Web -> IISExpress -> 建立 SSL 的虛擬目錄
- 複製 SSL 的網址
- 選擇以 Facebook 登入網站,將 SSL 網址貼到 Facebook 設定內
- 擴充欄位
- 可直接到 Models \ IdentityModels.cs 新增欄位
- 在到 Models \ IdntityViewModels.cs 新增頁面顯示的欄位
- 建立角色與使用者 - 透過 AuthenticationIdentityManager 來實作
新的 ASP.NET Identity 也算是非常有趣的功能,讓開發人員未來在實作驗證時也更加方便和彈性,並且預設以 code first 的方式,讓在開發上擴充欄位時也會更加的方便。
若舊有的專案也想使用新的 ASP.NET Identity 也能從 Nuget 來進行更新!
Authentication filters - 全新的身分驗證過濾器
- 動作過濾器要實作 IActionFilter
- 認證過濾器要實作 IAuthenticationFilter 介面 - OnAuthentication、OnAuthenticationChallenge
Filter overrides - 強化動作過濾器生命週期
- 可以針對 Action 或 Controller 取消特定類型的過濾器
還記得從 ASP.NET MVC 4 開始,可以針對 Filter 來做 global 的設定,但一旦將某個 Filter 設定為 global 之後,每個 action 都會套用此設定,但卻不允許有例外,而這次的 ASP.NET MVC 5 也加入了可以直接對某個 action 加上特例,來取消global filter 的功能,算是非常的親"民"
總結
若對完整的內容有興趣的朋友們,可以直接參考保哥在 Techdays 2013 的投影片,網址如下:http://www.slideshare.net/WillHuangTW/dev208-aspnet-mvc-5
新手發文,如有錯誤煩請告知,感謝。
如果喜歡我的文章請按推薦,有任何問題歡迎下面留言~~~
簽名:
學習這條路很廣,喜歡什麼技術不重要,重要的是你肯花時間去學習