[TechDays 2013] ASP.NET MVC5 新功能探討 - 個人重點筆記(圖文)


在過不久 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
  • 設定流程
  1. 在 Controller 開頭加上註解
    /// <summary> Values API </summary> ///
  2. 在 Action 上方加上註解
    // Get 方法
  3. 為專案加上 XML 檔(專案屬性 -> 建置 -> 輸出 -> XML 文件檔案 - > 建置
  4. 會在 App_Data 產生 專案的註解 XML 檔案
  5. 在範本 Area -> App_Star -> HelpPageConfig.cs 修改程式碼
  6. 重新執行 

而從 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 串接起來
  1.  一鍵重新整理已經 Link 的所有開啟的瀏覽器
  2. 方便測試行動版網站
  3. 需啟用偵錯模式
  4. 若要讓靜態的 .HTML 網頁也能使用 Brower Link 功能,可在 Web.config 加入
    <system.webServer>
        <modules runAllManageModulesForAllRequests="true"/>
    </system.webServer>    
  • Brower Link 儀表版
  1. Design Mode - 可直接從瀏覽器修改網頁內容,VS 內的程式碼也會跟著改
  2. Inspect Mode -  可從瀏覽器選擇某個區塊,會對應到 VS 內的程式碼區塊

  • Web Essentials 2013 擴充套件
  1. unuse CSS - 可分析網站的 CSS 是多餘的
  2. CssSync - 修改 CSS 樣式不用重新整理頁面
  • 全新的支架 - Scaffold
  1. 以往能直接從 Controller 新增 View -> 現在變成要直接從 View 的資料夾 / 右鍵 / 新增支架 / 選擇檢視頁面

Bootstrap - 全新的預設專案範本

  • 由 Twitter 發展
  • 支援行動版網頁設計(Responsive)
  • 可以讓完全不懂 CSS 的開發人員也能設計出好的網站
  • 目前最新版本 3.0 版本
  • bootswatch - 提供免費的 Bootstrap 網站版型
  • wrapbootswatch - 提供上萬個需付費的 Bootstrap 網站版型
  • ASP.NET 內建的 Bootstrap 範本為 2.x 版本 -
  • 如何將專案升級到 3.0 版本
  1. 透過 Nuget 先將套件升級到 3.0 版本
  2. 到 upgrade-bootstrap.bootply.com 網站
  3. 將原本的程式碼貼到工具區塊 
  4. Convert to Bootstrap 3 
  5. 將轉換後的程式碼貼回專案 

ASP.NET Identity 

  • 全新的會員管理機制 - 統合所有 ASP.NET 專案
  • 使用 Entity Framework Code First 擴充欄位更方便
  • 實作 IIdentityStrore 能自由選擇會員資料儲存的位置
  • 支援 Claims-based authentication 

  • ASP.NET Identity 核心類別
  1. IdentityStoreManagers - 管理資料儲存位置
  2. IdentityAuthenticationManager - 只管使用者 登入 / 登出 兩件事情
  • 若專案要引用 ASP.NET Identity 可透過 Nuget 安裝
  • 內建四種身分驗證機制
  1. 不驗證
  2. 個別使用者帳戶 - 傳統表單驗證或整合第三方網站登入
  3. 組織帳戶
  4. Windows 驗證
  • 整合 Facebook 登入
  1. 到 Facebook 新增新的應用程式
  2. 複製 appId 、appSecret 到網站內設定
  3. 需啟用 SSL 連線模式
  4. 需到專案屬性 -> Web -> IISExpress -> 建立 SSL 的虛擬目錄
  5. 複製 SSL 的網址
  6. 選擇以 Facebook 登入網站,將 SSL 網址貼到 Facebook 設定內
  • 擴充欄位
  1. 可直接到 Models \ IdentityModels.cs 新增欄位
  2. 在到 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

新手發文,如有錯誤煩請告知,感謝。
如果喜歡我的文章請按推薦,有任何問題歡迎下面留言~~~

 

 

簽名:

學習這條路很廣,喜歡什麼技術不重要,重要的是你肯花時間去學習