ASP.NET Core 2.0 MVC View Components

Problem

How to reuse parts of web pages using view components in ASP.NET Core MVC.

Solution

In an empty project update Startup class to add services and middleware for MVC:

Add a model to display in the view:

Add a controller with action method returning ViewResult:

Add parent view Index.cshtml:

Add view component’s model:

Add view component’s class:

Add view component’s view  Default.cshtml:

Discussion

View Components are special type of views that are rendered inside other views. They are useful for reusing parts of a view or splitting a large view into smaller components.

Unlike Partial Views, View Components do not rely on Controllers. They have their own class to implement the logic to build component’s model and razor view page to display HTML/CSS.

I like to think of them as mini-controllers, although this is not strictly correct but helps conceptualise their usage. Unlike controllers, they do not handle HTTP requests or have controller lifecycle, which means they can’t rely on filters or model binding.

View Components can utilise dependency injection, which makes them powerful and testable.

Creating

There are few ways to create View Components, I’ll discuss the most commonly used (and best in my view) option.

  1. Create a class (anywhere in your project) and inherit from ViewComponent abstract class.
    • Name of the class, by convention, ends with ViewComponent.
  2. Create a method called InvokedAsync() that returns Task<IViewComponentResult>.
    • This method can take any number of parameters, which will be passed when invoking the component (see Invoking section below).
  3. Create model e.g. via database etc.
  4. Call IViewComponentResult by calling the View() method of base ViewComponent. You could pass your model to this method.
    • Optionally you could specify the name of razor page (see Discovery section below).

The base ViewComponent class gives access to useful details (via properties) like HttpContext, RouteData, IUrlHelper, IPrincipal and ViewData.

Invoking

View Components can be invoked by either:

  1. Calling @await Component.InvokeAsync(component, parameters) from the razor view.
  2. Returning ViewComponent(component, parameters) from a controller.

Here “component” is a string value refereeing to the component class.

InvokeAsync() method can take any number of parameters and is passed using anonymous object when invoking the View Component.

Below is an example of second option above, notice that the second action  method doesn’t work because the razor page for the component is not under controller’s views folder:

view components sln

Discovery

MVC will search for the razor page for View Component in the following sequence:

  1. Views/[controller]/Components/[component]/[view].cshtml
  2. Views/Shared/Components/[component]/[view].cshtml

Here matches either:

  1. Name of the component class, minus the ViewComponent suffix if used.
  2. Value specified in [ViewComponent] attribute applied to component class.

Also [view]  by default is Default.cshtml, however can be overwritten by returning a different name from the component class. Below the component returns a view named Info.cshtml:

jQuery

You could access View Components via jQuery as well. To do so enable the use of Static Files in Startup:

Add jQuery script file to wwwroot and use it in a page:

Source Code

GitHub: https://github.com/TahirNaushad/Fiver.Mvc.ViewComponents

One comment

  1. Youre a star Tahir,

    There are very limited number of detailed tuturials for Core 2.0 but I can see you have created an amazing collection here. I’m so happy I’ve found your website. Going to learn a lot from you now 🙂

Leave a Reply