iT邦幫忙

DAY 15
4

在錯誤中學習ASP.NET MVC系列 第 15

認識View - View的種類

  • 分享至 

  • xImage
  •  

在上一篇了解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時完全不知道這是啥,而且預設專案下也沒看到它們的蹤影,很神祕吧!嘿嘿嘿...


上一篇
認識View - 目錄結構
下一篇
認識View - Razor基本語法
系列文
在錯誤中學習ASP.NET MVC30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言