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

Question

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 <span class="pageNumber"></span> of <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 <span class="pageNumber"></span> of <span class="totalPages"></span>
Any help will be appreciated.

Answer 1

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> of <span class="totalPages"></span></div>
You can find an example repository here
https://github.com/jsreport/jsreport-dotnet-example-webapp