ASP. NET MVC3: Layout in Razor

Address: http://weblogs.asp.net/scottgu/archive/2010/10/22/asp-net-mvc-3-layouts.aspx

 

ASP. net mvc 3 brings a new view engine named Razor, and also supports the existing. aspx view engine.

 

What is layout?

In typical cases, all pages of a website share a consistent view. ASP. NET 2.0 provides a technology called "master page" to help. aspx-based pages solve this problem. Razor uses a technology called "layout" to solve the same problem. In this way, you can define a public website template and inherit its view from the entire website.

Use layout in Razor

The page without layout is shown below:

The source code of the controller is as follows:

The source code in the Razor view is as follows:

The layout is not used yet, so programmers have to copy the same view on every page.

 

Refactoring with Layout

The Razor layout makes it easy. First, we add a public layout Template under the \ Views \ Shared folder. The default public view and template are saved in this folder.

The layout file is as follows:

Pay attention to the following points for this file:

1. The @ inherits command at the beginning of the file is no longer required. You can retain it if you want. For example, you want to use a custom base class. This makes the file easier to read.
2. We call @ RenderBody () to indicate the filled content.
3. In the head, we use "@ View. Title" to output the Title.

In the website, we maintain a unified view through layout.

Now, we use this layout to update the original view.

Note the following three questions:

1. You do not need to use tags to enclose the content. By default, Razor uses the entire content as part of the content. If multiple regions exist in the layout, you can still specify the region by naming the region. In this way, Razor makes 90% easier.
2. We set the attribute of View. Title through the Code. The Code in Index. cshtml will be executed before the layout. Therefore, we can set the value passed to the layout through programming. This technique is typically applied to headers, such as the settings in meta.
3. We set the Layout attribute to set the Layout used by Index. cshtml.

The result is as follows:

In the above Code, we set the Layout attribute to set the Layout used by Index. cshtml. This can work, but the code needs to be repeated on every page. The good news is that Razor allows us to explicitly set Layout in the view and define a unified logic for all views to complete this task.

You can delete the code for setting Layout.

Add a file named _ ViewStart. cshtml to the Views folder of the project.

_ ViewStart is used to define public view code. For example, it defines the same layout for all views.

The code will be executed before each view. Therefore, you no longer need to set the layout for each view.

Note: Because you can write programs in ViewStart, you can not simply set layout attributes. For example, different layout templates are used based on different user devices. In this way, the flexibility of views is greatly enhanced.

You can also set the layout in the filters of controllers and actions.

 

EXAMPLE After completion

The following page is displayed:

Controller content:

Content of the Index. cshtml View

Content of SiteLayout. cshtml Layout

The content of _ ViewStart. cshtml is as follows:

The generated HTML is as follows:

Advanced questions:

Can the layout be nested?

There are multiple discontinuous areas in the layout. Can I fill in the View File?

The answer to both questions is yes.