ViewComponent: Do I need both the view and the component?

I have a very simple view component. It is located in my ASP.NET Core project under /Views/Shared/Components/DisclosureCard. It currently consists of the files Default.cshtml and DisclosureCardViewComponent.cs, where the latter looks like this:

public class DisclosureCardViewComponent : ViewComponent
{
    public IViewComponentResult Invoke(DisclosureCardViewModel disclosureCardViewModel) =>
        View(disclosureCardViewModel);
}

This seems like an unnecessary "reelay" to me. Is there any way I can get rid of DisclosureCardViewComponent.cs and just use Default.cs? When I try to use @await Component.InvokeAsync("DisclosureCard", disclosureCardViewModel) without it I get the following exception:

> "System.InvalidOperationException: 'A view component named 'DisclosureCard' could not be found. A view component must be a public non-abstract class, not contain any generic parameters, and either be decorated with 'ViewComponentAttribute' or have a class name ending with the 'ViewComponent' suffix. A view component must not be decorated with 'NonViewComponentAttribute'.'"

I think a Partial View is a better fit for what you're after here, which is an encapsulated view with a model but no logic.

To use a partial view, create a _DisclosureCard.cshtml file in Views/Shared and then invoke like this:

@await Html.PartialAsync("_DisclosureCard", disclosureCardViewModel)

Alternatively, you can invoke the partial view using the tag-helper:

<partial name="_DisclosureCard" model="disclosureCardViewModel" />

> Is there any way I can get rid of DisclosureCardViewComponent.cs and
> just use Default.cs?

Certainly you can. In that scenario, you would require to change the invocation way at the same time and your component name inside components under shared folder also should be Defult and within it you should have default.cshtml file. Have look on the following screenshot:

ViewComponents Folder:

Note: Remember that, view component never directly handles a request we always need a class in between to invoke it from view.

Shared Folder:

> When I try to use @await Component.InvokeAsync("DisclosureCard",
> disclosureCardViewModel) without it I get the following exception:

The error you are getting is pretty obvious and expected. Because, as you are now calling your ViewComponent as following:

@await Component.InvokeAsync("DisclosureCard", disclosureCardViewModel)

After Renaming viewComponent:

Once you would rename your viewComponent from DisclosureCardViewComponent to just Default.cs so you have to call it as following:

 @await Component.InvokeAsync("Default", disclosureCardViewModel)

Note: You ought to matach your component.cs files name as it is. If your component name is different than you should use component Suffix to avaid ambiguity.

Output:

Note: If you would like to know more details on View components you could check our official document here