Why is it that all the numeric values are displayed as 0?

Question

I am writing my first ASP.NET Blazor application. I'm trying to display data from a table in a database. Here's the definition of the table:

public partial class Entry
{
    [Key, Column("Video Number", Order = 0)]
    public short VideoNumber { get; set; }
    [Key, Column("Entry", Order = 1)]
    public byte Entry1 { get; set; }
    public short ShowCode { get; set; }
    public string EpisodeName { get; set; } = null!;
    public DateTime? ActualPlayTime { get; set; }
    public bool Completed { get; set; }
    public string? Comment { get; set; }
    public TimeOnly? ActualPlayTime1 { get; set; }
    public virtual Show Show { get; set; } = null!;
    public virtual Video VideoNumberNavigation { get; set; } = null!;
}

And here's a code snippet of the Blazor code where I'm trying to display the data in an HTML table:

<table class="table">
    <thead>
        <tr>
            <th>Video Number</th>
            <th>Episode Name</th>
            <th>Entry1</th>
            <th>Show Code</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var entry in entries)
        {
            <tr>
                <td>@entry.VideoNumber</td>
                <td>@entry.EpisodeName</td>
                <td>@entry.Entry1</td>
                <td>@entry.ShowCode</td>
            </tr>
        }
    </tbody>
</table>

All VideoNumbers are displayed as 0. However, the EpisodeName is fine. Moreover, using Swagger, all the VideoNumbers are displayed properly. I tried searching for what might be causing the numeric values (VideoNumber and ShowCode to be displayed as 0) and came across this post from here on Stack Overflow Entity Framework Code First - Cast smallint and integer to int32. However, this wasn't helpful, as I tried putting in the HasColumnType("SMALLINT") but it didn't make a difference.

So, why doesn't it display the correct value in the Blazor/HTML code, but Swagger does display the correct value?

Addendum

This is how I read the Entries in the minimal API:

private async Task<Entry[]?> LoadEntriesFromApi(string uri, HttpClient httpClient) 
{
    using var httpResponse = await httpClient.GetAsync(uri, HttpCompletionOption.ResponseHeadersRead);

    try
    {
        httpResponse.EnsureSuccessStatusCode(); // throws if not 200-299
    }
    catch (Exception)
    {
        Console.WriteLine(httpResponse.ReasonPhrase);
        return Array.Empty<Entry>();
    }

    if (httpResponse is object && httpResponse.Content.Headers.ContentType != null && httpResponse.Content.Headers.ContentType.MediaType == "application/json")
    {
        try
        {
            var contentStream = await httpResponse.Content.ReadAsStreamAsync(); 
            var bozo = await System.Text.Json.JsonSerializer.DeserializeAsync<Entry[]>(contentStream, new System.Text.Json.JsonSerializerOptions { DefaultIgnoreCondition = System.Text.Json.Serialization.JsonIgnoreCondition.WhenWritingNull, PropertyNameCaseInsensitive = true });
            return bozo;
        }
        catch (JsonException)
        {
            Console.WriteLine("Invalid JSON");
        }
        catch (Exception ex)
        {
            Console.WriteLine($"HTTP Response was invalid and cannot be deserialized. Exception type {ex.GetType().ToString()}");
        }
    }
    else
    {
        Console.WriteLine("HTTP Response was invalid and cannot be deserialized.");
    }
    return Array.Empty<Entry>();
}

BTW, I am starting small. This is the only endpoint I have in the API at this point.

Answer 1

Not really an answer but a mre in order to refute the question in the title:

<div>
    <p>@x</p>
    <p>@y</p>
    <p>@z</p>
</div>

@code {
    int x = 1;
    short y = 2;
    byte z = 3;
}

Extend this to match your situation, in steps.