使用一個測試 API 與 WinForms 和 Blazor

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