How to await a Dialog Form

I have a Blazor component that displays a list of records. I have included SfDialog component as in external file to display an input form. I call the ShowDialog() method of the dialog form in the main page as shown below:

private async Task New()
    {
        infoDialog.BidStatusId = 0;
        await infoDialog.OpenDialog();
        await LoadBidStatus();

    }

The statement await LoadBidStatus() is execute immediately the dialog form is displayed.  How can I prevent the next statement from excuting?  


The Dialog form is shown below:


@using Syncfusion.Blazor.Popups
@using ProcurementPro.Domain.Models.Bid

@inject ProcurementProApi.ServiceInterfaces.ISystemManagementService systemAdmin

<SfDialog @ref="InfoDialog" Width="40%" ShowCloseIcon="false" IsModal="true" @bind-Visible="@IsVisible">
    <DialogTemplates>
        <Content>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header bg-primary header-padding">Add Bid status</div>
                        <div class="card-body">
                            <EditForm Model="@model" OnValidSubmit="@SaveData">
                                <DataAnnotationsValidator />
                                <input type="hidden" @bind-value="@model.BidStatusId" />
                                <div class="form-group">
                                    <label class="control-label">Bid status name</label>
                                    <InputText class="form-control col-md-10 input-sm" @bind-Value="@model.BidStatusName" />
                                </div>
                                <div class="row form-group input-group-sm row-bottom-margin">
                                    <div class="col-md-2"></div>
                                    <div class="control-label col-md-10">
                                        <ValidationMessage For="@(() => model.BidStatusName)" />
                                    </div>
                                </div>
                                <div class="row form-group input-group-sm">
                                    <div class="col-md-8"></div>
                                    <div class="col-md-4">
                                        <button type="submit" class="btn btn-primary btn-sm">Save</button>
                                        <input type="button" class="btn btn-warning btn-sm" @onclick="@CloseDialog" value="Cancel" />
                                    </div>
                                </div>
                            </EditForm>
                        </div>
                    </div>
                </div>
            </div>
        </Content>
    </DialogTemplates>

</SfDialog>

@code {
    SfDialog InfoDialog;
    public BidStatus model = new BidStatus();

    public int BidStatusId { get; set; }
    public bool IsVisible { get; set; } = false;
 
    public async Task OpenDialog()
    {
        this.IsVisible = true;
        this.StateHasChanged();
    }

    public void CloseDialog()
    {
        this.IsVisible = false;
        this.StateHasChanged();
    }

    private async Task SaveData()
    {
        BidStatus data;
        if (BidStatusId == 0)
        {
            data = await systemAdmin.SaveBidStatus(model);
        }
        else
        {
            data = await systemAdmin.UpdateBidStatus(model);
        }
        CloseDialog();
    }




Attachment: SyncfusionDialog_191f7cd6.zip

5 Replies 1 reply marked as answer

IS Indrajith Srinivasan Syncfusion Team February 1, 2021 08:25 AM UTC

Hi Michael, 
 
Greetings from Syncfusion support, 
 
We have validated your reported query. With the asynchronous calls, the execute will happen parallelly. In order to prevent the execution of the line (await LoadBidStatus();) use an boolean in the dialog form, for indicating the task is completed and later execute the next line. Check the below code blocks for reference.  
 
Main page 
 
 
@code { 
   private async Task New() 
    { 
        infoDialog.BidStatusId = 0; 
        await infoDialog.OpenDialog(); 
        if (infoDialog.IsCompleted) 
        { 
            await LoadBidStatus(); 
        } 
 
    } 
} 
 
Dialog Form 
 
 
@code { 
   public bool IsCompleted { get; set; } = false; 
 
    public async Task OpenDialog() 
    { 
        this.IsVisible = true; 
        this.StateHasChanged(); 
        this.IsCompleted = true; 
    } 
} 
 
 
Please let us know if the solution helps, 
 
Regards, 
Indrajith 


Marked as answer

MO Michael Ofori-Appiah February 5, 2021 12:50 PM UTC

Thanks. It worked


IS Indrajith Srinivasan Syncfusion Team February 8, 2021 06:07 AM UTC

Hi Michael, 
 
Welcome, 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Indrajith 



BP Benoit Paquin replied to Indrajith Srinivasan November 25, 2022 07:16 PM UTC

Is it possible to have a complete project for this? I cannot manage to make it work...




VJ Vinitha Jeyakumar Syncfusion Team November 28, 2022 11:05 AM UTC

Hi Benoit,


Can you please share us details and the issues you have faced to further validate on our end. If possible please share us with the issue reproducing runnable sample or entire code snippet.

Regards,
Vinitha

Loader.
Up arrow icon