Using View Components in Umbraco

    In the previous versions of MVC, we used Child Actions to build reusable components/widgets consisting of both Razor markup and backend logic. The backend logic was implemented as a controller action and marked with a [ChildActionOnly] attribute. Child Actions are no longer supported in ASP.NET Core MVC. Instead, we will use the View Component feature.

    View Component Overview

    View components replace the traditional Controller (SurfaceController)/Partial View relationship and instead offers a modular approach of separating your views in to several smaller units. View Components are self-contained objects that consistently render HTML from a Razor view.

    View components are:

    • Generated from a C# class
    • Derived from the base class ViewComponent and
    • Associated with a Razor file (*.cshtml) to generate markup.

    View components are similar to partial views but it is much more powerful compared to the partial view. View components do not use model binding but it works only with the data provided when calling it.

    View Components can be implemented in any part of the web application where there are some possibilities to duplicate code like Header, Navigation Pane, Login Panel, Menu, Shopping Cart, Footer, Nested Content, BlockList Items and so on. View Components behave like a web part containing both business logic and UI design to create a package which can be reused in multiple parts of the web application.

    A view component consists of two parts:

    • The View Component class derived from the ViewComponent class:

      [ViewComponent(Name = "Employee")]
      public class EmployeeViewComponent : ViewComponent
      {}
      
    • Returns a Task object as IViewComponentResult:

      public IViewComponentResult Invoke()
      {
          return Content("Hi I'm an Employee Component");
      }
      

    Create a class for a ViewComponent

    In this example, let's create a ViewComponent for a Product List and render it on the HomePage of the website.

    Create a folder named ProductView. In this folder, create a new class named ProductViewComponent.cs as below:

    using System.Collections.Generic;
    using Microsoft.AspNetCore.Mvc;
    
    namespace ViewComponentSample.ViewComponents
    {
        [ViewComponent(Name = "ProductView")]
        public class ProductViewComponent : ViewComponent
        {
            public IViewComponentResult Invoke()
            {
                List<string> products = new List<string>() {
                    "Product 1", "Product 2", "Product 3", "Product 4", "Product 5"
                };
                return View(products);
            }
    
        }
    
    }
    

    Create a View for ViewComponent

    In Views folder, create new folders at Views\Shared\Components\ProductView. In the ProductView folder, create a new file named Default.cshtml as below:

    <h1> Welcome to your Home Page <h1>
    <h2>Products List</h2>
    <ul>
        @foreach (var product in Model)
        {
            <li>@product</li>
        }
    </ul>
    

    Invoking a View Component

    You can invoke a ViewComponent from anywhere (even from within a Controller or another ViewComponent). Since this is our Product List, we want it rendered on the Home page - so we’ll invoke it from our HomePage.cshtml file using:

     @(await Component.InvokeAsync("ProductView"))
    

    You can read about different ways of invoking your view component in the View components in ASP.NET Core section of the Microsoft Documentation.view=aspnetcore-5.0)

    View Component Locations

    By default, the framework searches for the Component View path in the following areas:

    • /Views/{Controller Name Folder}/Components/{View Component Name Folder}/{View Name}
    • /Views/Shared/Components/{View Component Name Folder}/{View Name}