ASP. NET Core 2.0: four. _layout and _viewstart

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.