C#•14mo ago

❔ Call API From Web API on Blazor Server

Hello respected community members, I am new to Blazor Server and I am currently trying to fetch data from a .NET Core Web API to populate a data table. I am struggling with getting the data and then displaying it in my Blazor component. I have an HttpClient service and I'm sending a GET request to my API endpoint. The API is working correctly. However, I am having trouble deserializing this JSON response and showing it in a table in my Blazor component. Here is the pertinent part of my code:

private readonly string _apiUrl = "http://localhost:5278/";

    private GetAllApprovedProspectResult? prospects;

     protected override async Task OnInitializedAsync()
         {
             await RefreshList();
         }
     
         private async Task RefreshList()
         {
             try
             {
                 var request = new HttpRequestMessage(HttpMethod.Get,
                     _apiUrl + "api/Prospecting/GetAllApprovedProspect");

                 var client = ClientFactory.CreateClient();

                 var response = await client.SendAsync(request);

                 if (response.IsSuccessStatusCode)
                 {
                     using var responseStream = await response.Content.ReadAsStreamAsync();
                     prospects = await JsonSerializer.DeserializeAsync
                         <GetAllApprovedProspectResult>(responseStream);
                 }
                 else
                 {
                     getProspectError = true;
                 }

                 shouldRender = true;
             }
             catch (Exception ex)
             {
                 Console.WriteLine(ex.Message);
             }
         }

private readonly string _apiUrl = "http://localhost:5278/";

    private GetAllApprovedProspectResult? prospects;

     protected override async Task OnInitializedAsync()
         {
             await RefreshList();
         }
     
         private async Task RefreshList()
         {
             try
             {
                 var request = new HttpRequestMessage(HttpMethod.Get,
                     _apiUrl + "api/Prospecting/GetAllApprovedProspect");

                 var client = ClientFactory.CreateClient();

                 var response = await client.SendAsync(request);

                 if (response.IsSuccessStatusCode)
                 {
                     using var responseStream = await response.Content.ReadAsStreamAsync();
                     prospects = await JsonSerializer.DeserializeAsync
                         <GetAllApprovedProspectResult>(responseStream);
                 }
                 else
                 {
                     getProspectError = true;
                 }

                 shouldRender = true;
             }
             catch (Exception ex)
             {
                 Console.WriteLine(ex.Message);
             }
         }

25 Replies

_vegabyte_OP•14mo ago

private bool getProspectError;
    private bool shouldRender;
    public class GetAllApprovedProspectResult
    {
        public int Status { get; set; }
        public bool Success { get; set; }
        public ProspectResult Data { get; set; }
        public List<string> Messages { get; set; }
        
        public class ProspectResult
        {
            public List<Prospects> RequestedProspect { get; set; }
            public int CurrentPage { get; set; }
            public int PageSize { get; set; }
            public int TotalCount { get; set; }
            public int TotalPages { get; set; }
            public bool HasPreviousPage { get; set; }
            public bool HasNextPage { get; set; }
        }

        public class Prospects
        {
            public int Id { get; set; }
            public string OwnersName { get; set; }
            public string PhoneNumber { get; set; }
            public string BusinessName { get; set; }
        }

        public int CurrentPage { get; set; }
        public int PageSize { get; set; }
        public int TotalCount { get; set; }
        public int TotalPages { get; set; }

    }

private bool getProspectError;
    private bool shouldRender;
    public class GetAllApprovedProspectResult
    {
        public int Status { get; set; }
        public bool Success { get; set; }
        public ProspectResult Data { get; set; }
        public List<string> Messages { get; set; }
        
        public class ProspectResult
        {
            public List<Prospects> RequestedProspect { get; set; }
            public int CurrentPage { get; set; }
            public int PageSize { get; set; }
            public int TotalCount { get; set; }
            public int TotalPages { get; set; }
            public bool HasPreviousPage { get; set; }
            public bool HasNextPage { get; set; }
        }

        public class Prospects
        {
            public int Id { get; set; }
            public string OwnersName { get; set; }
            public string PhoneNumber { get; set; }
            public string BusinessName { get; set; }
        }

        public int CurrentPage { get; set; }
        public int PageSize { get; set; }
        public int TotalCount { get; set; }
        public int TotalPages { get; set; }

    }

