How to await a Dialog Form

[Michael Ofori-Appiah]

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

[Indrajith Srinivasan]

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 

[Michael Ofori-Appiah]

Thanks. It worked

[Indrajith Srinivasan]

Hi Michael, 

 

Welcome, 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Indrajith 

[Benoit Paquin]

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

[Vinitha Jeyakumar]

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