同一份定義，換成 Blazor Server 要改什麼？

七分鐘影片導讀：單一專案、改版面不必重新部署、從寬螢幕到手機

• 完整版（約 7 分鐘）
• 精華版（約 2.5 分鐘）

影片是英文旁白，YouTube 上可以切換英文或繁體中文字幕，以 Polhem 1.11.0 錄製。

上一篇〈一張表單，能不能只描述一次？〉導讀的是 Avalonia 版：一台伺服器加上桌面、網頁、iOS 與 Android 四種前端。這次換成 Blazor Server，用的是同一套 Northwind 範例和同樣六份 Excel 活頁簿，畫面改由網站在伺服器端產生。

Excel 匯入、定義檔的分工、三個資料庫這些部分兩支影片一樣，上一篇已經說明過，這裡只簡單帶過。下面把篇幅放在換成 Blazor Server 之後不一樣的地方。

1️⃣ 一個專案：網站本身就是伺服器

在 VS Code 新增 .NET 專案，Polhem 有兩個範本，這次選「Polhem App (Blazor Server)」。產生的方案裡只有一個專案，就是 Blazor Server 網站，旁邊是放定義檔的 Define 資料夾和放活頁簿的 Excel 資料夾。

Avalonia 範本會產生伺服器，加上桌面、網頁、iOS 與 Android 前端，前端透過 JSON-RPC 呼叫伺服器。Blazor Server 範本只有一個專案，因為後端直接跑在網站裡。Program.cs 裡有三個呼叫：一個把後端掛進網站，一個註冊 Blazor 的表單畫面，一個設定外殼（登入畫面和選單）。頁面呼叫後端時走的是同一個行程，不經過網路。

同一個行程內的呼叫被當成可信任的本機呼叫。表單仍然會檢查登入者的權限，但有些只開放給本機的系統操作（例如讀取任意定義），頁面是叫得到的。範本的 Program.cs 有註解提醒這件事：自己加的頁面，不要把瀏覽器送來的值直接傳進這類呼叫。

如果之後也要讓 Avalonia 前端或 JavaScript 用戶端連進來，在這個網站加上 JSON-RPC 端點就好，那些用戶端的呼叫會照遠端用戶端的規則檢查。

2️⃣ 資料庫與匯入：和上一篇相同

接下來兩段和 Avalonia 版一樣，影片也只用了一分多鐘：

• 執行 VS Code 工作「Polhem: Initialize database」，建立 common、company、log 三個資料庫、框架資料表和管理者帳號。
• 在 DefineEditor（Polhem 的定義檔編輯器）批次匯入六份活頁簿，每匯入一份就升級一次資料庫，業務資料表跟著建好。

為什麼分三個資料庫、活頁簿裡寫了什麼、匯入後各定義檔怎麼分工，上一篇的第 2、3 段有說明。

3️⃣ 執行：畫面都由定義產生

按 F5，網站啟動並開啟瀏覽器。用剛才建立的管理者登入，選單上是主檔與交易兩組表單。

影片依序輸入類別、供應商、客戶、貨運商與產品，再開一張訂單：明細挑產品、輸入數量和單價，金額自己算出來；不選客戶就存檔會被規則擋下，選了客戶再存就成功。流程和 Avalonia 版一樣，差別在這次每個畫面都是 Blazor 元件依定義畫出來的。這個專案裡沒有任何一張表單的 Razor 頁面。

登入狀態跟著瀏覽器分頁：重新整理或開新分頁，會回到登入畫面。介面語言在登入畫面選，登入後套用。

4️⃣ 改版面：不登出，也不重新啟動

這段是這支影片的重點。系統用了一陣子，使用者反映訂單的備註欄只有一行，寫不下。

在 DefineEditor 打開訂單的版面（FormLayout），選備註欄，按工具列的地球圖示，就會在瀏覽器開出預覽。預覽用的是網站同一套 Blazor 畫面，所以預覽看到的就是使用者會看到的樣子。影片把 DefineEditor 和預覽左右並排，做了三個修改：

• 控制項從單行文字框改成多行的備註框
• 欄位改成跨兩欄、三列高
• 把備註欄拖到表單最後

每改一項，預覽立刻跟著變，這時候還沒有存檔。確認之後按 ⌘S 存檔。

回到網站，同一個分頁，不登出、也沒有重新啟動。先開客戶表單，再回到訂單按新增，備註欄已經是最後一列、跨滿整列的多行輸入框。

能這樣做，是因為定義存在快取裡，存檔時對應的快取會失效，網站在開啟表單時讀取版面，讀到的就是新的那份。要注意的是「開啟」：已經開著的訂單表單不會自己重新整理，所以影片先切到別的表單再回來。上一支 Avalonia 影片改完定義是登出再登入，這次連登出都省了。

5️⃣ 同一份版面，從寬螢幕到手機

最後一段是 RWD（響應式網頁設計，畫面依視窗寬度調整版型）。版面定義裡只寫了欄位怎麼排、各佔幾欄，沒有為手機另外寫一份。

影片把瀏覽器的寬度一段一段縮小：

• 一開始是兩欄，視窗變窄時欄位跟著縮
• 寬度到手機尺寸時，表單變成一欄，左側選單收成一個按鈕
• 明細不再用表格直接編輯，改成按鈕開出表單，一次編輯一筆
• 選單從側邊滑出，點了表單就自動收起

最後切到手機寬度，同一個網站照樣能用。清單表格在窄螢幕上右側會超出畫面，可以橫向捲動。

6️⃣ 什麼時候選 Blazor Server

兩個範本讀的是同一份定義，選哪一個看部署和使用情境。

Blazor Server 只有一個專案、一個網站要部署，使用者用瀏覽器就能用，改版面也不必重新部署。代價是每個使用者在操作時都和伺服器保持連線，畫面狀態放在伺服器上，網路不穩時體驗會受影響，也不能離線使用。

需要原生的手機 App、桌面程式，或希望前端和伺服器分開部署，用 Avalonia 範本比較合適。兩者也可以並存：Blazor Server 網站加上 JSON-RPC 端點，Avalonia 前端就能連同一個後端。

影片沒有演到的部分和上一篇相同：定義表達不了的邏輯還是要寫在業務物件裡，報表和批次作業不走定義，權限、稽核與傳輸加密框架都有，影片沒有示範。

✅ 結語

這次換的是前端技術，定義一行都沒改：同樣的活頁簿匯入之後，在 Blazor Server 上就能執行。定義只描述表單有哪些欄位、怎麼排，不綁定畫面怎麼畫，前端換成什麼技術，各自依定義畫出畫面。

Blazor Server 版多了一點方便：改了版面，使用者重新開啟表單就看得到，不用重新部署，也不用重新登入。如果你的系統主要在瀏覽器上使用、表單多且常調整，這個組合值得試試；需要離線或原生 App 的話，Avalonia 版比較合適。

想自己試的話，範本用 dotnet new install Polhem.Templates 安裝，再用 dotnet new polhem-blazor-server 建立專案，文件與範例在 GitHub。

📘 HackMD 原文筆記：
👉 https://hackmd.io/@jeff377/polhem-blazor-server

📢 歡迎轉載，請註明出處
📬 歡迎追蹤我的技術筆記與實戰經驗分享
Facebook ｜ HackMD ｜ GitHub ｜ NuGet