ASP.NET Core 2.0 : 四. _Layout與_ViewStart
本章我們新建一個項目,並通過這個項目熟悉一下_Layout與_ViewStart以及它們的加載順序.
新建一個項目
首先, 文件->新建一個解決方案
選擇.Net Core 的APP下面的ASP.NET Core Web App(MVC)
Next
設置解決方案的名稱(和Xcode的界面風格有點像), 輸入FL.WeightManager, 做一個每天記錄體重的應用
點擊Create.
項目新建完畢, 項目的文件結構上一章已經說過了.
_layout的應用
新建好的項目默認運行效果如下圖
頁面主要分三部分, 上面的header, 下面的footer, 點擊上面菜單總的Home、About和Contact切換一下頁面看一下
這兩部分都是不變的, 只有中間部分在變.
打開Shared文件夾下面的_layout.cshtml頁面看一下, header和footer都是定義在這裏的,
而中間變的部分是 @RenderBody().也就是我們經常要改變的地方了.
現在將主頁改變一下, 打開Home文件夾下的Index文件,將裏面的一大堆代碼改成如下代碼
1 @{ 2 ViewData["Title"] = "主頁"; 3 } 4 <table class="table table-hover"> 5 <thead> 6 <tr> 7 <th>序號</th> 8 <th>日期</th> 9 <th>體重</th> 10 <th>備註</th> 11 </tr> 12 </thead> 13 <tbody> 14 <tr> 15 <td>1</td> 16 <td>2018-02-15</td> 17 <td>66.6</td> 18 <td>除夕,胖了</td> 19 </tr> 20 <tr> 21 <td>2</td> 22 <td>2018-02-16</td> 23 <td>68.8</td> 24 <td>春節,又重了</td> 25 </tr> 26 </tbody> 27 </table>
刷新一下頁面
看起來效果還不錯, 可能會註意到, 這個table有個class <table class="table table-hover"> ,
這個class定義在哪裏呢.
再次打開_layout文件, 可以看到裏面在Development環境下引用了bootstrap的css
<environment include="Development"> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="~/css/site.css" /> </environment>
所以可以把一些"通用"的css和js的引用放在layout文件裏, 避免重復寫這些引用.
順便把header和footer中顯示的項目名稱改一下, 然後分別打開Index和About這些頁面, Header和Footer都統一改變了.
如下圖的About頁面.
但是我們在這個Index頁中沒有對這個模板做引用, 是通過什麽方式引用的呢?
_ViewStart的應用
回顧修改後的Index頁面, 我們並沒有寫 Layout = "_Layout" 這樣的代碼, 這是因為已經在_ViewStart中默認設置了
_ViewStart中只有這一句
@{ Layout = "_Layout"; }
如果我們在Index頁面中添加一句 Layout=null 如下,
@{ Layout=null; ViewData["Title"] = "主頁"; }
再次刷新頁面, 樣子變成了這樣
Header和Footer以及Table的樣式全都沒有了, 是因為這些本來都寫在_Layout中, 現在失去了對_Layout的引用, 這些也就消失了.
總結: _ViewStart對模板頁做了默認的設置, 除非顯示的寫明Layout=XXX, 否則會采用_ViewStart中的設置.
所以未做設置和設置 Layout = "_Layout" 的效果是一樣的.
_ViewStart、_Layout和Index(實際頁面)的加載順序
加載順序是: _ViewStart =>Index=>_Layout.
1._ViewStart在所有View加載之前加載, 設置了默認的模板頁.
2.接著由Controller指定的頁面查找Index.cshtml加載, 並讀取該頁面的Layout設置.
3.根據Index頁面的Layout設置的模板頁查找對應的模板頁加載.
將_ViewStart中的 Layout = "_Layout" 改為 Layout = "_Layout1" , 再次運行, 頁面會出現如下找不到模板的錯誤.
An unhandled exception occurred while processing the request. InvalidOperationException: The layout view ‘_Layout1‘ could not be located. The following locations were searched: /Views/Home/_Layout1.cshtml /Views/Shared/_Layout1.cshtml Microsoft.AspNetCore.Mvc.Razor.RazorView.GetLayoutPage(ViewContext context, string executingFilePath, string layoutPath)
View的查找規則: 先查找Controller對應的文件夾(這裏是Home), 若未找到則到Shared文件夾查找, 若最終未找到則提示錯誤.
ASP.NET Core 2.0 : 四. _Layout與_ViewStart