ViewComponents not rendering using TagHelper

Question

I am using Razor Project and have ViewComponent as:

public class RestCountViewComponent : ViewComponent
    {
        // some code
        public IViewComponentResult Invoke()
        {
            // some code
        }

and have added this line in _ViewImports.cshtml and also in View

@addTagHelper *, projectname

then invoke it in _Layout.cshtml as:

<vc:rest-count></vc:rest-count>

and it doesn't do anything. I check at the Page source and it shows as <vc:rest-count></vc:rest-count> and nothing renders.

I can get it done when I use

async Task<IViewComponentResult> InvokeAsync()
            {
                // some code
            }

and invoke it using

@await Component.InvokeAsync("RestCount")

why does it work when I use async and doesn't work when I use it as tagHelper??

Answer 1

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.

1. 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.
2. 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);  
           }  
       }  
   }  
   

3. 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>  
     

4. 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  
   

5. 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

Answer 2

Don't know if this is the same case as I was having, but if the view component has mandatory arguments and they are not supplied in the vc-tag then the vc.tag will not be bold and render as is instead of rendering the view component.