x0rld 👻 🎃•14mo ago

what's the error you have ? 🤔

_vegabyte_OP•14mo ago

if (getProspectError || prospects is null)
{
    <p>No data found</p>
}
else
{
    <table class="table">
        <thead>
        <tr>
            <th>Id</th>
            <th>Owner's Name</th>
            <th>Business Name</th>
            <th>Phone Number</th>
        </tr>
        </thead>
        <tbody>
        @if (prospects?.Data != null)
        {
            @foreach (var prospect in prospects.Data.RequestedProspect)
            {
                <tr>
                    <td>@prospect.Id</td>
                    <td>@prospect.OwnersName</td>
                    <td>@prospect.BusinessName</td>
                    <td>@prospect.PhoneNumber</td>
                </tr>
            }
        }
        </tbody>
    </table>
}

if (getProspectError || prospects is null)
{
    <p>No data found</p>
}
else
{
    <table class="table">
        <thead>
        <tr>
            <th>Id</th>
            <th>Owner's Name</th>
            <th>Business Name</th>
            <th>Phone Number</th>
        </tr>
        </thead>
        <tbody>
        @if (prospects?.Data != null)
        {
            @foreach (var prospect in prospects.Data.RequestedProspect)
            {
                <tr>
                    <td>@prospect.Id</td>
                    <td>@prospect.OwnersName</td>
                    <td>@prospect.BusinessName</td>
                    <td>@prospect.PhoneNumber</td>
                </tr>
            }
        }
        </tbody>
    </table>
}

I cant display the data here the API itself is working properly

x0rld 👻 🎃•14mo ago

I mean the error when deserializing the json you have an exception or something ?

mg•14mo ago

Yeah, what's happening that you don't want to happen, or what's not happening that you want to happen?

_vegabyte_OP•14mo ago

There is no error, as the app returns No data found even though the API return result.

mg•14mo ago

Is getProspectError true or is prospects null?

x0rld 👻 🎃•14mo ago

so the deserialization isn't the issue it's before

_vegabyte_OP•14mo ago

prospects is null Yes. When I there is no data to deserialize

_vegabyte_OP•14mo ago

mg•14mo ago

that's not null

x0rld 👻 🎃•14mo ago

if you read the stream manually as string what's inside ? for me the first things to verify is check what's in your response string

mg•14mo ago

one possibility is that the json property names are not being appropriately mapped to your class's property names

_vegabyte_OP•14mo ago

This the response

x0rld 👻 🎃•14mo ago

did you create your model based on this json or manually ?

_vegabyte_OP•14mo ago

I created this GetAllApprovedProspectResult

mg•14mo ago

https://learn.microsoft.com/en-us/dotnet/standard/serialization/system-text-json/character-casing

How to enable case-insensitive property name matching with System.T...

Learn how to enable case-insensitive property name matching while serializing to and deserializing from JSON in .NET.

x0rld 👻 🎃•14mo ago

oh yeah the insentive could be the issue

_vegabyte_OP•14mo ago

Based on the result from api for example the data.requestedProspect should match to the GetAllApprovedProspectResult Data.ProspectResult? Should be Data.RequestedProspect?

x0rld 👻 🎃•14mo ago

it should have the same name yeah

x0rld 👻 🎃•14mo ago

I always use this website to create my model https://json2csharp.com

Convert JSON to C# Classes Online - Json2CSharp Toolkit

Convert any JSON object to C# classes online. Json2CSharp is a free toolkit that will help you generate C# classes on the fly.

x0rld 👻 🎃•14mo ago

or the ide feature

mg•14mo ago

You can either configure the deserializer to be case insensitive or you can add [JsonPropertyName("propertyName")] on each of your properties

_vegabyte_OP•14mo ago

That's a great tip, thank you! I hadn't realized that the JSON property naming could be causing the issue. I'll try setting the deserializer to be case insensitive and see how that works. Thanks, I will check this one too!

Accord•14mo ago

Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

❔ Call API From Web API on Blazor Server