Create the partial view for the view component.
- [Narrator] Now that we have our view component and partial view in place, we can refactor some of the existing site to remove duplicate code. In the movies controller index method, I no longer need the call to get movies here, and I don't need to have the movies in the view model. So I'll just comment those lines out, so you have them when you download the finished code. In the index view, we can remove all of the code starting with the table and, again, I'll just comment it out, and now we are ready to invoke the view component.
There's two ways to do it. In Core MVC 1.0 and beyond, we can call a wait, and that's Component.InvokeAsync and that is a Movies view component, and we pass in an anonymous object with the parameters that we need, so we want the searchString = Model.SearchString and moviegenre= Model.MovieGenre.
And Visual Studio was correcting me. I didn't need the @ signs in there. You'll notice that the casing doesn't match between the anonymous object and the C# method, which is magically okay. It knows how to resolve the lowercase moviegenre to the camel cased MovieGenre in the view component. Okay, let's run the application and make sure that we still get our list of movies.
And we have our site. Click movie list and if all went as expected, we have a movie list, which we do. We want to search and we see that it's honoring the search screen, as well. One of the items added to Core MVC and .NET Core for 1.1 is the ability to invoke a view component as a tag helper. To do so, you must register the view component as a tag helper in the view imports, which we've already done when we registered our custom tag helper.
So here on line 5, addTagHelper, grab everything that's a taghelper, and with 1.1, that includes view components from the assembly Core MVC movie. So the way we invoke it as a tag helper is we use the vc for view component tag, the name of our view component minus the view component word and then we have our parameters are lower kabob cased.
And again, that's everything's lower case, with a dash in between each word as if it's a shish kebab. Now we do need the @ sign to invoke Razor to get the MovieGenre property and search string = Model.SearchString and that's it. So let's comment out line 16 and refresh it.
I still have it running. One of the nice things about working with MVC is you can update and index while the application is running and not have to restart the entire application. You can just reload the page. And we click on our movie list, and we have a movie list. We can filter it. Let's make sure we can search. We can; let's clear the filter.
And that completes our section on view components.
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