Razor Component Return Html but not Data from api call until page refresh manually

Question

Razor Component Return Html but not Data from api call until page refresh manually

Prathamesh Shende 511

Hello There,

blazor Web App .net 8 Interactive Render Mode Auto.

sometimes, page load in razor in blazor wasm side the html content appears correctly but api doesnt get called and data not get loaded but I can see in command prompt window ef core queries have ran (must be pre-rendered on server).

if I visit another page still everything is loaded but not data.

So after if I refresh the page, the data is loaded and html too with XHR logged with api call in browser inspect.

sometimes I don't have to refresh the page. It run properly from First Time.

So what is issue here?

AgaveJoe 30,206 Reputation points

2025-07-29T10:18:19.58+00:00

Needing a refresh to see data fetched from a web API in Blazor often points to how the component handles its rendering lifecycle and asynchronous data updates. Without seeing your code, it's tough to pinpoint the exact issue, but it's usually related to the component not being aware that its data has changed and needs to re-render.

Prathamesh Shende 511

I authenticate and authorized from idp received the access token and landed on client app.
first Index.razor (Default page) - Here the every request is called correctly i ran under AfterRenderAsync() because I was creating the localstorage and sessionstorage. once successfully done redirect to dashboard page.

dashboard page has api call OnInitializedAsync() sometime calls perfectly and sometimes I have to refresh the page manually.

I know it is I have to use jsRuntime in AfterRenderAsync() because of the prerender in .net 8

I got authenticated and landed on Default page .

@page "/"
@using Microsoft.AspNetCore.Components.Authorization
@attribute [Authorize]
@layout AuthLayout
@inject ISettingsService SettingsService
<AuthorizeView>
    <Authorized>
        <div class="d-flex flex-column gap-5 justify-content-center">
            <img class="img-fluid" alt="clinix logo" src="img/clinix.svg" width="256" />
            <div class="d-flex flex-column gap-3">
                <ProgressBar ValueNow="@progress" Height="4">
                    <ProgressBarItem ValueNow="@progress" IsStriped="true" IsAnimate="true"></ProgressBarItem>
                </ProgressBar>
                <p class="text-center">Loading Clinix</p>
            </div>
        </div>
    </Authorized>
</AuthorizeView>
@code {
    int progress = 25;
    UserLoginsViewModel userLogin = new UserLoginsViewModel();
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Simulate loading progress
            for (int i = 0; i < 25; i++)
            {
                await Task.Delay(20); // Simulate some work
                progress += 1;
                StateHasChanged(); // Trigger a re-render to update the progress bar
            }
            userLogin = await SettingsService.GetAuthenticatedUser(); //api call always work fine refresh required.
            // Simulate loading progress
            for (int i = 0; i < 25; i++)
            {
                await Task.Delay(20); // Simulate some work
                progress += 1;
                StateHasChanged(); // Trigger a re-render to update the progress bar
            }
            progress = 100;
            if (userLogin is not null)
            {
                var result = await SettingsService.GetLoggedIn(userLogin); //creating local storage 
                if (result.IsSuccess)
                    _navigationManager.NavigateTo("/dashboard", true);
            }
            else _navigationManager.NavigateTo("/register");
        }
    }
}

Dashboard page
on this page sometimes on works fine or sometimes I have to refresh it.

