PivotTable.js in .Net Core Razor Pages - Tutorial (With Some More Javascript)

Being a former accountant, and my current projects also serving business processes, I find that Pivot Tables are a must in any application of this kind. I struggled without them but now I found a solution, using an Open Source Javascript Library.

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:
1. intermediate javascript;
2. basic .Net Core Razor pages knowledge (recommended reading list: https://mydev-journey.blogspot.com/2019/11/razor-pages-not-for-shaving.html
3. study briefly the documentation of pivottable.js, take the simple one: https://pivottable.js.org/examples/simple_ui.html;
4. clone the official repo https://github.com/nicolaskruchten/pivottable
5. 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
6. 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:
1. the OnGet function - prepare the data to display
2. the other function - OnGetInvoicePivotData - will pass the JSON array to the javascript fetch in the page.


G. The scripts in the index.cshtml page: below the list of invoices you can find:
1. the pivot - javascript code - retrieving the list using fetch and then giving it to pivotUI function, as per documentation mentioned above.
2. an export to excel (code from stack overflow- how to export an html table to excel from javascript), tailored to export our pivot table.


H. Final result should display as below, showing the list and the pivot table also, together with the Export button:

ChartJS Tutorial With ASP.NET Core 2.2 Razor Pages

In my first project realized in .NET Core Razor pages, I began experimenting with Chart JS, which is a Javascript library for generating charts.
That's how I ended up writing this tutorial, which needs the following prerequisites:
1. beginner level .Net Core Razor pages
2. intermediate Javascript
3. download https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.bundle.min.js and place it into wwwroot folder, js subfolder
4. you can download source code: https://github.com/zoltanhalasz/ChartJSTutorial
5. I suggest you check the tutorials for Razor pages before. See resources:
https://mydev-journey.blogspot.com/2019/11/razor-pages-not-for-shaving.html

The application is live under: https://chartjstutorial.zoltanhalasz.net/


Steps for the application:

A. Create a new Web Application (.Net Core 2.2, Razor Pages Type)
This is the default type web application, and we will use this due to its simplicity. There will be only one page, Index, which is by created default.
B. Create the class of InvoiceModel
This is the main model, the entity for list of invoices. The second class there will be used to provide data to the Chart, is see point E below.
C. Create Service that loads data in Invoice Model
We will not spend time to use a database, but instead, load manually some data into the list.
Then, insert the service into Startup.cs
D. Index page - lists all invoices from above list
Index page - draws the chart using Javascript
If you check the code above, you can see the canvas with the chart. Then there is the Javascript code, that uses the Chart.js mechanism.
E. Code behind, backend for Index page:

OnGet method - loads the invoice list to be displayed in the page
OnGetInvoiceChartData method - is the backend for the fetch at point D in the JavaScript Code. It will provide JSON data in order to be displayed with the list.
I hope you liked this tutorial, please ask me if something needs to be clarified.