Razor component System.nullreferenceexception at GetFromJsonAsync - json

Question

Student studying FullSD encountered an error whilst following lab that my teacher can't figure out.
Have a page where I can create an entry that can be displayed. But when I refresh to view the newly added entry, I get a loading error. When looking at it from Developer Tools, it calls System.nullreferenceexception. Despite this, the entry can still be viewed from datatable in Visual Studios
The error references a block of code starting at line 37 of my Index.razor for this page, which my lecturer narrowed down to being this:
protected async override Task OnInitializedAsync()
{
Bookings = await _client.GetFromJsonAsync<List<Booking>>($"{Endpoints.BookingsEndpoint}");
}
Entire Index.razor:
#page "/bookings/"
#inject HttpClient _client
#inject IJSRuntime js
#attribute [Authorize]
<h3 class="card-title">Car Bookings</h3>
<br />
<a href="/bookings/create" class="btn btn-secondary">
<span class="oi oi-plus"></span>
Create New Booking
</a>
<br />
<br />
#if (Bookings == null)
{
<div class="alert alert-info">Loading Bookings...</div>
}
else
{
<table class="table table-responsive">
<thead>
<tr>
<th>Booking Id</th>
<th>Customer License</th>
<th>Date</th>
<th>Duration in days</th>
<th>Plate Number</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach (var booking in Bookings)
{
<tr>
<td>#booking.Id</td>
<td>#booking.CustomerId</td>
<td>#booking.DateCreated.Date.ToString("dd/mm/yyyy")</td>
<td>#(booking.DateIn != nullDT ? (booking.DateIn - booking.DateOut).TotalDays.ToString() : "To Be Determined")</td>
<td>#booking.Vehicle.LicensePlateNumber</td>
<td>
<a href="/bookings/view/#booking.Id" class="btn btn-primary">
<span class="oi oi-book"></span>
</a>
<a href="/bookings/edit/#booking.Id" class="btn btn-warning">
<span class="oi oi-pencil"></span>
</a>
<button class="btn btn-danger" #onclick="#(()=>Delete(booking.Id))">
<span class="oi oi-delete"></span>
</button>
</td>
</tr>
}
</tbody>
</table>
}
#code {
private List<Booking> Bookings;
private DateTime nullDT = new DateTime(1, 1, 1, 0, 0, 0);
protected async override Task OnInitializedAsync()
{
Bookings = await _client.GetFromJsonAsync<List<Booking>>($"{Endpoints.BookingsEndpoint}");
}
async Task Delete(int bookingId)
{
var booking = Bookings.First(q => q.Id == bookingId);
var confirm = await js.InvokeAsync<bool>("confirm", $"Do you want to delete {booking.Id}?");
if (confirm)
{
await _client.DeleteAsync($"{Endpoints.BookingsEndpoint}/{bookingId}");
await OnInitializedAsync();
}
}
}
I expected the page to display the newly created entry as I have done with previously created pages in my Lab Workbook
Can anyone else provide some insight?
Edit: Here's my Booking class
using System;
namespace CarRentalManagement.Shared.Domain
{
public class Booking:BaseDomainModel
{
public DateTime DateOut { get; set; }
public DateTime DateIn { get; set; }
public int VehicleId { get; set; }
public virtual Vehicle Vehicle { get; set; }
public int CustomerId { get; set; }
public virtual Customer Customer { get; set; }
}
}