@page "/Dashboard"
@using Clinix.Shared.Features.Appointments
@using Clinix.Shared.Features.Dashboards
@inject SMSServiceStatService _sMSServiceStatService
@inject IDashboardService _dashboardService
@inject ILogger<Index> _logger
<PageName Name="Dashboard" />
<h3 class="mb-4">Dashboard</h3>
@if (dashboard is not null)
{
    <Row Class="g-4">
        <Column Size="ColumnSize.Six" data-tg-tour="All your patients follow-up count by today and tomorrow" data-tg-title="Dashboard" data-tg-order="1">
            <Card Class="h-100">
                <BodyContent>
                    <div class="d-flex align-items-center mb-3">
                        <div class="me-2"><i class="bi bi-clock text-success fs-4"></i></div>
                        <div>Follow Up</div>
                    </div>
                    <Row>
                        <Column Size="@ColumnSize.Six">
                            <h2 class="card-text">@dashboard.TreatmentFollowUp!.Today</h2>
                            <span class="text-muted">Today</span>
                        </Column>
                        <Column Size="@ColumnSize.Six">
                            <h2>@dashboard.TreatmentFollowUp!.Tomorrow</h2>
                            <span class="text-muted">Tomorrow</span>
                        </Column>
                    </Row>
                </BodyContent>
            </Card>
        </Column>
        <Column Size="ColumnSize.Six" data-tg-tour="All your patients next appointments count by today and tomorrow" data-tg-title="Dashboard" data-tg-order="2">
            @if (dashboard.AppointmentStat is not null)
            {
                <Card Class="h-100">
                    <BodyContent>
                        <div class="d-flex align-items-center mb-3">
                            <div class="me-2"><i class="bi bi-clock text-success fs-4"></i></div>
                            <div>Appointments</div>
                        </div>
                        <Row>
                            <Column Size="@ColumnSize.Six">
                                <h2 class="card-text">@dashboard.AppointmentStat.DueToday</h2>
                                <span class="text-muted">Due Today</span>
                            </Column>
                            <Column Size="@ColumnSize.Six">
                                <h2>@dashboard.AppointmentStat.Tomorrow</h2>
                                <span class="text-muted">Tomorrow</span>
                            </Column>
                        </Row>
                    </BodyContent>
                </Card>
            }
        </Column>
     
        <Column Size="ColumnSize.Six">
            <Card Class="h-100" data-tg-tour="All patient's age by bar graph" data-tg-title="Dashboard" data-tg-order="3">
                <BodyContent>
                    <div class="d-flex align-items-center mb-3">
                        <div class="me-2"><i class="bi bi-person text-success fs-4"></i></div>
                        <div>Patient By Age</div>
                    </div>
                    <canvas id="chartPatientAge" aria-label="Patient Age" role="img"></canvas>
                </BodyContent>
            </Card>
        </Column>
        <Column Size="ColumnSize.Six">
            <Card Class="h-100" data-tg-tour="All patient's gender by pie chart" data-tg-title="Dashboard" data-tg-order="4">
                <BodyContent>
                    <div class="d-flex align-items-center mb-3">
                        <div class="me-2"><i class="bi bi-person text-success fs-4"></i></div>
                        <div>Patient By Gender</div>
                    </div>
                    <div style="max-width:480px">
                        <canvas id="chartPatientGender" aria-label="Patient Gender" role="img"></canvas>
                    </div>
                </BodyContent>
            </Card>
        </Column>
    </Row>
}
else
{
    <Row Class="g-4">
        <Column Size="ColumnSize.Six" Class="placeholder-glow" style="height:25vh">
            <PlaceHolder Class="h-100" ColumnSize="ColumnSize.Twelve"></PlaceHolder>
        </Column>
        <Column Size="ColumnSize.Six" Class="placeholder-glow">
            <PlaceHolder Class="h-100" ColumnSize="ColumnSize.Twelve"></PlaceHolder>
        </Column>
        <Column Size="ColumnSize.Six" Class="placeholder-glow" style="height:50vh">
            <PlaceHolder Class="h-100" ColumnSize="ColumnSize.Twelve"></PlaceHolder>
        </Column>
        <Column Size="ColumnSize.Six" Class="placeholder-glow">
            <PlaceHolder Class="h-100" ColumnSize="ColumnSize.Twelve"></PlaceHolder>
        </Column>
    </Row>
} 
@code {
    // SMSServiceStat? smsStat;
    PagedResult<AppointmentViewModel> appointment = new();
    string[] gender = { "Male", "Female" };
    List<int> data = new();
    List<int> ageData = new();
    int[]? ageCount;
    DashboardViewModel? dashboard ;
    // bool browser = false;
    bool _jsRendered = false;
    protected override async Task OnInitializedAsync()
    {
        var result = await _dashboardService.Get(); //api call
        dashboard = result!. Value; 
        if (dashboard is not null)
        {
            data.Add(dashboard.PatientStat!.Male);
            data.Add(dashboard.PatientStat.Female);
            if (dashboard.PatientStat.AgeRangeList!.Count() > 0)
            {
                var ageList = dashboard.PatientStat.AgeRangeList;
                if (ageList is not null)
                {
                    ageCount = new int[]
                    {
                    ageList.Count(a => a.Age >= 0 && a.Age <= 12),
                    ageList.Count(a => a.Age >= 13 && a.Age <= 17),
                    ageList.Count(a => a.Age >= 18 && a.Age <= 24),
                    ageList.Count(a => a.Age >= 25 && a.Age <= 34),
                    ageList.Count(a => a.Age >= 35 && a.Age <= 44),
                    ageList.Count(a => a.Age >= 45 && a.Age <= 54),
                    ageList.Count(a => a.Age >= 55 && a.Age <= 64),
                    ageList.Count(a => a.Age >= 65)
                    };
                }
            }
        }
    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // Only run JS once, and only if data is ready
        if (!_jsRendered && data.Count > 0 && ageCount is not null)
        {
            _jsRendered = true;
            await _jSRuntime.InvokeVoidAsync("chartdoughnut", gender, data.ToArray(), "# of Patient By Gender", "chartPatientGender");
            await _jSRuntime.InvokeVoidAsync("chartSingle", AgeRange.List().Select(a => a.Name).ToArray(), ageCount, "# of Patient", "chartPatientAge", "bar");
            // optional: trigger re-render if needed
            StateHasChanged();
        }
    }
}

