Hi,
I have the following collection of tabs I'm using:
<EjsTab @ref="IncidentReportTabStrip">
<TabItems>
<TabItem Header="@GeneralHeader">
<ContentTemplate>
<IncidentGeneralInfo OnNext=@(() => MoveToTab("DateTime"))></IncidentGeneralInfo>
</ContentTemplate>
</TabItem>
<TabItem Header="@DateHeader">
<ContentTemplate>
<DateAndTimeInfo OnNext=@(() => MoveToTab("Course"))></DateAndTimeInfo>
</ContentTemplate>
</TabItem>
</TabItems>
</EjsTab>
Each of the tabs contains a component in the template. Here's the IncidentGeneralInfo component:
@if (IsLoading)
{
<Loading></Loading>
}
else
{
<EditForm Model="@IncidentStateViewModel.IncidentGeneralInfoViewModel" OnValidSubmit="@OnSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="container">
<div class="form-group row">
<label class="col-md-6 control-label">Incident event</label>
<div class="col-md-12">
<EjsTextBox @bind-Value="@IncidentStateViewModel.IncidentGeneralInfoViewModel.IncidentEvent" Enabled="@IncidentStateViewModel.CanEdit"></EjsTextBox>
<ValidationMessage For="@(() => IncidentStateViewModel.IncidentGeneralInfoViewModel.IncidentEvent)"></ValidationMessage>
</div>
</div>
</div>
</EditForm>
}
In the class I use for the code, I have the following set:
public IncidentGeneralInfoBase()
{
IsLoading = true;
DefaultLkpIncidentCategoryDto = new LkpIncidentCategoryDto() { Id = null, IncidentCategory = "--Select Incident category--" };
DefaultLkpIncidentTypeDto = new LkpIncidentTypeDto() { Id = null, IncidentType = "--Select Incident type--" };
DefaultLkpSeverityLevelDto = new LkpSeverityLevelDto() { Id = null, SeverityType = "--Select Severity--" };
}
protected override async Task OnInitAsync()
{
Logger.LogTrace("Init async");
await IncidentGeneralInfoDataService.LoadLkpIncidentCategoryDtos();
await IncidentGeneralInfoDataService.LoadLkpIncidentTypeDtos();
await IncidentGeneralInfoDataService.LoadLkpSeverityLevelDtos();
IsLoading = false;
Logger.LogTrace("Init async end");
StateHasChanged();
}
The problem I have is the following:
When I run the page, the IsLoading will get set to false in OnInitAsync. However, in the UI, the EditForm part isn't showing after the IsLoading value is updated. In fact, whatever content I place in the else clause here doesn't become visible. It only happens when there are awaitable calls (that load data from service classes over HTTP) before it. If I comment them out, the form shows nicely after the value is updated in OnInitAsync.
Can you take a look to see what I'm doing wrong here?
Thanks,
Gill
