The original sample didn’t use Display Templates, but they are an extremely useful tool, and haven’t changed since MVC5. They help reduce lines of code and increase consistency in applications. In this video, I create a Display Template for a movie record, and then refactor the Index View to use the Movie Display Template.
- [Instructor] Whereas the MVC five sample did not use any display templates, we're going to add a display template for the movie view model because we will use it not only to clean up the index page, but also in the view component that we'll create in the next module. So just like MVC five, display templates go in a folder called display templates. And we'll add it here under shared. Add new folder.
Display templates. Then we're going to add a new view. Add new item. And we go under web. MVC view page. And we're going to call this movie view model. And clear out the code that is in there. Then let's add a model statement to the top. And that will be a movie view model.
And then we are literally going to cut and paste out of the index, each of the rows that gets created for a movie view model. We have to do a little bit of editing on this code. Because we were in a loop before. So now we say model model.title. I'm going to copy this and then use the magic of clipboard inheritance to bring it all down.
We need to change the route to model.ID in each of them. And save that display template. And in our index, we can now say @html.DisplayFor (modelItem) and we want to display the item. Now we have enough code to run this app.
Let's make sure that all the changes we made, we still have a list of movies. Okay, we have our updated menu. Let's click on movie list. We have a list of movies and and we can filter and we can search. And that completes our display template.
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