在錯誤中學習ASP.NET MVC 第 15 篇 - 認識View - View的種類

 在上一篇了解Views資料夾結構後，今天要說明View的種類，先前使用到的都是一般檢視(View翻成檢視)，就是Action 回傳ViewResult所指定的檢視，其實Action 也可以回傳PartialView所指定的部分檢視，相信看完這段話應該也不知道我在講什麼吧XD，接下來我們就開始看一下View的種類介紹。

ActionResult可參考這篇

一般檢視

新增一般檢視的操作方法：
1.在Action按右鍵>加入檢視(在mvc4中若同名的view存在則無法建立,mvc5會覆蓋同名檔案)。
2.在Views資料夾/Contorller資料夾>案右鍵>加入>檢視。

透過上述的兩個方法後都會出現下圖的視窗，其中預設就是產生一般檢視，一般檢視可以設定主版頁面。

部分檢視

在上圖視窗中可勾選建立部分檢視，勾選之後會發現主版頁面會變成Disable，意味部分檢視是無法設定主版頁面的喔，並且Actioni要搭配回傳PartialView的型別，這樣才不會去讀取_ViewStart.cshtml的設定，如果沒有回傳PartialView型別，一般檢視跟部分檢視真的是分辨不出來差別在哪XD，所以在檔案命名時，部分檢視的檔名最前面會多加一個 _ 線來分區，這樣看到檔案名稱時就會知道此View不是一般檢視。

順便提一下上圖的建立強型別檢視，可以選擇一個Model然後透過Scaffold可以自動產生CURD的View畫面，加快開發的速度，之後講完Model會再針對此功能做說明。

主版頁面

昨天已經在Shared資料夾時有提過_Layout.cshtml，主要就是在設定網站的主要版面，將共用的區域統一抽出來管理，並且讓一般檢視可以套用此主版頁面。

透過下圖，來觀察一下一個主版頁面應該要包含什麼資訊

以下先偷講一些Razor的語法
@RenderBody()

與其他View整合的區塊，以Home/Index.cshtml為例，在畫面呈現的時候，除了會顯示_Layout.cshtml的內容之外，Home/Index.cshtml的資料會直接整塊塞到@RenderBody()的位置，如果少寫@RenderBody()，那View在執行時就不知道屬於下圖Content的區塊在哪，所以資料也塞不進去主版頁面，最後畫面呈現時就只會看到_Layout.cshtml的內容。講白一點就是挖洞給View跳XD

需要特別注意的是檢視與主版頁面的執行順序，是先執行檢視然後才會執行主版頁面喔！以前我都以為是先執行主版在執行檢視，難怪我以前不知道在寫哪段程式碼的時候，好像有遇過這個問題，弄錯執行順序會容易造成一些變數讀取的問題
執行順序：/Views/_ViewStart.cshtml > /Views/Home/Index.cshtml > /Views/Shared/_Layout.cshtml

@RenderSection()

請看一下上上圖橘色框框的程式碼，有套用公用頁面的檢視是將全部的內容塞到RenderBody的區塊裡面，那如果今天有些東西我想放在RenderBody以外的地方要怎麼辦？

此時就是RenderSection表現的時候了，來看一下Views/Home/Index.cshtml，會看到裡面定義了一個名稱為featured的section，這個區塊的資料並不會直接顯示出來，必須透過RenderSection去呼叫，所以再回去看一下_Layout.cshtml檔案，是否有找到呼叫featured的地方了哩，就是33行的@RenderSection("featured", required: false)

required是指此Section是否一定要有資料顯示，如果設成true時，檢視中沒有定義此Section的值，那網頁就會掛掉

我自己使用RenderSection的時機大多是有些頁面會使用特殊的.js或.css檔案，想要將這些檔案放到公用版面時，用可以使用RenderSection

@section script{
   <script src="~/Scripts/jquery-1.8.2.js"></script>
}

在_Layout.cshtml也有看到這兩行程式碼

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

等之後講到CSS與JS壓縮時會有更詳細的介紹

DisplayTemplates與EditorTemplates

這邊我想留在講完Model時再補充說明，一開始學MVC時完全不知道這是啥，而且預設專案下也沒看到它們的蹤影，很神祕吧！嘿嘿嘿...