使用WinForms和Blazor的測試API

範例API與Visual Studio介紹

Tim首先強調瞭解Web開發或Windows Forms編程時，範例API的重要性。 可靠的API作為穩定的後端，用於在各種用戶界面環境中測試功能。 使用Visual Studio IDE，Tim展示創建新專案，展示Blazor和Windows Forms平台。

從Blazor Web應用程式開始

使用Visual Studio的"新專案"對話框，Tim選擇了一個Blazor WebAssembly應用程式。 他將專案命名為"BlazorDemo"，並放在一個名為"DemoApps"的解決方案中。此設置使用"auto"模式以支持伺服器端和WebAssembly渲染。

從API添加模型

Tim在客戶端專案中創建了一個名為CourseModel.cs的新文件。 通過從API的/courses端點複製JSON數據，使Visual Studio的"粘貼JSON為類"工具自動生成類結構。 儘管該工具不完美，Tim仍對類進行了調整，使用Pascal命名法和nullable strings使其符合C#標準。

調整數據類型和JSON映射

Tim手動審查生成的屬性，將如priceUSD等值轉換為小數以確保準確性。 他還配置了一個JsonSerializerOptions對象，使屬性名稱不區分大小寫，確保JSON鍵正確映射到C#屬性。

創建並連接Razor頁面

接下來，Tim添加了一個名為Courses.razor的Razor組件，讓它可以通過URL /courses訪問。 他初始化了一個List並注入了一個HttpClient以調用範例API。 組件的邏輯包括try-catch錯誤處理以及基於數據可用性的條件UI渲染。

顯示課程信息

使用基本的HTML和Razor語法，Tim遍歷課程列表並將每個課程圖片顯示為可點擊的鏈接。 他應用內聯樣式來控制佈局，並分配alt屬性以提高可訪問性。

在Program.cs中註冊HTTP客戶端

Tim在Blazor應用的Program.cs中配置HTTP客戶端，通過使用builder.Services.AddScoped(...)進行註冊，並將其基址設為https://thesampleapi.com。 他解釋說，這一註冊必須在客戶端和伺服器配置中都進行，以支持Blazor的混合渲染模型。

修復雙重API調用問題

由於Blazor的默認預渲染行為，頁面在加載時會進行兩次API調用。 Tim通過設置@rendermode InteractiveAuto和pre-render=false來禁用預渲染，這樣可以防止重複的API請求，提升處理遠程數據時的性能。

轉換齒輪：創建Windows Forms應用程式

使用Visual Studio環境，Tim創建了一個名為WinFormDemo的新的Windows Forms應用程式，目標是.NET Framework。 他將默認的窗體名稱更改為Courses，並通過屬性窗口修改字體大小以提高UI的可讀性。

使用Solution Explorer組織專案

Tim添加了兩個文件夾：Models和Services。 在Services中，他創建了一個帶有HttpClient實例的靜態類HttpService。 此客戶端配置為訪問相同的API基URL。 儘管Tim為簡單起見使用了靜態方法，但他建議在生產級開發中使用依賴注入。

用工具箱控件設計窗體UI

在Windows Forms設計器中，Tim拖放了一個PictureBox和兩個Button控件（"上一頁"和"下一頁"）到窗體上。 他將圖片框的SizeMode設置為Zoom，確保課程圖片整齊地適合控制項內。 他還將窗體標題改為"DevForge Courses"，以反映他的公司品牌。

實現後端邏輯

使用Form_Load事件（通過屬性窗口中的雙擊觸發），Tim編寫異步邏輯以從API獲取數據。 他還定義了一個輔助方法LoadCourse(int index)，用於處理圖片顯示和邊界驗證。 該方法穩健地處理null列表和超出範圍的索引。

使用按鈕導航課程

Tim通過雙擊"上一頁"和"下一頁"按鈕來生成它們的事件處理器（object sender, EventArgs e）。 每個按鈕調整currentCourse索引並調用LoadCourse()以更新顯示的圖片。 這提供了一種類似於幻燈片的平滑用戶體驗。

使用Docker切換到本地開發

Tim演示了如何使用本地Docker容器而不是遠程API。 他提取最新的映像，將其運行在一個隨機端口上，並在HttpService.cs中更新基URI。 在確認功能後，他演示了停止Docker容器以測試失效處理，然後重新啟動以驗證恢復。

最後的想法與實際應用

Tim在結尾強調了範例API在學習構建Windows桌面應用程式或Blazor前端時的實用性。 有了可靠的數據來源，開發者可以專注於掌握圖形用戶界面設計、表單控件、事件和佈局工具，而不必被後端設置所拖累。

結束語

通過遵循 Tim Corey 的詳細視頻教程，開發者能夠獲得使用Blazor和Windows Forms編程的實踐經驗。 通過使用Visual Studio和範例API，他們學會了構建現代用戶界面並將其連接到現場數據源，使該教程成為開發人員探索.NET生態系統的寶貴資源。

無論您是表單編程新手還是希望提升構建Windows應用能力的人士，本指南都提供了實用、最新的信息和最佳實踐，支持您的開發旅程。