This tutorial appeared on my personal blog. https://mydev-journey.blogspot.com/2019/12/pivottablejs-in-net-core-razor-pages.html
I already implemented some of the functionality in one of my projects, but I have to admit that it was a little bit hard, that's why I want to help by showing this example.
Prerequisites for this tutorial:
- basic .Net Core Razor pages knowledge (recommended reading list: https://mydev-journey.blogspot.com/2019/11/razor-pages-not-for-shaving.html
- study briefly the documentation of pivottable.js, take the simple one: https://pivottable.js.org/examples/simple_ui.html;
- clone the official repo https://github.com/nicolaskruchten/pivottable
- my previous tutorial on ChartJS, has a very similar approach and result, and might be a learning step towards this more advanced tutorial: https://mydev-journey.blogspot.com/2019/12/chartjs-tutorial-with-aspnet-core-22.html
- Repo on Github for this project, to try it: https://github.com/zoltanhalasz/PivotTableJS
Steps to follow if you want to do it yourself:
A. Create .Net Core Web App (default, razor pages)
B. download pivot table repository from point 4.
Then take the pivot.js and pivot.css files and copy them under the newly created pivot folder in wwwroot.
C. take my _LayoutPivot file and use it instead of the default generated _Layout file from Shared. My _LayoutPivot file will contain all proper references to jquery and pivot.js. Then include it in the _ViewStart file, like : Layout = "_LayoutPivot";
D. Create InvoiceModel Class, with Json Properties Annotation, this is the main entity for the listing.
E. Create InvoiceService Class which will be injected in the constructor of Index page class. (and set up in Startup.cs).
F. The index cshtml page will just iterate through the list of invoices retrieved by the service and display them.
The backend part in PageModel class will be comprised of:
- the OnGet function - prepare the data to display
G. The scripts in the index.cshtml page: below the list of invoices you can find: