關於檢視檔案

ASP.NET Core Web 應用開發–使用 MVC 框架 / PART I MVC 入門 / MVC - View 的部份/關於檢視檔案

MVC架構裏的檢視,是支援撰寫 C# 程式的HTML檔案,以 cshtml 為副檔名,負責提供 Web應用需要的視覺介面,可以被視為升級版的 html 檔案,以前述建立的HelloView.cshtml 為例,以下為其內容:

紅色框線標示的部份為 C# 程式碼,配置於符號 @ 標示的大括弧中,實務開發中,檢視檔案裏的 C# 是名為 Razor 的程式語法,這是一種以 C# 為基礎根植於打造動態網頁內容而設計的一種特殊語法,後續的 Razor 章節進一步討論。

檢視最後會轉換成為合法的 HTML 內容,以支援瀏器的解譯與呈現,通常Web應用包含了大量的檢視檔案以提供需要的網頁介面,所以專案架構為了呈現一致性的視覺外歡,會建立共用的檢視檔案作為樣板檔案,然後根據需求將要呈現的檢視檔案嵌入其中形成完整的網頁。

同樣的再以 HelloView.cshtml 為例,雖然只有一段 Razor程式碼以及一組 h1 標籤,但是在瀏覽器呈現的網頁,包含頁首與頁尾,參考以下的截圖:

框線標示的部份是 HelloView.cshtml 的檔案,其它的部份則是樣板檔案提供的頁首與頁尾。

MVC 專案架構裏面,預設的樣檔案名稱是 _Layout.cshtml ,開啟方案總管視窗,可以看到這個檔案配置於 Views/Shared 資料夾中

截圖左邊是 _Layout.cshtml,仔細觀察其中的內容,是標準的 HTML 網頁架構,移至其中的 <body> 標籤,<head> 包含了預先定義的頁首部份,而 <footer> 則是頁尾的部份:

以上的截圖說明板的設計架構,其中紅色箭頭指向的 @RanderBody() 是檢視檔案嵌入的位置,在預設的情形下,每一次建立檢視檔案設計完成後,執行時會被嵌入此位置,與此樣板檔案完成整合產生對應的 HTML 之後,傳送至瀏覽器,因此所有的檢視檔案,除了嵌入RendorBody()部份的內容差異,均會以統一的樣板呈現。

如果不特別設定,檢視檔案會套用樣板檔案,回到新增檢視 HelloView.cshtml 出現的「新增 Razor 檢視」設定畫面:


請注意畫面下方「使用版面配置頁」核取選項為核取狀態,表示建立的檢視檔案未來將嵌入樣板,也因為這個設定,所以建立的樣板檔案本身,只需配置其專屬的內容而非完整的網頁結構。

現在回到一開始開啟一開始建立「HelloMVC」專案配置的預設檢視 index.cshtml,可以看到同樣的只包含專屬的內容配置,因此瀏覽器載入時同樣具有相同的頁首與頁尾,,以下是其中的內容:

取消使用版面配置頁

Web 應用總會有些特別的情境需要獨立於整個應用的頁面,這個時候只需要在建立檢視的過程中,取消使用版面配置頁的選項即可。

重新開啟控制器並且新增一組動作方法 SPage,建立對應的檢視檔案 SPage.cshtml :


過程中於「新增 Razor 檢視」設定畫面中,取消「使用版面配置頁」項目,完成新增作業。

Spage.cshtml 建立於 Views/Home 資料夾,以下為其中的內容:


與稍早建立的 HelloView.cshtml 不同,請注意一開始配置的 Layout = null; ,這一行程式碼表示 SPage.cshtml 是獨立檢視檔案,沒有套用樣板,因此內容是完整的HTML網頁架構。


沒有留言: