Skip to main content

[探索 5 分鐘] 淺談 ASP.NET View Engine

Labels:
參考 Difference Between Razor View Engine and ASPX View Engine 所整理兩種 View 引擎的特性, 提列重點如下, 並於文末針對 Razor 語法做注意事項筆記 (陸續新增)。

Razor View EngineWeb Form View Engine
適用於 MVC3 以後版本, Razor 不是一種新的語言, 算一種標記語法ASP.NET 預設的 View Engine
命名空間為 System.Web.Razor命名空間為 System.Web.Mvc.WebFormViewEngine
附檔名為 .cshtml (Razor with C#) 或 .vbhtml (Razor with VB)附檔名為 .aspx 或 .ascx 或 .master.
Razor具有更新更進階的語法.與舊有的 .aspx 頁面語法完全相同.
Razor 語法更直覺或易用, 比如使用 @ 前置詞:
@Html.ActionLink("SignUp", "SignUp")
使用 .aspx 既有定義符號 <% 與 %> 如:
<% Html.ActionLink("SignUp", "SignUp") %>
預設會預防 XSS 攻擊 (Cross-Site Scripting Attacks), 所以輸出到 View 之前會自動 encode 特殊字元( Scripts 或 HTML 標籤), 如 <,> 預設無預防 XSS 攻擊
不緩存情況, 處理速度稍慢處理速度比 Razor 稍快
Razor 不支持頁面預覽用 Visual Studio 可看到頁面預覽 (design mode), 方便不啟動服務進行頁面設計
Razor 支持 TDD (Test Driven Development) , 因為他不與 UI 元件相依, 如 System.Web.UI.Page 類依賴 System.Web.UI.Page 類, 所以進行 TDD 或測試較為複雜

Layout的定義

微軟 layout 這篇文章帶領的不錯,
By convention, the default layout for an ASP.NET app is named _Layout.cshtml
原來他是一個置於 ~/Views/Shared/_Layout.cshtml 這個位置的檔案, 是為了方便網站做統一的外觀設計 (如顏色, 位置, 大小比例等等), 也為了程式開發能夠前後端分離。

View載入順序

如果 View 檔案 (.cshtml) 需使用 _Layout 檔案, 程式只需要加上這一行就可以套用主站台版型:
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
直覺上, 會認為 _Layout.cshtml 是優先載入, 但剛好相反, _Layout.csthml 是最後載入的 ! 千萬記得, _ViewStart.csthml 會更先被載入 (View Start 這名詞代表他的意圖), 甚至 Controller 的 View 目錄如果有自定義同名 _ViewStart.csthml 也會依序先被載入, 然後才是 Action 對應的 View。

這個載入順序很重要, 避免非預期的 .css, 或 .js 程式碼執行順序, 這可是要 runtime 才能知道的問題哦 ! 簡單來說, 依序是:
  1. /Views/_ViewStart.csthml 
  2. /Views/Home/_ViewStart.cshtml  (如果有)
  3. /Views/Home/Index.cshtml 
  4. /Views/Shared/_Layout.cshtml 
有圖有真相, 把上面四個檔案做 console.log 輸出, 看一下是否按照這個順序讀取 ?


是不是跟你想的一樣呢 ? 開啟 VS 專案檔, 再看一次相對位置, 記起來了嗎 ?


Razor語法注意事項

最基本的安裝與使用可參考 MSDN, 其餘小重點筆記如下:

@

由於 @ 是保留字, 所以要在頁面顯示 @ 符號, 則須連續使用 @, 成為 @@ 即可。

單行與多行

在 aspx, 單行與多行都是用 <% %> 包夾即可, 但 Razor 稍微簡化這個寫法, 單行只需要一個 @ 前置, 後面接變數或 Helper 即可, 如 @myVar 或 @Html; 但多行則需要 @{   } 前後包夾。

@Layout

是一個字串變數, 指向的值是實體的 _layout.cshtml 檔名, 可改為其他檔案, 或設為 null 不使用。效果就是以前的 .master 站台套版的用途。

@model vs. @Model

大小寫之差, 用途差很多:
Model actually represents an instance of the class that is your model and model is an alias for lambda expression.
所以, 小寫的 mode 代表一種資料模型類別的宣告, 大寫的 Model 則代表操作這個從 Controller / Action 傳來的資料模型實體。

Helper

MSDN 上列出的方法非常多, 但用起來就記得使用 @Html 前置詞或 @Url 前置詞, 如 @Html.ActionLink 可在頁面 render 出一個具有 <a /> 標籤的 url, 而 @Url.Action 則在頁面 render 出 url 文字而已 (無法點擊)。

Partial View

@Html.Action vs. @Html.Partial, 前者會執行 Action, 後者直接取 View 結果。Partial 很適合在一個 page 中 layout 出上下左右不同的 div, 然後各自載入部分內容, 還能夠 reuse。但 Partial 用途注意不要使用 layout 檔案, 否則很容易看到兩個天, 就變成天天了。

參考資料

  • https://docs.microsoft.com/en-us/aspnet/core/mvc/views/layout
  • http://www.dotnettricks.com/learn/mvc/difference-between-razor-view-engine-and-aspx-view-engine

Comments

Post a Comment