Using a Test API with WinForms and Blazor

Creating desktop and web applications can be complex, but having a reliable sample API to test against simplifies the process. In his video tutorial "Using a Test API with WinForms and Blazor," Tim Corey offers a hands-on walkthrough of how to leverage a test API in both a Blazor WebAssembly project and a Windows Forms Application using Visual Studio. This approach not only provides up-to-date information for developers but also demonstrates real-world scenarios for building and testing UI functionality.

Introduction to the Sample API and Visual Studio

Tim begins by emphasizing the importance of a sample API when learning web development or Windows Forms programming. A reliable API acts as a stable backend for testing features in various user interface environments. Using the Visual Studio IDE, Tim navigates to the creation of new projects, showcasing both the Blazor and Windows Forms platforms.

Starting with a Blazor Web Application

Using Visual Studio's "New Project" dialog, Tim selects a Blazor WebAssembly application. He names the project "BlazorDemo" within a solution titled "DemoApps." This setup uses the "auto" mode to support both server-side and WebAssembly rendering.

Adding a Model from the API

Tim creates a new file named CourseModel.cs in the client-side project. By copying a JSON payload from the API's /courses endpoint, he uses Visual Studio's "Paste JSON as Classes" tool to automatically generate the class structure. While the tool isn’t perfect, Tim refines the class using Pascal casing and nullable strings to match C# standards.

Adjusting Data Types and JSON Mapping

Tim manually reviews the generated properties, converting values like priceUSD to decimal for accuracy. He also configures a JsonSerializerOptions object to make property names case-insensitive, ensuring JSON keys map correctly to C# properties.

Creating and Wiring a Razor Page

Next, Tim adds a Razor component named Courses.razor, making it an accessible page via the URL /courses. He initializes a Listand injects an HttpClient to call the sample API. The component's logic includes error handling with try-catch and conditional UI rendering based on data availability.

Displaying Course Information

Using basic HTML and Razor syntax, Tim loops through the courses list and displays each course image as a clickable link. He applies inline styles to control layout and assigns alt attributes for accessibility.

Registering HTTP Client in Program.cs

Tim configures the HTTP client in the Blazor app’s Program.cs, registering it using builder.Services.AddScoped(...) and assigning the base address of https://thesampleapi.com. He explains that this registration must occur in both client and server configurations to support Blazor's hybrid rendering model.

Fixing the Double API Call Issue

Due to Blazor’s default pre-rendering behavior, the page makes two API calls on load. Tim disables pre-rendering by setting @rendermode InteractiveAuto and pre-render=false, which prevents duplicate API requests and enhances performance when dealing with remote data.

Switching Gears: Creating a Windows Forms Application

Using the Visual Studio environment, Tim creates a new Windows Forms App named WinFormDemo targeting the .NET Framework. He changes the default form name to Courses and modifies the font size via the Properties Window to make the UI more readable.

Organizing the Project with Solution Explorer

Tim adds two folders: Models and Services. In Services, he creates a static class HttpService with a HttpClient instance. This client is configured to target the same API base URL. Although Tim uses a static approach for simplicity, he recommends dependency injection for production-grade development.

Designing the Form UI with Toolbox Controls

In the Windows Forms Designer, Tim drags a PictureBox and two Button controls (“Previous” and “Next”) onto the form. He sets the SizeMode of the image box to Zoom, ensuring course images fit neatly within the control. He also renames the form title to “DevForge Courses,” reflecting his company branding.

Implementing Code-Behind Logic

Using the Form_Load event (triggered via double-click in the Properties Window), Tim writes the async logic to fetch data from the API. He also defines a helper method LoadCourse(int index) that handles image display and boundary validation. The method is robust, handling null lists and out-of-range indexes gracefully.

Navigating Courses with Buttons

Tim wires up the “Previous” and “Next” buttons by double-clicking them to generate their event handlers (object sender, EventArgs e). Each button adjusts the currentCourse index and calls LoadCourse() to update the displayed image. This provides a smooth user experience akin to a slideshow.

Switching to Local Development Using Docker

Tim illustrates how to use a local Docker container instead of the remote API. He pulls the latest image, runs it on a random port, and updates the base URI in HttpService.cs. After confirming functionality, he demonstrates stopping the Docker container to test failure handling, and restarting it to verify recovery.

Final Thoughts and Practical Applications

Tim concludes by emphasizing how useful a sample API can be when learning to build Windows desktop applications or Blazor front-ends. With a reliable data source, developers can focus on mastering graphical user interface design, form controls, events, and layout tools without being bogged down by backend setup.

Conclusion

By following Tim Corey’s detailed video tutorial, developers gain hands-on experience with both Blazor and Windows Forms programming. Using Visual Studio and a test API, they learn to build modern user interfaces and connect them to live data sources, making this tutorial a valuable resource for developers exploring the .NET ecosystem.

Whether you're new to forms programming or looking to enhance your skills in building Windows applications, this guide offers practical, up-to-date information and best practices to support your development journey.