MVC template pages and layouts

Create a project Mvcmasterpagedemo. Add the home controller to generate the index view. In the Generate View box, we select the ASPX view engine, and then we see the option "Use Layout or master page" to point to a file with a suffix of master (which does not exist, so you cannot complete the view addition). Now we're going to create it ourselves.

Find the corresponding directory and add a master page

We named the content portion of the master page by the name under the View tab so that the page content is associated by default to the content portion of the master page in the resulting view.

Razor layout

Or the view is generated through index, but this time we choose the Razor view engine, continue to choose to use "Layout and master Page", as a hint, the layout page text box, you can leave blank. It refers to the layout of the _layout.cshtml page by default.

The page is already configured in the _viewstart.cshtml file, and all razor engine pages execute the Viewstart page before execution, and the layout keyword is the code used to point to the default page layout.

Default layout

We can see that the resulting view is much cleaner than the previous ASPX page. Add some text to _layout.cshtml in the view to complete the Razor layout page

customizing layout pages

We can also customize the desired layout page on the head of the view page and declare it with layout, which overrides the default layout page.

It is observed that what we write in the Child View page is where the layout page @renderbody defined. @RenderBody When you create a view based on this layout page, the contents of the view are merged with the layout page, and the contents of the newly created view are rendered between the labels through the @renderbody () method of the layout page.

In the layout page

@RenderSection Layout page also has the concept of section, which means that if a section is defined in a view template, it can be rendered separately. @RenderSection ("MySection")

In the View page

Of course, you also define the section in the view, otherwise an exception will occur: @section mysection{//do}

Note: To prevent exceptions due to a missing section, you can set the 2nd parameter to @rendersection () to Flase

* Compressor *

@Styles. Render ("~/content/css")

@Scripts. Render ("~/bundles/modernizr")

These two codes encapsulate the style sheet and script library through the compressor and are called on the page.

In MVC, Bundle objects can be used to compress JS and CSS (multiple files can be packaged into one file). and can distinguish between debugging and non-debugging, debugging without compression, in the original way to display, to facilitate the search for problems.

* In the project's App_start folder, there will be a BundleConfig.cs class file, from the class file of the static function Registerbundles we can see the function in the default contains a lot of code to use the bundles. The ADD function and the Include function.

One of the bundles. Add is adding bundle entries to the site's bundletable, where there are mainly Scriptbundle and stylebundle, which are used to compress scripts and style sheets, respectively.

Bundles. ADD (New Stylebundle ("virtual path"). Include ("Real path 1", "Real Path 2")

We can see the call to the function in the Application_Start function in the Global.asax file.

Create your own Transformers:

Create your own folder in the Themes folder under the project's Content folder, named Mycss, and in the new three stylesheet files are a.css, B.css, and C.css.

Then we come to the Registerbundles function in Bundleconfig, delete or comment out the default code, and write your own compression style sheet. Since the Global.asax itself has a compressor register, so we write the code after compiling can be used directly. (same as script compression)

I have compressed these three stylesheets into a nonexistent path, ~/bundle/mycss. Creates a new controller and view that references the style through @styles.render ("~/bundle/mycss") in the view.

Safety features of compressors

You can see that three style sheet references are all displayed on the page. One step further, the Bundle object does not perform compression during debugging, so we need to <compilation debug= "true" targetframework= "4.5.1"/> Debug in the Web. config configuration file Change to False to have the Web application run in a non-debugging environment.

Category: MVC 4.0 good text to top

MVC template pages and layouts