Override Invoke method in an inherited ViewComponent .net core 5.0

Question

I'm migrating from ASP.NET MVC to ASP.NET Core MVC.

I had a BasePodsWidgetController that looked like this:

public abstract class BasePodsWidgetController<TProperties, TConfiguration, TItem> : WidgetController<TProperties>
    where TProperties : BaseWidgetProperties, new()
    where TConfiguration : TreeNode, IItemsListingWidgetConfiguration, new()
    where TItem : TreeNode, new()
{
    protected readonly IComponentPropertiesRetriever _componentPropertiesRetriever;

    protected IContentRepository<TConfiguration> _contentRepository;
    protected IContentRepository<PodContainer> _parentRepository;
    protected IContentRepository<TItem> _childrenRepository;
    protected abstract string ViewPath { get; }
    protected virtual int Limit { get; set; } = 5;

    public BasePodsWidgetController(IContentRepository<TConfiguration> contentRepository, IContentRepository<PodContainer> parentRepository, IContentRepository<TItem> childrenRepository, 
        IComponentPropertiesRetriever componentPropertiesRetriever)
    {
        _contentRepository = contentRepository;
        _parentRepository = parentRepository;
        _childrenRepository = childrenRepository;
        _componentPropertiesRetriever = componentPropertiesRetriever;
    }

    public virtual PartialViewResult Index()
    {
        var properties = _componentPropertiesRetriever.Retrieve<TProperties>();

        ViewBag.MarginClass = WidgetStylingHelper.GetMarginClassFromWidgetProperties(properties.Margin);
        var widgetGuid = properties.WidgetConfiguration?.FirstOrDefault()?.NodeGuid;
        var widgetGuidValue = widgetGuid.HasValue ? widgetGuid.Value : Guid.Empty;

        var model = new PodsListing<TConfiguration, TItem>
        {
            Configuration = _contentRepository.GetByNodeGuid(widgetGuidValue),
            Items = new TItem[0]
        };

        if (null != model.Configuration)
        {
            var parent = _parentRepository.GetByNodeGuid(model.Configuration.ItemsParentNodeGUID);
            if (null != parent)
            {
                model.Items = _childrenRepository.GetChildrenByPath(parent.NodeAliasPath, Limit).ToArray();
            }
        }

        return PartialView(ViewPath, model);
    }
}

which then allowed me to inherit and override like so:

public class FeaturePodsWidgetController : BasePodsWidgetController<FeaturePodsWidgetProperties, FeaturePodsWidget, FeaturePod>
{
    protected override string ViewPath => "Widgets/_FeaturePods";

    public FeaturePodsWidgetController(IContentRepository<FeaturePodsWidget> contentRepository, IContentRepository<PodContainer> parentRepository, IContentRepository<FeaturePod> childrenRepository, IComponentPropertiesRetriever componentPropertiesRetriever)
        : base(contentRepository, parentRepository, childrenRepository, componentPropertiesRetriever)
    {
    }

    public override PartialViewResult Index()
    {
        var properties = _componentPropertiesRetriever.Retrieve<FeaturePodsWidgetProperties>();
        var widgetGuid = properties.WidgetConfiguration?.FirstOrDefault()?.NodeGuid;
        var widgetGuidValue = widgetGuid.HasValue ? widgetGuid.Value : Guid.Empty;

        ViewBag.MarginClass = WidgetStylingHelper.GetMarginClassFromWidgetProperties(properties.Margin);

        var model = new PodsListing<FeaturePodsWidget, FeaturePod>
        {
            Configuration = _contentRepository.GetByNodeGuid(widgetGuidValue),
            Items = new FeaturePod[0]
        };

        if (null != model.Configuration)
        {
            var parent = _parentRepository.GetByNodeGuid(model.Configuration.ItemsParentNodeGUID);
            if (null != parent)
            {
                model.Items = _childrenRepository.GetChildrenByPath(parent.NodeAliasPath, 4).ToArray();
            }
        }

        return PartialView(ViewPath, model);
    }
}

But converting to ViewComponents in ASP.NET Core, I get an error saying only one Invoke method is allowed and can't figure out why

BasePodsWidgetViewComponent

