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

--

--

--

Businessman, Author and Tech Expert

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Build a custom React modal without libraries — Part 1/5

Creating Favorites List using LocalStorage in React [Part II]

PM 2 : A quick-start guide

Getting started with Babylon.js using Vite and GitHub actions

Thoughts on Redux

kafka NodeJs workshop

My rewiew About Jonas Schmedtmann Javascript Course on Udemy

All about {ES6 & JS}

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
taurius litvinavicius

taurius litvinavicius

Businessman, Author and Tech Expert

More from Medium

Dot Net library compatibility with Core and Framework

Blazor Server Project #11: Migrate to ASP.NET Core 6.0

How To Differentiate If, Else if, Else (but with my mother as example)

Seamless OpenId Connect / OAuth 2.0 security on HttpClient in .NET 6