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); 
        
           });

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
BlazorHybridWebAPI		BlazorHybridWebAPI
.gitattributes		.gitattributes
.gitignore		.gitignore
BlazorHybridWebAPI.sln		BlazorHybridWebAPI.sln
README.md		README.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

BlazorHybridWebAPI

IWeatherService.cs in the Shared RCL

Weather.razor page

WeatherService.cs on the Blazor web app

WeatherService.cs on the .NET MAUI client

MauiProgram.cs

Program.cs on the Blazor web app

About

Releases

Packages

Languages

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

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

	@code {
	private WeatherForecast[]? forecasts;

	protected override async Task OnInitializedAsync()
	{
	forecasts = await WeatherService.GetWeatherForecastAsync(DateTime.Now);
	}


	}

	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());
	}

	}
	}

	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;
	}
	}
	}

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

BethMassi/BlazorHybridWebAPI

Folders and files

Latest commit

History

Repository files navigation

BlazorHybridWebAPI

IWeatherService.cs in the Shared RCL

Weather.razor page

WeatherService.cs on the Blazor web app

WeatherService.cs on the .NET MAUI client

MauiProgram.cs

Program.cs on the Blazor web app

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages