Join Jess Chadwick for an in-depth discussion in this video Executing code before every page, part of ASP.NET Core: Razor Pages.
- [Narrator] In addition to using sections and view data properties to enable pages to easily integrate with the layout, there is one more technique that's really helpful when applying layouts, or any other kind of shared code, to every page in your site. It comes in the form of two special files called ViewStart and ViewImports. Both of these files use the Razor syntax to execute code prior to your pages running, but they each work in slightly different ways.
Let's start with ViewStart. To create this page you can open the new item dialog on the pages folder, then go to the web category underneath the ASP.NET Core category, and look for the file template called MVC View Start Page. The MVC part of the name is a little misleading, but it's called that because the ViewStart functionality is actually a feature of the MVC framework that Razor Pages is built on top of. Regardless of the name, that's the one we want, so select it and then leave the file name, _ViewStart.cshtml, alone.
The ViewStart page only works if the file has this exact name. When you're ready, hit add to add the file. Now that this file exists, the logic contained in it will automatically be executed before every page, without having to do anything else. In other words, you can pretend that any code in this file is virtually copied and pasted at the top of every one of your pages in this folder and its subfolders. As shown here, in addition to needing to remember the special file name, the other benefit of using the file template to create the ViewStart page is that the default code the template generates is the code that you'll probably use this file for the most, setting the layout property to the name of the layout, in this case _Layout.
With this in place, we can now remove that line from all of our views. Now I can refresh to see the layout is still getting applied and everything works great. Now for the ViewImports file. Like the ViewStart page, the contents of this file will apply to all pages in the same folder and its subfolders. However, instead of defining code and logic like the ViewStart page, the ViewImports page contains only page-level directives.
Just like the ViewStart page, ViewImports is a feature offered by the MVC framework. Its file name is very important, so you're going to want to use its item template to create it. It lives right next to the ViewStart page template we just used. It's the one named MVC View Imports Page. Once you've selected it, be sure to leave the file name alone and just hit add to create the file.
Sadly, as of this recording, the only thing the item templates gives you is the correct file name. It leaves the file empty, so it's up to us to populate it. I'll start out simple and I'll just import the topsy turvy models name space that we've defined in all of our pages. Like setting the layout property in the ViewStart page, this using statement will now apply to all of our Razor Pages, so we don't have to add it manually to each one anymore.
Likewise, I can use the @namespace directive to define the namespace that all of the dynamically generated classes that Razor Pages generates for us will live in. This acts just like wrapping a class in a namespace. Now all of the Razor Pages that I create will share this same namespace. I can even move that add tag helper directive that I put into the index page into the ViewImports so that tag helpers are available to all the pages in my site by default.
As this example shows, the ViewStart and ViewImports pages are a really simple and effective way to define common code in one single place and have it affect every page in your application without those pages even knowing about it.
- Creating a new application
- Setting up pages
- Rendering dynamic content
- Reusing markup with layouts
- Increasing the maintainability of pages
- Processing data
- Validating input
- Securing an application