View components and partial views are similar and can often be used for the same purposes.

They are both used to reduce duplicate code and allow for reusable components. Learn from a practical example of reusable components.

The difference lies in the dependency on the controllers. While partial views have a dependency on controllers, view components are entirely separate, with their structure made up of a class and a view. Therefore making them “POCO.

This makes it a lot more versatile, dynamic and testable.

What are View Components?

View components were introduced in ASP.NET MVC 6 back in 2018 and have been widely adopted since.

The C# class in the view component can be used to prepare data for the view. It might make more sense to imagine it as a “mini controller” based on the MVC pattern.

An example of when a view component would be more feasible than a partial view is if you are manipulating and returning data from an external API.

How to Create a View Component

As explained, a view component consists of a class and a view. These files must be contained within a “Components” folder, often best placed inside the ‘Views/Shared” folder.

Creating the Class

The class in the view component can be created by either:

1. Inheriting from “ViewComponent”
2. Adding a [ViewComponent] attribute
3. Suffixing the class name with “ViewComponent”

An example is as follows:

public class ExampleViewComponent : ViewComponent
{
    ...
}

Inside the view component class, there must also be a method named “Invoke” or “InvokeAsync”, depending on whether you want to call the method asynchronously or synchronously.

This method must return the view in the form of an “IViewComponentResult”.

public class ExampleViewComponent : ViewComponent
{
    public IViewComponentResult Invoke(parameters...)
    {
        ...
        return View("Example", parameters)
    }
}

The folder structure should look similar to this:

Calling the View Component

The view component can be called via either of the following

@await Component.InvokeAsync("ExampleViewComponent", parameters)

@Component.Invoke("ExampleViewComponent", parameters)

Creating the View

The view can be created as normal. Nothing special is needed here.

Using scripts with View Components

It must be noted that using scripts with view components can be difficult due to the “separation of concerns” and their exclusion of the layout page.

The “section scripts” tag will not inject the code into the layout.

The standard JavaScript script tags can still be used but other dependencies such as jQuery will not be rendered from a bundle or script files called from within the layout.

To solve this there are 3 main solutions:

1. Load an external JavaScript file with the defer attribute
2. Put the logic into the “parent” view that is calling the view component
3. Include the necessary files such as jQuery again

Conclusion

I hope you have enjoyed this blog post.

Hopefully, you will now understand:

• Which cases view components are better than partial views
• How to create a view component
• how to use scripts with a view component

You should now be able to implement view components in your own ASP.NET MVC application and understand how they can help you to keep your views more flexible and reusable.

Paste icon by Icons8