That's how I ended up writing this tutorial, which needs the following prerequisites:
- beginner level .Net Core Razor pages
- download https://email@example.com/dist/Chart.bundle.min.js and place it into wwwroot folder, js subfolder
- you can download source code: https://github.com/zoltanhalasz/ChartJSTutorial
- A more detailed version of this is on my personal blog: https://mydev-journey.blogspot.com/2019/12/chartjs-tutorial-with-aspnet-core-22.html
- 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
Steps for the application, shortly described, to follow the code in the repo:
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
E. Code behind, backend for Index page:
OnGet method - loads the invoice list to be displayed in the page
I hope you liked this tutorial, please ask me if something needs to be clarified.