Charts, Dashboards, Content, Media, and Documents

Mastering the Control LibraryModule 6The lesson guide, the walkthrough video, the knowledge check and the hands-on lab this sample was built from are on learnwisej.com — free, with an AI tutor in every lesson.

Open the course

This example is the Dashboard tab — a ChartJS bar chart of tickets opened vs closed, a ProgressBar for this month's completion, a PdfViewer preview, an HtmlPanel summary, an Upload workflow that stores the file on the server, a reserved map slot, and one RefreshDashboard(DashboardModel) method that writes to all of them from the model DashboardService.GetDashboard() returns. The question the tab answers is on the page: are we on track for this month's ticket target?

This module fills Sections/DashboardPage and adds its models, services and documents. It also restores the Wisej-4-ChartJS 4.1.0 NuGet package (4.1.2 needs Wisej-4 ≥ 4.1.2).

The source of this sample

iceteagroup/LearnWisej-SamplesMastering the Control Library Course/Module 6

Browse this folder on GitHub

Or clone it: git clone https://github.com/iceteagroup/LearnWisej-Samples.git — then open OperationsConsole.slnx in Visual Studio and press F5.

Run it

cd "LearnWisej-Samples/Mastering the Control Library Course/Module 6/OperationsConsole"
dotnet run -f net10.0 --urls http://localhost:5706

Then open http://localhost:5706 and select Dashboard.

What to try

Action	What you should see
Open Dashboard	the chart (Opened blue, Closed green), the bar at 78 %, the sample PDF, green status "Dashboard ready — …"
Refresh	the button disables with a loader, loaders on the chart and preview, then Last refreshed HH:mm:ss, a Toast, and slightly taller bars for the current month
Choose a PDF ≤ 2 MB in Upload report	the card turns green, the preview swaps to the uploaded document
Choose a file over 2 MB, or not a PDF	the file never leaves the browser; amber AlertBox and status explain why
Tick Simulate service failure, Refresh	red status, an AlertBox, the previous numbers stay, the stamp says the refresh failed. Untick and refresh to recover
Refresh on the ToolBar	runs the page's own Refresh

Where things live

OperationsConsole/
├─ Sections/DashboardPage.cs / .Designer.cs   the tab: ConfigureChart(), ConfigureUpload(), RefreshDashboard(model)
├─ Models/DashboardModel.cs                   the view model (+ PreviewDocument)
├─ Services/DashboardService.cs               in-memory ticket table, GetDashboard() → aggregates only
├─ Services/DocumentStore.cs                  Validate() (server-side rule), Store(), OpenRead()
├─ Dashboard/PreviewHtml.cs                   the fixed, encoded HTML template for htmlPreview
├─ wwwroot/sample-report.pdf                  the document shown until something is uploaded
└─ docs/DashboardNotes.md                     the question, the control decisions, the Upload boundary

Known simplifications

• Uploaded files stay in memory for the session.
• The ticket table drifts a little on every refresh so the screen visibly changes.
• The map slot is a reserved Panel: GoogleMaps needs an API key.