HttpClient in Blazor

This post was most recently updated on March 28th, 2023.

Blazor is a new (ish) framework for building web UIs with C#. It either uses SignalR to manage connections between your client-side and server-side code or even compiles directly to WebAssembly, in both cases cutting out the need to write any pesky JavaScript yourself – pretty neat, if you ask me!

However, developing your web apps with Blazor is a bit different from using ASP.NET MVC, for example. Other people have written great introductions to the tech, so I’ll stick to the problem at hand: Using HttpClient with Blazor (Server).

Description

With Blazor, a lot of your code runs serverside, and you’re using server-side dependencies. One example of this is HTTP queries, to which you need the class HttpClient. However, not all of the “classic” web server stack you might’ve grown to expect is available without configuration – and HttpClient is probably the most obvious dependency that’ll require an additional step to get it up and running.

So – Blazor & HttpClient. Let’s get to it!

Solution

Sample 1: Configuring your app to support HttpClient

For .NET Core 3 (starting from preview 9), this is how you can configure the HttpClient for your Blazor app:

// Server Side Blazor doesn't register HttpClient by default
if (services.All(x => x.ServiceType != typeof(HttpClient)))
{
	services.AddScoped(
		s =>
		{
			var navigationManager = s.GetRequiredService<NavigationManager>();
			return new HttpClient
			{
				BaseAddress = new Uri(navigationManager.BaseUri)
			};
		});
}

And for .NET Core 3.0 versions before preview 9 UriHelper is used instead of NavigationManager. It’s essentially the same thing in this case – so I just replaced the requested service to be that.

if (!services.Any(x => x.ServiceType == typeof(HttpClient)))
{
	// Setup HttpClient for server side in a client side compatible fashion
	services.AddScoped<HttpClient>(s =>
	{
		// Creating the URI helper needs to wait until the JS Runtime is initialized, so defer it.
		var uriHelper = s.GetRequiredService<IUriHelper>();
		return new HttpClient
		{
			BaseAddress = new Uri(uriHelper.GetBaseUri())
		};
	});
}

Sample 2: Using a HttpClient on your Blazor pages and components

The way this works in your code, no matter which version of ASP.NET Core you’re on, is somewhat like this:

@inject HttpClient Http

...

@code {

 string yourAPIUrl = "https://yourapisite.azurewebsites.net/api/getdata";

 protected override async Task OnInitializedAsync()
 {
  // do something with your HttpClient - in this case, GET data from your custom API...
  var t = Http.GetAsync(yourAPIUrl);
  
  ...

 }
}

Pretty easy and straightforward!

NavMan & UriHelper madness

A quick detour here – UriHelper injection and name have changed back and forth a few times. This post below should explain that a bit more:

Just another bit of documentation that’s tough to maintain :)

References

• This tip originally grabbed from here:
  • https://github.com/aspnet/AspNetCore/issues/7851

• Author
• Recent Posts

Antti K. Koskela

Developer / Speaker / Consultant at Koskila / Precio Fishbone / Norppandalotti Software Co / Alter - Experience Ideas Ltd

Antti Koskela is a proud digital native nomadic millennial full stack developer (is that enough funny buzzwords? That's definitely enough funny buzzwords!), who works as Solutions Architect for Precio Fishbone, building delightful Digital Workplaces.

He's been a developer from 2004 (starting with PHP and Java), and he's been working on .NET projects, Azure, Office 365, SharePoint and a lot of other stuff. He's also Microsoft MVP for Azure.

This is his personal professional (e.g. professional, but definitely personal) blog.

Latest posts by Antti K. Koskela (see all)

• “Performing cleanup” – Excel is stuck with an old, conflicted file and will never recover. - November 12, 2024
• How to add multiple app URIs for your Entra app registration? - November 5, 2024
• How to access Environment Secrets with GitHub Actions? - October 29, 2024