Render partials with ASP.net Core View Components

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 Component.InvokeAsync method.

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 ~/Views/_ViewImports.

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 Microsoft.AspNetCore.Mvc.ViewComponent
• Be slapped with the [ViewComponent] attribute
• Inherit from a class that is slapped with the [ViewComponent] attribute
• 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 View.

The class must then implement the InvokeAsync (or its synchronous counterpart Invoke), here is an example:

The Invoke method takes two arguments that are going to be mapped to the properties of the anonymously typed object that is passed to Component.InvokeAsync.

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 Default.cshtml.

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 ViewBag.

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 ViewData dictionary.

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.