Improving Blazor server-side Template — real weather forecast

If you have used Blazor before, chances are you have seen the visual studio template. The weather forecast there is fake and this is how you make it real.

Before we do anything, we need a third-party API that will provide the forecasts. Also, if you do not know how to use Blazor or want to learn more about it — take a look at my Blazor course.

In this case we are using https://www.weatherapi.com as it actually allows some free use of it. There are limits, of course, but it will be good enough for this occasion.

The idea here is to leave as much of original as possible, so we will leave pretty much everything in front-end and only change a few things in the method that handles weather forecast retrieval or generating of it in the original.

First we need a data model, as we will simply use GetFromJson to retrieve the values from API. Since we do not have any library, we have to establish a model class and that can be done quite easily. All you need to do is find the example response, go to a tool like — https://json2csharp.com and generate your models from JSON. Watch the video for more detailed explanation.

The GetForecastAsync method can be found in the FetchData.cs file. It is kept as original as possible, but for the most part everything had to be removed and the http call had to be implemented. To keep up with the original idea and avoid changing the layout, we keep the response model. But it was changed to a list, instead of array for convenience reasons.

For the Blazor front-end part, we only need to change array to list.

Learn Blazor here, you can also submit exercises for my review:

https://learn.conficienssolutio.com/coursepreviewpage/22c08051-fd50-4042-816b-4533048df283?refid=medium2

Learn to integrate Stripe payments in Blazor (With API):

learn.conficienssolutio.com/coursepreviewpage/94c08051-fb80–4042–816b-4533048df218?refid=medium1