BlazorNasaImages

A sample Blazor app that use the Open Data Nasa APIs to fetch images from the Nasa Astronomy Picture of the Day service.

Points of interest

1. Simple dinamic page layout change with a one-way binding to a boolean field and two components:

@if (cardView)
{
    <ImageCards NasaImageInfoList="@nasaImageInfoList" />
}
else
{
    <ImageList NasaImageInfoList="@nasaImageInfoList" />
}

2. Use of the Javascript interop to write on the browser console the error message object in case of error:

// FetchNasaImages.cshtml
...
catch (Exception ex)
{
    RegisteredFunction.Invoke<bool>("consoleLog", ex);
}
...

// Index.html (in wwwroot)
...
<script>
    // Register a Javascript function
    Blazor.registerFunction('consoleLog', (data) => {
        console.dir(data);
        return true;
    });
</script>

(from the example of Javascript interopt found in the Learn Blazor site).

Here's the result:

ApiKey

The key used in the source is an anonymous one (DEMO_KEY). Beware that this anonymous key has big usage restrictions, please get your free apiKey at https://api.nasa.gov/index.html#apply-for-an-api-key

Screenshots