ASP.NET Core 2.0 : 四. _Layout與_ViewStart

本章我們新建一個項目,並通過這個項目熟悉一下_Layout與_ViewStart以及它們的加載順序.

ASP.NET Core 系列目錄

新建一個項目

首先, 文件->新建一個解決方案

選擇.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文件,將里面的一大堆代碼改成如下代碼

 

@{
    ViewData["Title"] = "主頁";
}
<table class="table table-hover">
    <thead>
        <tr>
            <th>序號</th>
            <th>日期</th>
            <th>體重</th>
            <th>備注</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2018-02-15</td>
            <td>66.6</td>
            <td>除夕,胖了</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2018-02-16</td>
            <td>68.8</td>
            <td>春節,又重了</td>
        </tr>
    </tbody>
</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 系列目錄