In this chapter we create a new project and familiarize yourself with the _layout and _viewstart and the order in which they are loaded.
Create a new project
First, file--Create a new solution
Select the ASP. Net Core Web app (MVC) below the app
Next
Set the name of the solution (and a bit like Xcode's interface style), enter Fl.weightmanager, do a daily weight-recording application
Click Create.
The project has been newly built, and the document structure of the project has already been mentioned in the previous chapter.
Application of _layout
The new project works by default.
The main page is divided into three parts, above the header, the following footer, click on the menu above the total home, about and contact to switch the page to see a bit
These two parts are constant, only the middle part is changing.
Open the _layout.cshtml page under the shared folder and look at the header and the footer are all defined here,
The middle part of the change is @RenderBody (). that's where we're always going to change.
Now change the home page, open the Home folder index file, the inside of a lot of code to change to the following code
1 @{2viewdata["Title"] ="Home Page";3 }4<tableclass="Table Table-hover">5<thead>6<tr>7<th> Serial Number </th>8<th> dates </th>9<th> Weight </th>Ten<th> Notes </th> One</tr> A</thead> -<tbody> -<tr> the<td>1</td> -<td>2018- Geneva- the</td> -<td>66.6</td> -<td> New Year's Eve, Fat </td> +</tr> -<tr> +<td>2</td> A<td>2018- Geneva- -</td> at<td>68.8</td> -<td> Spring Festival, also heavy </td> -</tr> -</tbody> -</table>
Refresh the page
It looks good, and you might notice that this table has a class <table class="table Table-hover"> ,
Where is this class defined?
Open the _layout file again and you can see the CSS referenced in the development environment bootstrap
<environment include="development"> <link rel="stylesheet " href="~/lib/bootstrap/dist/css/bootstrap.css "/> <link rel="stylesheet" href="~/css/site.css" /> </environment>
So you can put some "generic" css and JS references in the layout file, avoid repeating these references.
By the way, change the name of the project displayed in the header and footer, then open index and about these pages separately, and the header and the footer are all unified.
such as the About page.
However, we do not have a reference to this template in this index page, what is the way to refer to it?
Application of _viewstart
Recalling the revised index page, we did not write the Layout = "_layout" code, this is because the _viewstart has been set by default
There's only one sentence in _viewstart.
@{ "_layout";}
If we add a sentence to the index page layout=null as follows,
@{ Layout=null; viewdata["Title"" home ";}
Refresh the page again and look like this
The Headers and footer and table styles were all gone because they were written in _layout, and now they lost their references to _layout.
Summary: _viewstart to the template page default settings, unless the display layout=xxx, otherwise the settings in _viewstart will be used.
So the effect of not setting and setting Layout = "_layout" is the same.
Load order of _viewstart, _layout, and Index (actual page)
The load order is: _viewstart =>index=>_layout.
1._viewstart is loaded before all view loads, and the default template page is set.
2. The page that is specified by the controller is then looked up index.cshtml loaded and read the layout settings of the page.
3. Find the corresponding template page load based on the template page of the layout setting of the index page.
Change layout = "_layout" in _viewstart to layout = "_layout1" , run again, the page will appear below the error that the template could not be found.
while '_layout1' could is located. The following locations were searched:/views/home/_layout1.cshtml/views/shared/string string layoutpath)
View Search rule: first find the controller corresponding folder (here is home), if not found to the shared folder to find, if eventually not found prompt error.
ASP. NET Core 2.0: four. _layout and _viewstart