ASP.NET Core MVC layout from entry to master

With the development of technology, ASP.NET Core MVC has been launched for a long time. After continuous version updates and iterations, it has become more and more perfect. This series of articles mainly explains the process involved in developing B/S systems with ASP.NET Core MVC. The relevant content is suitable for beginners, school graduates, or other people who want to engage in ASP.NET Core MVC system development. After the explanations in the previous articles, we have a preliminary understanding of ASP.NET Core MVC project creation, startup and naming conventions, creating controllers, views, models, receiving parameters, passing data, routing, etc. Today we will continue to explain ASP.NET Core MVC layout and other related content are for learning and sharing only.

With the development of technology, ASP.NET Core MVC has been launched for a long time. After continuous version updates and iterations, it has become more and more perfect. This series of articles mainly explains the process of developing B/S system with ASP.NET Core MVC. The relevant content involved is suitable for beginners, school graduates, or other people who want to engage in ASP.NET Core MVC system development. After the explanations in the previous articles, we have a preliminary understanding of ASP.NET Core MVC project creation, startup and naming conventions, creating controllers, views, models, receiving parameters, passing data, routing, etc. Today we will continue to explain ASP.NET Core MVC Layout and other related content are for learning and sharing only.

What is layout?

Most web applications have a common layout that provides users with a consistent experience when switching between pages. . This layout typically includes common user interface elements such as the app header, navigation or menu elements, and footer. In the following layout, the Content content changes with different requests, while other page content rarely changes, thus forming a unified style and consistent user experience. This is the benefit of the layout.

Advantages of layout

In ASP.NET Core MVC projects, using layout has the following advantages:

1. Layout allows the page to maintain a consistent user experience from request to request.
2. Layout reduces duplicate code in views.

Layout classification

By convention, the default layout is named _Layout.cshtml. The layout file for a new ASP.NET Core project created using the template is:

• Page-based layout file, Razor page: Pages/Shared/_Layout.cshtml
• Layout file based on view controller, controller with view: Views/Shared/_Layout.cshtml

Default layout

In ASP.NET Core MVC projects created through templates, the layout view [Views/Shared/_Layout.cshtml] will be generated by default. The layout view mainly consists of three parts:

1. Introduce public JavaScript scripts, CSS styles and other resource files
2. Define public header, footer, left navigation and other user page elements
3. Define the Content area and provide Content placeholders through @RenderBody().

A sample layout view looks like this:

By default, each layout must call RenderBody. Wherever RenderBody is called, the view’s contents are rendered.

Specify layout

The view has a Layout property that allows you to specify different layout views. The layout can be specified using a full path (e.g. /Views/Shared/_Layout.cshtml, /Pages/Shared/_Layout.cshtml) or a partial name (e.g. >_Layout).

By default [_ViewStart.cshtml] specifies the default layout view, and the page content is as follows:

Import sharing instructions

Views and Pages�You can use Razor directives to import namespaces and use dependency injection. Directives shared by many views can be specified in a common _ViewImports.cshtml file. The _ViewImports file supports the following commands:

• @addTagHelper
• @removeTagHelper
• @tagHelperPrefix
• @using
• @model
• @inherits
• @inject
• @namespace

Note: This file does not support other Razor features such as function and section definitions.

By default, the content of the [_ViewImports.cshtml] page is as follows:

_ViewStart.cshtml, _ViewImports.cshtml are usually placed in the Pages (or Views) folder. As shown below:

Note: The _ViewImports.cshtml file can be placed in any folder, in this case, The file will only be applied to pages or views in this folder and its subfolders. Process the _ViewImports file starting at the root level and then process each folder before the location of the page or view itself. _ViewImports settings specified at the root level can be overridden at the folder level.

If multiple _ViewImports.cshtml files are found in the file hierarchy, the combined behavior of the directives is as follows:

• @addTagHelper@removeTagHelper: Run all in order
• @tagHelperPrefix: The file closest to the view replaces any other files
• @model: The file closest to the view replaces any other files
• @inherits: The file closest to the view replaces any other files
• @using: include all; duplicates ignored
• @inject: For each property, the property closest to the view replaces any other property with the same property name

Cancel layout

For programs created through the default template, the layout file is applied by default, and the effect is as follows:

Note: The content content also applies public css styles and javascript scripts and other resources in the layout file.

In a view, the layout can be canceled or replaced by specifying the Layout property, as shown below:

1 @{
 2  ViewData["  Title"] = "Home Page";
 3  Layout = null  ;
 4 }
 5
 6 <div class="text-center">
 7 <h1 class="display-4">Welcome  </h1>
 8 <p>Learn about <a href="https://docs.microsoft.com  /aspnet/core">building Web apps with ASP.NET Corea>.</p>
 9 </div>

Cancel the layout effect, as shown below:

Through comparison, we found that after canceling the layout, the original centering effect also disappeared. It means that the support for css styles in the original layout file is lost.

The above is the entire content of the layout of ASP.NET Core MVC from entry to proficiency. It is intended to inspire others, learn together, and make progress together.

Author: Xiaoliu Gongzi

Source: http://www.cnblogs.com/hsiang/

The copyright of this article belongs to the author and the blog park. It is not easy to write an article. Originality is supported. Reprinting is welcome [like it]. Please keep this statement when reprinting, and provide a link to the original text in an obvious position on the article page. Thank you.

Follow personal public accounts and regularly update technology and workplace articles

: rgba(0, 0, 255, 1)”>>
9 </div>

Cancel the layout effect, as shown below:

Through comparison, we found that after canceling the layout, the original centering effect also disappeared. It means that the support for css styles in the original layout file is lost.

The above is the entire content of the layout of ASP.NET Core MVC from entry to proficiency. It is intended to inspire others, learn together, and make progress together.

Author: Xiaoliu Gongzi

Source: http://www.cnblogs.com/hsiang/

The copyright of this article belongs to the author and the blog park. It is not easy to write an article. Originality is supported. Reprinting is welcome [like it]. Please keep this statement when reprinting, and provide a link to the original text in an obvious position on the article page. Thank you.

Follow personal public accounts and regularly update technology and workplace articles