Page number in asp.net core footer (partial view)

I am using jsreport with my Asp.Net Core MVC project. It is working all right except for page numbers.

I am using a partial view for footer.

Here is the partial view:

<table style="font-size: 10px; padding-bottom: 5px; padding-top: 0in; padding-left: 0.25in; padding-right: 0.25in;">
    <tbody>
        <tr>
            <td style="width: 1.5in; text-align: left;"><b>@($"{DateTime.Now}")</b></td>
            <td style="width: 8.2in; text-align: center;">Brand Name</td>
            <td style="width: 1.5in; text-align: right;">Page&nbsp;<span class="pageNumber"></span>&nbsp;of&nbsp;<span class="totalPages"></span></td>
        </tr>
    </tbody>
</table>

Unfortunately, the page number part is not working at all. I just see "Page of " in the rendered PDF.

I am using the Chrome-PDF recipe and do not wish to use pdf-utils for the footer.

Even if I put the following line in the main report body view, I still do not get any page numbers.

Page&nbsp;<span class="pageNumber"></span>&nbsp;of&nbsp;<span class="totalPages"></span>

Any help will be appreciated.

Solution

The header html needs to be passed to the Template.Chrome.HeaderTemplate property, you need to also enable header printing using Template.Chrome.DisplayHeaderFooter and also make a space for the header using margins.

Here is how the controller action can look like

[MiddlewareFilter(typeof(JsReportPipeline))]
public async Task<IActionResult> InvoiceWithHeader()
{
    var header = await JsReportMVCService.RenderViewToStringAsync(HttpContext, RouteData, "Header", new { });

    HttpContext.JsReportFeature()
        .Recipe(Recipe.ChromePdf)
        .Configure((r) => r.Template.Chrome = new Chrome {
            HeaderTemplate = header,
            DisplayHeaderFooter = true,
            MarginTop = "1cm",
            MarginLeft = "1cm",
            MarginBottom = "1cm",
            MarginRight = "1cm"
        });

    return View("Invoice", InvoiceModel.Example());
}

And how the Header view

<div style='text-align:center; font-size: 10px; width:100%'>Page number <span class="pageNumber"></span>&nbsp;of&nbsp;<span class="totalPages"></span></div>

You can find an example repository here
https://github.com/jsreport/jsreport-dotnet-example-webapp