ASP. NET Core 2.0: 4. _ Layout and _ ViewStart, _ layout_viewstart

ASP. NET Core 2.0: 4. _ Layout and _ ViewStart, _ layout_viewstart

In this chapter, we create a new project and familiarize ourselves with _ Layout and _ ViewStart and their loading sequence.

Create a project

First, file-> Create a solution

Select ASP. Net Core Web APP (MVC) under the. NET Core App)

Next

 

Set the solution name (similar to the Xcode interface style). Input FL. WeightManager to create an application that records the weight of each day.

Click Create.

After the project is created, the file structure of the project is described in the previous chapter.

 

_ Layout Application

The default running effect of the newly created Project is shown in figure

The page consists of three parts: the header above, the footer below, and the Home, About, and Contact pages in the top menu.

The two parts are unchanged, but the middle part is changing.

Open the _ layout. cshtml page under the Shared folder and check that both header and footer are defined here,

In the middle, the change is @ RenderBody (), which is what we often want to change.

Change the Home page, open the Index file in the Home folder, and change a lot of code into the following code:

 

1 @ {2 ViewData ["Title"] = "Homepage "; 3} 4 <table class = "table-hover"> 5 <thead> 6 <tr> 7 <th> NO. </th> 8 <th> date </th> 9 <th> weight </th> 10 <th> remarks </th> 11 </tr> 12 </thead> 13 <tbody> 14 <tr> 15 <td> 1 </td> 16 <td> </td> 17 <td> 66.6 </td> 18 <td> New Year's Eve, fat </td> 19 </tr> 20 <tr> 21 <td> 2 </td> 22 <td> 2012-2-16 </td> 23 <td> 68.8 </ td> 24 <td> spring festival, </td> 25 </tr> 26 </tbody> 27 </table>

Refresh the page

It looks good. You may notice that this table has a class <table class = "table-hover">,

Where is this class defined.

Open the _ layout file again. You can see that the bootstrap css is referenced in the Development environment.

    <environment include="Development">        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />        <link rel="stylesheet" href="~/css/site.css" />    </environment>

Therefore, you can put some "general" css and js references in the layout file to avoid repeated Writing of these references.

By the way, change the project names displayed in the header and footer, and open the Index and About pages respectively. The headers and Footer are all changed.

Such as the About page.

 

However, we did not reference this template on this Index page. How does it be referenced?

_ ViewStart Application

Looking back at the modified Index page, we didn't write code like Layout = "_ Layout" because it has been set by default in _ ViewStart.

_ ViewStart only has this sentence.

@{    Layout = "_Layout";}

If we add the following Layout = null statement to the Index page,

@ {Layout = null; ViewData ["Title"] = "Homepage ";}

Refresh the page again and it looks like this

The headers, Footer, and Table styles are all lost because they are all written in _ Layout, and the references to _ Layout are lost.

Summary:_ ViewStart sets the template page by default. Unless Layout = XXX is displayed, the settings in _ ViewStart are used.

Therefore, the effect of setting Layout = "_ Layout" is the same.

 

Loading Sequence of _ ViewStart, _ Layout, and Index (actual page)

The loading sequence is: _ ViewStart => Index => _ Layout.

1. _ ViewStart is loaded before all views are loaded. The default template page is set.

2. query Index. cshtml loading on the page specified by the Controller, and read the Layout settings of the page.

3. Find the corresponding template page to load according to the template page set by Layout on the Index page.

Change Layout = "_ Layout" in _ ViewStart to Layout = "_ Layout1". If you run the task again, the following error occurs: The template cannot be found.

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.cshtmlMicrosoft.AspNetCore.Mvc.Razor.RazorView.GetLayoutPage(ViewContext context, string executingFilePath, string layoutPath)

View Search rules:Search for the folder corresponding to the Controller (Home here). If not found, search for the Shared folder. If not found, an error is returned.