Forms, Navigation, Layouts, and Modal Workflow

From WinForms to the WebModule 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

The main shell of LegacyOrderDesk (MenuStrip, action buttons, StatusStrip, one grid) is ported to a MenuBar / ToolBar shell that swaps three screens, the modal EditOrderDialog is ported as a Wisej.Web.Form with the same fields and DialogResult and is disposed by the caller every time, the "Saved." MessageBox becomes a Toast, and the fixed 716×372 layout becomes Dock/Anchor.

The source of this sample

iceteagroup/LearnWisej-SamplesFrom WinForms to the Web Course/Module 3

Browse this folder on GitHub

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

Run it

cd "LearnWisej-Samples/From WinForms to the Web Course/Module 3/OrderDesk.Web"
dotnet run -f net10.0 --urls http://localhost:5603

Then open http://localhost:5603. (Visual Studio: open OrderDesk.slnx, F5. The WinForms originals of the three ported forms are under OrderDesk.Web/Legacy/WinForms/ for side-by-side reading; they are not compiled.)

What to try

Action	What you should see
Page load	The shell (View · Reports · Help menu, ToolBar, StatusBar) on the Orders screen: 1042 Northwind Traders 4,820.00 Open first; the StatusBar reads Orders · 5 orders · filter all
ToolBar Orders, Customers, Reports (or the View menu)	The screens swap inside the same host; going back to Orders reuses the same screen instance
View › Open orders only / All orders	2 open orders, heading Orders · Open only; All restores 5
Double-click order 1042 (or Edit…) → change Status → Save	The modal dialog opens; Save updates the row and a Toast Order 1042 saved. appears top-right. The dialog is awaited (ShowDialogAsync) and disposed by a using block
Clear the Customer and press Save	The validation message Select a customer. stays a modal MessageBox
ToolBar New Order → Save	Order 1043 (190.00) at the top, Toast Order 1043 saved.
ToolBar Print Invoice / Reports Print Invoice (PDF)	The invoice PDF opens in a modal PdfViewer; closing it disposes it in the ShowDialog callback
ToolBar Export	orders.csv downloads, and a Toast confirms
Help › About	A Toast instead of the old modal About box

Where things live

Module 3/
└─ OrderDesk.Web/                        the Wisej.NET 4 app (net10.0-windows;net10.0)
   ├─ Program.cs / Startup.cs            session entry point (Application.MainPage) / Kestrel host (app.UseWisej())
   ├─ Default.html / Default.json / Web.config
   ├─ Domain/                            reused unchanged: Order, Customer, OrderService, CustomerService, InvoiceDocument, SampleData
   ├─ Legacy/WinForms/                   the WinForms originals of OrdersForm, EditOrderDialog, SettingsForm (not compiled)
   ├─ MainPage.cs / .Designer.cs         the page: hosts the shell, Dock = Fill
   ├─ Shell/AppShell.cs (+ .Designer.cs) MenuBar · ToolBar · screen host (NavigateTo) · StatusBar
   ├─ Screens/ScreenBase.cs              what every screen shares: StatusText, OnShown
   ├─ Screens/OrdersScreen.cs (+ .Designer.cs)     the list screen: Dock/Anchor layout, CellDoubleClick → EditOrder (using + await), Toast
   ├─ Screens/CustomersScreen.cs (+ .Designer.cs)  the customer lookup
   ├─ Screens/ReportsScreen.cs (+ .Designer.cs)    Print Invoice → InvoicePreviewForm (disposed in the callback), Export → download
   ├─ Dialogs/EditOrderDialog.cs (+ .Designer.cs)  the ported modal dialog: same fields and DialogResult
   ├─ Reporting/InvoicePdfWriter.cs, CsvExport.cs  the Module 1 replacements for PrintDocument / Excel Interop
   ├─ Views/Ui.cs, InvoicePreviewForm.cs
   └─ docs/                              the lab deliverables

Runtime facts

• Form.ShowDialog() returns immediately in Wisej.NET; use ShowDialog((form, result) => …) or await form.ShowDialogAsync() in an async void handler.
• A closed form is not disposed. using around the awaited call (or form.Dispose() last in the callback) releases it deterministically.
• Docking is applied in reverse order of the Controls collection: add the Dock = Fill control first, the edge bars after.
• StatusBar shows its Text unless ShowPanels = true; a StatusBarPanel with AutoSize = Spring takes the remaining width.
• The projects multi-target net10.0-windows;net10.0, so dotnet run needs -f net10.0 (or -f net10.0-windows).