BlazorHybridWebAPI

This sample demonstrates how get the weather data from a WebAPI exposed on the Blazor server app which is called from the .NET MAUI client. I started with the .NET MAUI Blazor Hybrid and Web template maui-blazor-web and moved the weather generator code from the Weather.razor component to a WeatherService on the server which implements IWeatherService. This interface is injected into the Weather.razor component so that it calls the code directly on the server but uses the httpClient on the .NET MAUI Client.

IWeatherService.cs in the Shared RCL

BlazorHybridWebAPI/BlazorHybridWebAPI/BlazorHybridWebAPI.Shared/Services/IWeatherService.cs

Lines 10 to 13 in 7e773bc

	public interface IWeatherService
	{
	Task<WeatherForecast[]> GetWeatherForecastAsync(DateTime startDate);
	}

Weather.razor page

BlazorHybridWebAPI/BlazorHybridWebAPI/BlazorHybridWebAPI.Shared/Pages/Weather.razor

Lines 1 to 4 in 7e773bc

	@page "/weather"
	@using BlazorHybridWebAPI.Shared.Models
	@using BlazorHybridWebAPI.Shared.Services
	@inject IWeatherService WeatherService

...UI code is the same...

BlazorHybridWebAPI/BlazorHybridWebAPI/BlazorHybridWebAPI.Shared/Pages/Weather.razor

Lines 41 to 50 in 7e773bc

	@code {
	private WeatherForecast[]? forecasts;
	protected override async Task OnInitializedAsync()
	{
	forecasts = await WeatherService.GetWeatherForecastAsync(DateTime.Now);
	}
	}

WeatherService.cs on the Blazor web app

BlazorHybridWebAPI/BlazorHybridWebAPI/BlazorHybridWebAPI.Web/Services/WeatherService.cs

Lines 6 to 27 in 7e773bc

	public class WeatherService : IWeatherService
	{
	private static readonly string[] Summaries = new[]
	{
	"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
	};
	public async Task<WeatherForecast[]> GetWeatherForecastAsync(DateTime startDate)
	{
	// Simulate a delay for async operation so we can see the loading spinner
	await Task.Delay(1000);
	var rng = new Random();
	return await Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
	{
	Date = DateOnly.FromDateTime(startDate.AddDays(index)),
	TemperatureC = rng.Next(-20, 55),
	Summary = Summaries[rng.Next(Summaries.Length)]
	}).ToArray());
	}
	}
	}

WeatherService.cs on the .NET MAUI client

Note that this class uses an HttpClientHelper class that manages the HttpClient configuration for use while debugging on simulators and emulators.

BlazorHybridWebAPI/BlazorHybridWebAPI/BlazorHybridWebAPI/Services/WeatherService.cs

Lines 12 to 38 in 7e773bc

	namespace BlazorHybridWebAPI.Services
	{
	public class WeatherService : IWeatherService
	{
	public async Task<WeatherForecast[]> GetWeatherForecastAsync(DateTime dateTime)
	{
	var forecasts = Array.Empty<WeatherForecast>();
	try
	{
	var httpClient = HttpClientHelper.GetHttpClient();
	var weatherUrl = $"{HttpClientHelper.WeatherUrl}?startDate={dateTime.ToShortDateString()}";
	forecasts = (await httpClient.GetFromJsonAsync<WeatherForecast[]>(weatherUrl)) ?? [];
	}
	catch (HttpRequestException httpEx)
	{
	Debug.WriteLine($"HTTP Request error: {httpEx.Message}");
	}
	catch (Exception ex)
	{
	Debug.WriteLine($"An error occurred: {ex.Message}");
	}
	return forecasts;
	}
	}
	}

MauiProgram.cs

We need to add the service implementation to the builder:

BlazorHybridWebAPI/BlazorHybridWebAPI/BlazorHybridWebAPI/MauiProgram.cs

Line 21 in 7e773bc

builder.Services.AddScoped<IWeatherService, WeatherService>();

Program.cs on the Blazor web app

We need to add the service implementation to the builder:

BlazorHybridWebAPI/BlazorHybridWebAPI/BlazorHybridWebAPI.Web/Program.cs

Line 13 in 7e773bc

builder.Services.AddScoped<IWeatherService, WeatherService>();

As well as expose the weather API:

BlazorHybridWebAPI/BlazorHybridWebAPI/BlazorHybridWebAPI.Web/Program.cs

Lines 35 to 39 in 7e773bc

	app.MapGet("/api/weather", async (IWeatherService weatherService, DateTime startDate) =>
	{
	var forecasts = await weatherService.GetWeatherForecastAsync(startDate);
	return Results.Ok(forecasts);
	});