Hi @Abdullah Durrani ,
Based on your description, I create a sample to use View Components with Async and invoke the view component as a Tag Helper, everything works well. I suggest you could refer the following steps to create a view component and use it.
- Create a Asp.net Core 3.1 or 5.0 Razor page application (named RazorPageApp). You can also create an Asp.net Core MVC application.
- Add a ViewComponent class Create a ViewComponents folder and add the following PriorityListViewComponent class: If change the Invoke method to an async method, it also works well.
namespace RazorPageApp.ViewComponents { public class RestCountViewComponent : ViewComponent { private readonly IDataRepository _dataRepository; public RestCountViewComponent(IDataRepository dataRepository) { _dataRepository = dataRepository; } public IViewComponentResult Invoke() { string MyView = "Default"; var items = _dataRepository.GetPeople().ToList(); return View(MyView, items); } } }
- Create the view component Razor view
- Create the Views/Shared/Components folder. This folder must be named Components.
- Create the Views/Shared/Components/RestCount folder. This folder name must match the name of the view component class, or the name of the class minus the suffix (if we followed convention and used the ViewComponent suffix in the class name).
- Create a Views/Shared/Components/RestCount/Default.cshtml Razor view:
@model IEnumerable<RazorPageApp.Models.Person> <table class="table"> <thead> <tr> <th> @Html.DisplayNameFor(model => model.Id) </th> <th> @Html.DisplayNameFor(model => model.Name) </th> <th> @Html.DisplayNameFor(model => model.Age) </th> <th></th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Id) </td> <td> @Html.DisplayFor(modelItem => item.Name) </td> <td> @Html.DisplayFor(modelItem => item.Age) </td> <td> @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) | @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) | @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ }) </td> </tr> } </tbody> </table>
- Register the assembly containing the view component using the
@addTagHelper
directive. In the_ViewImports.cshtml
page:@using RazorPageApp @namespace RazorPageApp.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper *, RazorPageApp
- Invoking the view component as a Tag Helper In the _Layout.cshtml page:
<vc:rest-count></vc:rest-count>
The result as below:
More detail information about using View Component, see View components in ASP.NET Core.
Besides, with reference the above steps, if still can't use the view component with tag helper, I suggest you could create a simple sample to reproduce the problem and share it through the Github or Onedrive.
If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Dillion