[ViewComponent()]
public abstract class BasePodsWidgetViewComponent<TProperties, TConfiguration, TItem> : ViewComponent
    where TProperties : BaseWidgetProperties, new()
    where TConfiguration : TreeNode, IItemsListingWidgetConfiguration, new()
    where TItem : TreeNode, new()
{
    protected readonly IComponentPropertiesRetriever _componentPropertiesRetriever;

    protected IContentRepository<TConfiguration> _contentRepository;
    protected IContentRepository<PodContainer> _parentRepository;
    protected IContentRepository<TItem> _childrenRepository;
    protected abstract string ViewPath { get; }
    protected virtual int Limit { get; set; } = 5;

    public BasePodsWidgetViewComponent(IContentRepository<TConfiguration> contentRepository, IContentRepository<PodContainer> parentRepository, IContentRepository<TItem> childrenRepository,
        IComponentPropertiesRetriever componentPropertiesRetriever)
    {
        _contentRepository = contentRepository;
        _parentRepository = parentRepository;
        _childrenRepository = childrenRepository;
        _componentPropertiesRetriever = componentPropertiesRetriever;
    }

    public virtual IViewComponentResult Invoke()
    {
        var properties = _componentPropertiesRetriever.Retrieve<TProperties>();

        ViewBag.MarginClass = WidgetStylingHelper.GetMarginClassFromWidgetProperties(properties.Margin);
        var widgetGuid = properties.WidgetConfiguration?.FirstOrDefault()?.NodeGuid;
        var widgetGuidValue = widgetGuid.HasValue ? widgetGuid.Value : Guid.Empty;

        var model = new PodsListing<TConfiguration, TItem>
        {
            Configuration = _contentRepository.GetByNodeGuid(widgetGuidValue),
            Items = new TItem[0]
        };

        if (null != model.Configuration)
        {
            var parent = _parentRepository.GetByNodeGuid(model.Configuration.ItemsParentNodeGUID);
            if (null != parent)
            {
                model.Items = _childrenRepository.GetChildrenByPath(parent.NodeAliasPath, Limit).ToArray();
            }
        }

        return View(ViewPath, model);
    }
}

Converted FeaturePodsWidgetViewComponent

public class FeaturePodsWidgetViewComponent : BasePodsWidgetViewComponent<FeaturePodsWidgetProperties, FeaturePodsWidget, FeaturePod>
{
    public const string IDENTIFIER = "FeaturePodsWidget";
    protected override string ViewPath => "_FeaturePodsWidget";

    public FeaturePodsWidgetViewComponent(IContentRepository<FeaturePodsWidget> contentRepository, IContentRepository<PodContainer> parentRepository, IContentRepository<FeaturePod> childrenRepository, IComponentPropertiesRetriever componentPropertiesRetriever)
        : base(contentRepository, parentRepository, childrenRepository, componentPropertiesRetriever)
    {
    }

    public override IViewComponentResult Invoke()
    {
        var properties = _componentPropertiesRetriever.Retrieve<FeaturePodsWidgetProperties>();
        var widgetGuid = properties.WidgetConfiguration?.FirstOrDefault()?.NodeGuid;
        var widgetGuidValue = widgetGuid.HasValue ? widgetGuid.Value : Guid.Empty;

        ViewBag.MarginClass = WidgetStylingHelper.GetMarginClassFromWidgetProperties(properties.Margin);

        var model = new PodsListing<FeaturePodsWidget, FeaturePod>
        {
            Configuration = _contentRepository.GetByNodeGuid(widgetGuidValue),
            Items = new FeaturePod[0]
        };

        if (null != model.Configuration)
        {
            var parent = _parentRepository.GetByNodeGuid(model.Configuration.ItemsParentNodeGUID);
            if (null != parent)
            {
                model.Items = _childrenRepository.GetChildrenByPath(parent.NodeAliasPath, 4).ToArray();
            }
        }

        return View(ViewPath, model);
    }
}

I get this error:

View component 'I3.Base.Web.ViewComponents.Widgets.FeaturePodsWidgetViewComponent' must have exactly one public method named 'Invoke' or 'InvokeAsync'

and I can't figure out why :(

Answer 1

The .NET 5 documentation states Like controllers, view components must be public, non-nested, and non-abstract classes. so I don't think you can override the Invoke method directly.

I just tried a basic example on the Dancing Goat sample website, and if you use a separate virtual method on the abstract ViewComponent you can call it directly in the Invoke method:

namespace DancingGoat.Components.ViewComponents
{
    public abstract class BasePodsWidgetViewComponent : ViewComponent
    {
        protected readonly IComponentPropertiesRetriever _componentPropertiesRetriever;

        public BasePodsWidgetViewComponent(IComponentPropertiesRetriever componentPropertiesRetriever)
        {
            _componentPropertiesRetriever = componentPropertiesRetriever;
        }

        public virtual IViewComponentResult Example()
        {
            // default logic

            return View("~/Components/ViewComponents/CompanyAddress/TEST.cshtml");
        }

        public IViewComponentResult Invoke()
        {
            return Example();
        }
    }
}

Then on your FeaturePodsWidgetViewComponent you can then override the virtual method:

namespace DancingGoat.Components.ViewComponents
{
    public class FeaturePodsWidgetViewComponent : BasePodsWidgetViewComponent
    {
        public FeaturePodsWidgetViewComponent(IComponentPropertiesRetriever componentPropertiesRetriever) : base(componentPropertiesRetriever)
        {
        }

        public override IViewComponentResult Example()
        {
            // custom logic 

            return View("~/Components/ViewComponents/CompanyAddress/TEST2.cshtml");
        }
    }
}