Search⌘ K
AI Features
Home
Courses
Building Real-Life Applications with Blazor WebAssembly

Adding a Forecast Class

Explore how to build a Forecast class and a DailyForecast Razor component for a Blazor PWA weather app. Learn to fetch data from the OpenWeather One Call API and display daily forecasts using Bootstrap cards. Understand how to integrate and update the application to show accurate weather information.

We'll cover the following...

We need to add a Forecast class to capture the results from the OpenWeather One Call API. We will do this by following these steps:

  1. Return to Visual Studio.
  2. Right-click the Models folder and select the “Add, Class” option from the menu.
  3. Name the new class OpenWeather.
  4. Add the following classes:
C++
 public class OpenWeather
 {
   public Daily[] Daily { get; set; }
 }
 public class Daily
 {
   public long Dt { get; set; }
   public Temp Temp { get; set; }
   public Weather[] Weather { get; set; }
 }
   public class Temp
 {
   public double Min { get; set; }
   public double Max { get; set; }
 }
 public class Weather
 {
   public string Description { get; set; }
   public string Icon { get; set; }
 }

The preceding classes will be used with the OpenWeather One Call API.

Adding a DailyForecast component

We need a component to display each day’s forecast. We will do this by following these steps:

  1. Right-click the Shared folder and select the “Add, Razor Component” option from the menu.
  2. Name the new component DailyForecast.
  3. Replace
...