使用一個測試 API 與 WinForms 和 Blazor

建立桌面和網頁應用程式可能很複雜，但擁有可用來測試的可靠範例API可以簡化這一過程。 在他的影片教程"Using a Test API with WinForms and Blazor"中，Tim Corey提供了一個實際操作演練，介紹如何在 Blazor WebAssembly 項目和 Visual Studio 中的 Windows Forms 應用程式中利用測試 API。 這種方法不僅為開發人員提供最新的資訊，還展示了構建和測試UI功能的真實場景。

範例API和Visual Studio簡介

Tim首先強調了學習網頁開發或Windows Forms程式設計時範例API的重要性。 可靠的API是測試各種使用者介面環境中功能的穩定後台支援。 運用Visual Studio IDE，Tim演示了新專案的建立，展示了Blazor和Windows Forms兩個平台。

從Blazor Web應用開始

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

從API中新增模型

Tim在客戶端專案中建立了一個名為CourseModel.cs的新文件。 通過從API的/courses端點複製JSON有效內容，他使用Visual Studio的"將JSON粘貼為類"工具來自動生成類結構。 雖然工具並不完美，Tim通過使用Pascal大寫和可空字串來匹配C#標準來精煉類。

調整資料型別和JSON映射

Tim手動檢查生成的屬性，將priceUSD等值轉換為十進制以確保準確性。 他還配置了JsonSerializerOptions物件，使屬性名稱不區分大小寫，確保JSON鍵正確映射到C#屬性。

建立和連接Razor頁面

接下來，Tim新增了一個名為Courses.razor的Razor組件，讓它成為通過URL/courses可存取的頁面。 他初始化了一個List<CourseModel>並注入了一個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中，他建立了一個靜態類HttpService並配置了一個HttpClient實例。 此客戶端被配置為針對同一API基本URL。 儘管Tim為簡單起見採用靜態方法，他建議在生產級開發中使用依賴注入。

用工具箱控件設計表單UI

在Windows Forms設計器中，Tim將一個PictureBox和兩個按鈕控件（"上一頁"和"下一頁"）拖到表單上。 他設置了圖片框的SizeMode為Zoom，確保課程圖像能整齊地顯示在控件內。 他還將表單標題更名為"DevForge Courses"，以體現其公司品牌。

實現程式碼後邏輯

利用Form_Load事件（在屬性窗口中雙擊觸發），Tim編寫了從API獲取資料的異步邏輯。 他還定義了輔助方法LoadCourse(int index)，該方法負責圖像顯示和邊界驗證。 該方法非常完善，能夠優雅地處理空列表和超出範圍的索引。

用按鈕導航課程

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應用技能，此指南提供了實用、最新的資訊和最佳實踐來支持您的開發旅程。