1. 程式人生 > >ASP.NET Core 2.0 : 四. _Layout與_ViewStart(轉)

ASP.NET Core 2.0 : 四. _Layout與_ViewStart(轉)

src 新建 req app com mage blog 再次 重復

本章我們新建一個項目,並通過這個項目熟悉一下_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文件,將裏面的一大堆代碼改成如下代碼

技術分享圖片
 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 系列目錄

原文地址:https://www.cnblogs.com/FlyLolo/p/ASPNETCore2_4.html

ASP.NET Core 2.0 : 四. _Layout與_ViewStart(轉)