Rapid Widget Integration

Application IntegrationModule 3The 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 DashboardPage (Wisej.Web.Page) hosts two plain Wisej.Web.Widget instances — no wrapper class — a VendorGauge and a jQuery-style VendorKnob. Each widget gets its Packages (JS + CSS), its Options (.NET values serialized to the client) and an InitScript with init(options) / update(options, old) and a method the server reaches with Call. Server buttons change both widgets' Options and queue a client call.

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 3

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 3/IntegrationLab"
dotnet run -f net10.0 --urls http://localhost:5073

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

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

What to try on the Dashboard

Action	What you should see
Set "High" / Set "Peak" / Set "Idle"	the needle and the knob move, then the gauge flashes (High, Idle) or the knob pulses (Peak); Peak / Idle also replace the bands array, so the legend under the gauge is redrawn. The list on the right shows → .NET→JS gauge.Options {"value":88}, knob.Options {"level":78} and gauge.Call("flash") — queued to client
drag / wheel the knob	← JS→.NET knob.valueChanged {"value":63}; the server clamps it and writes it back to Options.level

The right-hand card, ⟶ Client · options & queued calls, lists what the server sends: the full Options at page load (camel-cased names such as range.minValue), every Options change and every queued Call. A vendor failure caught by either adapter shows a red banner under the widgets.

Where things live

IntegrationLab/
├─ DashboardPage.cs / .Designer.cs   the Dashboard page: server buttons, two Widgets, the client list
├─ LabHelpers.cs                     EmbeddedScript.Read (InitScript from the assembly), LabJson (list JSON via the Wisej serializer)
├─ wwwroot/
│  ├─ gauge-init.js                  InitScript of the gauge widget (embedded resource)
│  ├─ knob-init.js                   InitScript of the knob widget (embedded resource)
│  ├─ vendor-gauge.js / .css         the "third-party" gauge library + its stylesheet (Packages)
│  ├─ jquery-lite.js                 jQuery-compatible subset (Package, must load before the plugin)
│  └─ vendor-knob.js / knob.css      the jQuery-style knob plugin + its stylesheet (Packages)
├─ docs/
│  ├─ WidgetPackages.md              deliverable 1
│  ├─ InitAndUpdate.md               deliverable 2
│  └─ ServerButton.md                deliverable 3
├─ Program.cs                        Application.MainPage = new DashboardPage()
└─ Startup.cs                        Kestrel host (app.UseWisej(), static files from wwwroot/)