AgaveJoe 30,206 Reputation points

2025-07-30T18:39:01.5933333+00:00

If I understand your latest response, the rendering issue affects the dashboard component and is intermittent. Sometimes the component renders are expected and other times the component does not. That sounds like an asynchronous timing issue.

Try moving the StateHasChanged(); call from the OnAfterRenderAsync method to the end of the OnInitializedAsync() method.

Also, if you add "dashboard is not null" to the condition in the OnAfterRenderAsync method, I think that will better align with when the data processing should occur.

1 answer

Your answer

AgaveJoe 30,206 Reputation points

2025-07-29T10:18:19.58+00:00

Needing a refresh to see data fetched from a web API in Blazor often points to how the component handles its rendering lifecycle and asynchronous data updates. Without seeing your code, it's tough to pinpoint the exact issue, but it's usually related to the component not being aware that its data has changed and needs to re-render.
AgaveJoe 30,206 Reputation points

2025-07-30T18:39:01.5933333+00:00

If I understand your latest response, the rendering issue affects the dashboard component and is intermittent. Sometimes the component renders are expected and other times the component does not. That sounds like an asynchronous timing issue.

Try moving the StateHasChanged(); call from the OnAfterRenderAsync method to the end of the OnInitializedAsync() method.

Also, if you add "dashboard is not null" to the condition in the OnAfterRenderAsync method, I think that will better align with when the data processing should occur.

Answer 1

your OnInitializedAsync() updates a state variable property, but does not force a state change. but your after render does. if after render completes after the api call updates the state data, the page works, otherwise not. move the StateHasChanged() to the OnInitializedAsync().

note: if OnInitializedAsync() returns task not completed (it is not called with an await as all renders are sync), the component is rendered before the task completes. if the OnInitializedAsync() then calls state changed() a re-render is done. This is how your first page is able to re-render the progress bar.

Share via

Razor Component Return Html but not Data from api call until page refresh manually

1 answer

Your answer