使用 WinForms 和 Blazor 测试 API

示例 API 和 Visual Studio 简介

蒂姆首先强调了在学习网络开发或 Windows 窗体编程时示例 API 的重要性。 可靠的 API 是在各种用户界面环境中测试功能的稳定后台。 使用 Visual Studio IDE，Tim 浏览了创建新项目的过程，展示了 Blazor 和 Windows Forms 平台。

开始使用 Blazor Web 应用程序

使用 Visual Studio 的 "新建项目 "对话框，Tim 选择了一个 Blazor WebAssembly 应用程序。 他在名为 "DemoApps "的解决方案中将项目命名为 "BlazorDemo"。该设置使用 "自动 "模式支持服务器端和 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并注入了一个 HttpClient 以调用示例 API。 该组件的逻辑包括使用 try-catch 进行错误处理，以及根据数据可用性进行有条件的 UI 渲染。

显示课程信息

Tim 使用基本的 HTML 和 Razor 语法循环浏览课程列表，并将每个课程的图片显示为可点击的链接。 他应用内联样式来控制布局，并指定 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 窗体应用程序

Tim 使用 Visual Studio 环境创建了一个新的 Windows 窗体应用程序，名为 WinFormDemo，目标是 .NET Framework。 他将默认表单名称改为 Courses，并通过属性窗口修改了字体大小，使用户界面更具可读性。

使用解决方案资源管理器组织项目

Tim 添加了两个文件夹：模型和服务。 在服务中，他创建了一个带有 HttpClient 实例的静态类 HttpService。 该客户端的配置目标是相同的 API 基本 URL。 虽然 Tim 使用静态方法来简化翻译，但他还是建议将依赖注入用于生产级开发。

使用工具箱控件设计表单 UI.

在 Windows 窗体设计器中，Tim 将一个 PictureBox 和两个按钮控件（"上一页 "和 "下一页"）拖到窗体上。 他将图像框的 SizeMode 设置为缩放，确保课程图像整齐地显示在控件中。 他还将表格标题重新命名为 "DevForge Courses"，以反映其公司品牌。

实现代码背后的逻辑

使用 Form_Load 事件（通过双击属性窗口触发），Tim 编写了从 API 获取数据的异步逻辑。 他还定义了一个辅助方法 LoadCourse(int index)，用于处理图像显示和边界验证。 该方法非常稳健，可以优雅地处理空列表和超出范围的索引。

使用按钮导航课程

Tim 通过双击 "上一页 "和 "下一页 "按钮来生成它们的事件处理程序（对象 sender、EventArgs e）。 每个按钮都会调整 currentCourse 索引并调用 LoadCourse() 来更新显示的图像。 这将提供类似幻灯片的流畅用户体验。

使用 Docker 转向本地开发

Tim 演示了如何使用本地 Docker 容器而不是远程 API。 他调出最新的映像，在随机端口上运行，并更新 HttpService.cs 中的基本 URI。 在确认功能后，他演示了停止 Docker 容器以测试故障处理，并重新启动以验证恢复。

最终想法和实际应用

最后，Tim 强调了示例 API 在学习构建 Windows 桌面应用程序或 Blazor 前端时的作用。 有了可靠的数据源，开发人员就可以专注于掌握图形用户界面设计、表单控件、事件和布局工具，而不必为后台设置所困扰。

结论

通过观看 Tim Corey 的详细 视频教程，开发人员可以获得 Blazor 和 Windows 窗体编程的实践经验。 使用 Visual Studio 和测试 API，他们将学习如何构建现代用户界面并将其连接到实时数据源，从而使本教程成为开发人员探索 .NET 生态系统的宝贵资源。

无论您是表单编程的新手，还是希望提高构建 Windows 应用程序的技能，本指南都能提供实用的最新信息和最佳实践，为您的开发之旅提供支持。