項目生成后的目錄如下圖,我們逐個分析一下這些文件的用途先。

1. wwwroot 目錄用於存放 css文件、JS文件、圖片文件、第三方前端框架/庫文件等,這個目錄的特別之處在於頁面中如果要引用其中的文件,
比如 site.css 時 , 其路徑不需要加 wwwroot 這個文件夾路徑。打開 _Layout.cshtml 這個文件, 如下圖:

這里的路徑是 "~/css/site.css" ,不是 "~/wwwroot/css/site.css" ,即使 wwwroot 這個文件夾真實存在,如下圖:

問題:為什么微軟會在WebAPP中定義這樣一個文件夾呢,是因為NET6(其實從netcore誕生就存在了)中所有的服務都是以中間件的形式提供的,
訪問css、js、image這些靜態文件也是以中間件的形式提供的,必須授權了才能訪問,但是一個網站不可避免會用到這樣一些文件,我們
一般也不會給這些文件設置訪問權限,所以對那些不需要特別控制訪問權限的靜態文件可以都放在wwwroor這個文件夾中。如果我們在項目
中新建一個文件夾 ,里面放一張圖片,當我們在網址上輸入圖片的URL打開這張圖片的時會報錯,無法直接查看這張圖片,必須要給這個目錄
配置相應的中間件服務才行。
2. asp-append-version=true 這個屬性是 razor page 中定義的一個服務器屬性,如果設置為 true 后,訪問網站后點鼠標右鍵“查看頁面源代碼”,
可以看到這行代碼將生成一個帶查詢字符串的url ,如下圖:


其作用是防止瀏覽器緩存 site.css 這個文件。每次刷新頁面時,瀏覽器都會到服務器上重新抓取 site.css ,利用這個特性,我們可以在開發階段設置 asp-append-version=true,
防止更改樣式后因為瀏覽器緩存而不能馬上看到頁面要呈現的效果。發布到生產環境時可以設為 false , 讓瀏覽器緩存 site.css,節約網絡帶寬,加快網站的訪問速度。
3 . wwwroot下的 lib 這個目錄用於放第三方的庫文件,比如jquery、bootstrap等,bootstrap 是一個前端框架,功能比較強大,一些常用的顯示效果能很輕松的實現,
比如頁面數據顯示時自動適應PC、手機等不同設備的寬度。
4. Pages下是所有的頁面文件, shared目錄下存放一些通用頁面,比如布局頁或者視圖頁,布局頁用於定義整個網站的框架結構,視圖頁用於將一些重復度高的功能抽離出來,方便其他頁面引用。
像登錄這樣的功能就可以單獨拿出來做成一個視圖頁,需要用到的頁面引用它就可以了,后期維護起來很方便。
布局頁或視圖頁一般以“_” 開頭,在Razor Pages中,以下划線“_”開頭的頁面是不能在瀏覽器中直接訪問的,只能被其他頁面引用。
5. appsettings.json是網站的配置文件,是以JSON格式存儲的。
6.Program.cs是網站的啟動文件,一般會配置類和接口的依賴注入關系以及啟用特定的中間件。
7.其他補充:
_ViewStart.cshtml 和 _ViewImports.cshtml 是所有頁面都會繼承的兩個視圖頁,但作用不同,_ViewStart.cshtml 中只有一行代碼,如下圖:

它用於為所有頁面自動套用 _Layout.cshtml 這個布局頁,如果刪除這個文件后還希望 index.cshtml 套用 _Layout.cshtml 布局頁的話,
可以在index.cshtml中加上如下的代碼:

簡而言之 , 如果不想在每個頁面中都寫 Layout = "_Layout"; 這樣一行代碼,就保留 _ViewStart.cshtml 文件,否則可以刪除。
_ViewImports.cshtml 中的代碼如下:

很明顯,這個視圖頁的功能就是把頁面都需要引用的名稱空間等資源包括進來,防止每個頁面中都去寫這些重復的代碼。最大的好處是當我們改了某個類的名稱空間后,
只要改這個文件就可以了,否則所有引用的頁面都要去修改,如果項目中有上百個文件的話,這個工作量也是比較頭大的。
_ValidationScriptsPartial.cshtml 中的代碼如下:

這里引入了Jquery的2個插件,如果需要用到Jquery的這2個插件,需要在相應的頁面中加入如下的代碼:<partial name="_ValidationScriptsPartial" /> ,
partial是服務端的標簽,用於引入視圖頁,name屬性后面是視圖頁的名稱,不需要.cshtml 這個擴展名。
加入這行代碼后,就可以在頁面中調用Jquery插件中的函數了。VS2022中雖然生成了_ValidationScriptsPartial.cshtml這個視圖文件,
但是沒有被任何頁面引用,不需要使用的話是可以刪除的。
注:在NET6 Razor Pages 中,所有對頁面、視圖頁、布局頁的引用都不需要加上文件擴展名,直接使用名稱就可以了。
最后,我們來看一下 _Layout.cshtml 這個文件的內容:

除了HTML標簽外,重點看1、2、3這三處的代碼,其作用如下:
1、@ViewData["Title"] 用於顯示頁面的標題。
比如 Index.cshtml 引用了 _Layout.cshtml這個布局頁 , 我們希望訪問 http://localhost:5208/index 時瀏覽器標題顯示為 Home Page , 需要在Index.cshtml中加上如下的代碼:

瀏覽器訪問后呈現的效果如下:

2、@RenderBody() 用於輸出對應頁面的內容,比如 Index.cshtml 中對應輸出紅框中的部分:

3、@await RenderSectionAsync("Scripts", required: false) 用於頁面引入一段腳本,當然也可以是HTML標簽等,required: false 表示內容可以為空。
比如:要在 Index.cshtml 中引用 index.js 這個腳本文件,可以這樣寫:

@section 后的名稱要和_Layout.cshtml 中定義的一致(這里是Scripts), 訪問 index.cshtml 文件后查看頁面源代碼 , 可以看到 index.js 出現在了指定的位置:

如果我們把 @section Scripts{ <script type="text/javascript" src="~/js/index.js"></script> } 換成 <script type="text/javascript" src="~/js/index.js"></script> 會怎么樣呢?
查看index.cshtml 頁面源代碼如下:

可以看到,index.js 出現的位置發生了變化。如果我們要讓一段 javascript 代碼出現在指定的地方,使用 @section 指令是唯一的選擇。特別是一些 js 文件,
相互之間往往有依賴關系,在頁面中出現的順序是有要求的,使用@section指令可以很好的解決這個問題。
同樣的道理,如果我們想在 _Layout.cshtml的 <head></head>之間插入一段Style 代碼,可以這樣寫:

Index.cshtml 中這樣寫就可以了:

訪問頁面后“查看頁面源代碼”如下,它位於<head></head>標簽之間而不是其他位置:

因為在 _Layout.cshtml 中定義 @await RenderSectionAsync("Scripts", required: false) 時設置 required:false,所以Index.cshtml 中
沒有 @section Scripts{ <script type="text/javascript" src="~/js/index.js"></script> } 這條語句時訪問頁面也不會出錯,如果設置 required:true , 那么訪問
index.cshtml時會報錯,如下:

@section 指令相當於一個占位符,引用的頁面可以把某段代碼放在指定的位置,如果這段代碼必須要有,設置 required:true 就可以了,否則設為 false。
