In a previous post, I showed how it is possible to render a cshtml template inside a Tag Helper and I mentioned that there is a better mechanism available in asp.net core which is Razor View Component.
The ViewComponent facility allows to render a ‘partial’ cshtml template inside another cshtml view.
In this post I am going to summarize the key points regarding the creation and usage of View Components.
As usual full code is in Github.
Using a View Component
View components are typically invoked by awaiting the result of the
It is possible to pass data to the view component via an anonymously typed object.
Starting from asp.net core 1.1 it is possible to use View Components with a tag helper like syntax:
Notice how the previous example feels more consistent with the html syntax. Also the ‘html tag’ needs to be prefixed with
vc: and don’t forget to import the tag helpers under
Creating a View Component
A view component is usually made of two elements: a C# class and a cshtml view.
View Component class
The C# class must be conform to one of these criteria to be considered a ViewComponent:
- Inherit from the
- Be slapped with the
- Inherit from a class that is slapped with the
- Its name is suffixed by ‘ViewComponent’
Inheriting from the
Microsoft.AspNetCore.Mvc.ViewComponent class is the most convenient approach IMHO since it makes available protected properties such as a ready to use
ViewData dictionary and methods such as
The class must then implement the
InvokeAsync (or its synchronous counterpart
Invoke), here is an example:
Invoke method takes two arguments that are going to be mapped to the properties of the anonymously typed object that is passed to
View Component cshtml view
The primary cshtml view that is going to be rendered by the ViewComponent class is usually placed under the
~/Views/Shared/Components/<ComponentName_WithoutViewComponentSuffix> folder and is named
Following the previous file placing conventions allows the
View method to fetch the view file without requiring from the developer to specify the template path.
View Components views are rendered in the same fashion as regular top level views in controller’s actions, it is possible to pass data to the view by using a model object (when the view is strongly typed) or by using the
ViewData dictionary or its expando object facade the
In fact the ViewComponent class can be considered a mini controller that renders a partial views.
The previous cshtml view accesses data available in the view model passed to it as well as data in the
Why View Components?
View components offer a way to render cshtml partial views by leveraging the power of razor and offers an alternative to the deprecated Html Helper facility.
Tag helpers on the other hand allows to build html content and to manipulate html existing content with an imperative approach that can be painful when building complex views.
Nonetheless, the Tag Helper facility offers the ability to create parent-child relationships between tag helpers which allows some nesting behavior:
The previous is currently not feasible with View Components and is going to be the subject of the next post.