The default _Layout.cshtml page in Core MVC is significantly different that previous versions of MVC. Learn about the new features, including the environment, anchor, and script tag helpers.
- [Instructor] The first view that we will migrate is the layout view. Now, this is a little different than what was created, because what I've done is I've copied in the MVC 5 style links and bundles to show you the difference between the Core MVC 6 way of doing things and MVC 5. So here on lines eight and nine, you see the old style of rendering the CSS and different bundles.
So I'm going to go ahead and delete those to get them out of our way. I want to show you the Core MVC 6 way of doing things. It takes advantage of a very special tag helper called Environment. So here on line eight, we use the Environment Tag Helper, which is actually just a tag, and we're looking for the name for the Environment of Development, and this is the same different Environment settings that we saw in the startup and the server side code.
If we are in development, then it will pull in the bootstrap and site.css files from the appropriate directories. On line 12, if the environment is staging or production, it actually will go out to the CDN for bootstrap, as well as the minified version of our local site.css. Now, this code here on line 18 is for application insights, and we're not going to cover that in this class, but again, that's a way of monitoring your website.
Let's scroll down some, and we see some additional tag helpers. So on line 30, we had the MVC 5 style of building an action link. The text was MVC Movie, going to the index action of the movie's controller, and then you see here at the end, the... We'll just call it interesting way of adding in attributes.
This very clearly shows one of the main advantages of using tag helpers. The Core MVC 6 way of doing things is shown here on line 31, and you see that it's just an anchor tag with some special attributes added in. Asp-area allows you to define an area. Asp-controller says which controller it should go to. Action, the index. And we just have the class as a regular attribute, and the text afterwards.
What we're going to do is, we're just going to format it a little better. Core MVC Movie App. And we'll go ahead and delete line 30. Now, we get into the main menu, and we see, once again, the HTML action links for the Home, About, and Contact pages. Going to go ahead and delete those, because they are handled here with the following tag helpers. One thing I will add in is another menu item, and we don't need the area, but this controller will be the movies controller.
The action will be index, and we'll just call this the Movie List. You see, it's a very natural way of editing HTML. Let's scroll down. We've got the typical RenderBody that we would expect, and then here, we are rendering the jquery and bootstrap bundles the MVC 5 way on line 49 and 50. So we'll delete those, and we see once again, we're taking advantage of the Environment Tag Helper, where if we're in development, we go ahead and load jquery, bootstrap, and site.js, which are all the full, non-minified versions of our files.
So, those are the items you'll want to add into your layout if you don't go with the default layout file that was created by the file new project template. The next Core view to update is the validation scripts partial. Now, this was used by MVC 5, as well, and what we want to do with the Core MVC version is to add in our own validation scripts. So, if we're in development, we want to follow the same pattern, where we use our non-minified, non-bundled versions, and if we are in staging or production, we want to use our minified versions.
And I just copied those in to save you the time of watching me type. And that completes migrating the layout and the validation scripts partial views.
Phil Japikse begins by showing how to install and update the .NET Core SDK. He reviews the functionality of the MVC 5 app, explains how to create necessary projects, and discusses migrating static content. Next, he demonstrates how to create a data access layer, complete the server-side migration, set up the HTTP pipeline, add custom items into the dependency injection container, leverage the new project configuration system, and migrate the controllers. Phil then introduces Tag Helpers—one the big new features in ASP.NET Core—and uses them to migrate and simplify the views. Phil also demonstrates how to create and use custom Tag Helpers. To wrap up, he covers working with view components, explaining what they are and why they're helpful. He walks through how to create the server-side view component code, and how to refactor your app and invoke the view component.
- Reviewing the MVC 5 application
- Creating the data access layer
- Adding and updating the models
- Updating the database
- Completing the server-side migration
- Configuring the HTTP pipeline
- Configuring and using dependency injection
- Migrating the views
- Creating view components