System.Threading.Tasks.Task`1[Microsoft.AspNetCore.Html.IHtmlContent] in ViewComponent Section of View

Question

I am new to view component and don't understand why I am getting this error at all.

public class Last6ClosedJobsViewComponent :  ViewComponent
{
    private readonly Eva804Context ctx;

    public Last6ClosedJobsViewComponent(Eva804Context context)
    {
        ctx = context;
    }

    public IViewComponentResult Invoke(int id)
    {
        var jobs = from j in ctx.Job
                   .Include(j => j.Site)
                   .Include(j => j.WaterBody)
                   .Where(j => j.Site.SiteID == id && j.InvoiceDate != null)
                   .OrderByDescending(j => j.BookingDate)
                   .Take(6)
                   select j;

        return View(jobs);
    }

}

Then in the default view I am simply trying to show a list of booking dates, at this stage:

@model IEnumerable<Eva804.Models.Job>

<h3>Recently Invoiced Jobs</h3>
<ul>
@foreach (var j in Model)
{
    <li>@j.BookingDate</li>

}
</ul>

Then in site details I have the following:

<div class="alert alert-success">@Component.InvokeAsync("Last6ClosedJobs",Model.SiteID)</div>

All of which looks correct as far as I can see, compared to the examples I am working against.

This is then showing in the view a loverly green section, nice and wording as: System.Threading.Tasks.Task`1[Microsoft.AspNetCore.Html.IHtmlContent]

How do I find this error? Where should I look? Is there something wrong with my code I cant see?

Answer 1

You need @await to handle ansynchronous calls, like this:

<div class="alert alert-success">@await Component.InvokeAsync("Last6ClosedJobs",Model.SiteID)</div>

InvokeAsync returns a Task, then @await waits on the task and when the task is finished, it returns the result.