Events & Contracts

Application IntegrationModule 7The 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

A gauge, a knob and a line chart are hosted in three Wisej.Web.Widget wrappers, each wires one vendor callback, forwards a compact payload, and the server turns it into a typed .NET event after validating every field. The right-hand card is the Server WidgetEvent log from the finished screen ("IntegrationLab — Event Demo").

Nothing here is deployed anywhere; it is a plain Wisej.NET 4 project that runs on your machine.

The source of this sample

iceteagroup/LearnWisej-SamplesApplication Integration Course/Module 7

Browse this folder on GitHub

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

Run it

cd "LearnWisej-Samples/Application Integration Course/Module 7/IntegrationLab"
dotnet run -f net10.0 --urls http://localhost:5077

Then open http://localhost:5077. (Visual Studio: open IntegrationLab.slnx, press F5.)

Requirements: .NET 10 SDK, the Wisej-4 4.1.0 NuGet package. dotnet build -nologo -v q passes; warning CS7022 (Program.Main ignored) is expected.

What to try in the Event Demo window

Widget	What happens	What you should see in the log
Gauge	follows live boiler readings (72 → 104 → 72, one every 700 ms) set by the server	once per cycle ← JS→.NET thresholdCrossed e.Data = {"value":85,"level":"warn"} and {"value":102,"level":"high"} — one event per crossing, not per reading; the high crossing raises an "operator notified" toast
Knob	drag the dial	← JS→.NET valueChanged e.Data = {"value":…,"source":"user"} per value step; the server commits the value and the dial pulses (Call("pulse"))
Chart	click a point	← JS→.NET pointClicked e.Data = {"index":3,"label":"Apr","value":68} and a drill-down toast
Chart	hover, wheel-zoom, click the legend	nothing — those vendor events stay in the browser

A payload that fails server validation is logged as ✖ rejected … with the reason, and no .NET event is raised.

Where things live

IntegrationLab/
├─ Contracts/
│  ├─ GaugeThresholdEventArgs.cs   thresholdCrossed { value, level }   → DTO (primitives only)
│  ├─ KnobValueEventArgs.cs        valueChanged { value, source }      → DTO
│  └─ ChartPointEventArgs.cs       pointClicked { index, label, value }→ DTO
├─ Widgets/
│  ├─ GaugeWidget.cs               : Widget — OnWidgetEvent → typed ThresholdCrossed
│  ├─ KnobWidget.cs                : Widget — state + TryReadValueChanged; the PAGE handles WidgetEvent
│  ├─ ChartWidget.cs               : Widget — OnWebEvent (+ base call) → typed PointClicked
│  ├─ PayloadReader.cs             guarded reads of untrusted dynamic fields
│  └─ TraceEventArgs.cs            log lines for the WidgetEvent log
├─ wwwroot/
│  ├─ gauge-init.js / knob-init.js / chart-init.js   the three client adapters (InitScript, embedded)
│  ├─ vendor-gauge.js, jquery-lite.js, vendor-knob.js  shared "third-party" libraries (Packages)
│  └─ vendor-chart.js + vendor-chart.css               the noisy chart library written for this module
├─ docs/                           the three deliverables
├─ Window1.cs / .Designer.cs       IntegrationLab — Event Demo
├─ Program.cs / Startup.cs         session entry point / Kestrel host