How to show the data on the front end using Razor pages?

Question

I’m a beginner in development. net core and I am developing an application that consumes data from an api and shows to users, but I don’t know how to show the data on the front end.

I am using REFIT to make HTTP requests.

The api returns three properties and I need to go through one of them because it contains all the data I need.

Return model of the api:

{
"Message": "",
  "Global": {
    "NewConfirmed": 539275,
    "TotalConfirmed": 83951583,
    "NewDeaths": 9422,
    "TotalDeaths": 1827430,
    "NewRecovered": 278963,
    "TotalRecovered": 47278729
  },
  "Countries": [
    {
      "Country": "Afghanistan",
      "CountryCode": "AF",
      "Slug": "afghanistan",
      "NewConfirmed": 0,
      "TotalConfirmed": 51526,
      "NewDeaths": 0,
      "TotalDeaths": 2191,
      "NewRecovered": 0,
      "TotalRecovered": 41727,
      "Date": "2021-01-02T23:29:42Z",
      "Premium": {
        
      }
    }
  ]
}

Model class:

public class Rootobject
  {
    [JsonProperty("Message")]
    public string Message { get; set; }

    [JsonProperty("Global")]
    public Global Global { get; set; }

    [JsonProperty("Countries")]
    public Country[] Countries { get; set; }
    [JsonProperty("Date")]
    public DateTime Date { get; set; }
  }

  public class Global
  {
    [JsonProperty("NewConfirmed")]
    public int NewConfirmed { get; set; }

    [JsonProperty("TotalConfirmed")]
    public int TotalConfirmed { get; set; }

    [JsonProperty("NewDeaths")]
    public int NewDeaths { get; set; }

    [JsonProperty("TotalDeaths")]
    public int TotalDeaths { get; set; }

    [JsonProperty("NewRecovered")]
    public int NewRecovered { get; set; }

    [JsonProperty("TotalRecovered")]
    public int TotalRecovered { get; set; }
  }
  public class Country
  {
    [JsonProperty("Country")]
    public string Name { get; set; }

    [JsonProperty("CountryCode")]
    public string CountryCode { get; set; }

    [JsonProperty("Slug")]
    public string Slug { get; set; }

    [JsonProperty("NewConfirmed")]
    public int NewConfirmed { get; set; }

    [JsonProperty("TotalConfirmed")]
    public int TotalConfirmed { get; set; }

    [JsonProperty("NewDeaths")]
    public int NewDeaths { get; set; }

    [JsonProperty("TotalDeaths")]
    public int TotalDeaths { get; set; }

    [JsonProperty("NewRecovered")]
    public int NewRecovered { get; set; }

    [JsonProperty("TotalRecovered")]
    public int TotalRecovered { get; set; }

    [JsonProperty("Date")]
    public DateTime Date { get; set; }

    [JsonProperty("Premium")]
    public Premium Premium { get; set; }
  }

  public class Premium
  {
  }

Pagemodel class:

    private readonly ILogger<IndexModel> _logger;
    public IEnumerable<IGetRootobject> Cities { get; private set; } = new List<IGetRootobject>();
    public IndexModel(ILogger<IndexModel> logger)
    {
      _logger = logger;
    }

    public async void OnGet()
    {
      try
      {
        var create = RestService.For<IGetRootobject>("https://api.covid19api.com/summary");
        var result = await create.GetAsync(); // ou var result = create.GetAsync().GetAwaiter().GetResult();
        var res = result.Global.NewConfirmed;
        _logger.LogInformation(res.ToString());
      }
      catch (Exception e)
      {
        _logger.LogInformation("Erro na requisição http: " + e.Message);
      }
    }

Página Razor:

<div class="row">
  <div class="col-xxl-3 col-lg-4">
    <div class="card bg-primary text-white mb-4">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center">
          <div class="mr-3">
            <div class="text-white-75 small">@city</div>
            <div class="text-lg font-weight-bold">$40,000</div>
          </div>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="feather feather-calendar feather-xl text-white-50">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
            <line x1="16" y1="2" x2="16" y2="6"></line>
            <line x1="8" y1="2" x2="8" y2="6"></line>
            <line x1="3" y1="10" x2="21" y2="10"></line>
          </svg>
        </div>
      </div>
      <div class="card-footer d-flex align-items-center justify-content-between">
        <a class="small text-white stretched-link" href="#">View Report</a>
        <div class="small text-white"><svg class="svg-inline--fa fa-angle-right fa-w-8" aria-hidden="true"
            focusable="false" data-prefix="fas" data-icon="angle-right" role="img" xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 256 512" data-fa-i2svg="">
            <path fill="currentColor"
              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z">
            </path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>

By implementing this proposed solution:

public Country[] Countries { get; private set; }

I was able to store the data there and show by Razor page, but an exception is being generated when running the application:

An unhandled Exception occurred while Processing the request. Nullreferenceexception: Object Reference not set to an instance of an Object. Infocovid.Pages.Pages_index.Executeasync() in Index.cshtml, line 9

line that the Exception is generated:

@foreach (var item in Model.Countries)

My Pagemodel page now:

public async void OnGet()
{
  try
  {
    var create = RestService.For<IGetRootobject>("https://api.covid19api.com/summary");
    var result = await create.GetAsync(); // ou var result = create.GetAsync().GetAwaiter().GetResult();
    Countries = result.Countries;
  }
  catch (Exception e)
  {
    _logger.LogInformation("Erro na requisição http: " + e.Message);
  }
}

Answer 1

To display following your last question (How to consume data from an api to show on the front end using Razor pages?) to which you want to print on your screen only cities follow the example below, create a public property so that in the business model has access to this property, example

public Country[] Countries { get; private set; }

and at the time of its return uses the simple assignment:

Countries = result.Countries;

Complete code:

using Microsoft.AspNetCore.Mvc.RazorPages;
using Refit;
using System.Threading.Tasks;
using WebApplication1.Models;

namespace WebApplication1.Pages
{
    public class MostrarModel : PageModel
    {
        public Country[] Countries { get; private set; }
        public async Task OnGetAsync()
        {
            var create = RestService.For<IGetRootobject>("https://api.covid19api.com/summary");
            var result = await create.GetAsync();
            Countries = result.Countries;
        }
    }
}

and in its View make a foreach in Model.Countries which is the public property, example:

@page
@model WebApplication1.Pages.MostrarModel


@foreach (var item in Model.Countries)
{
  <div>@item.Name</div>
}

The example is it is easy to reflect in your code just put the property and iterate in your View.