Close a Mudblazor Dialog

Question

I am using Mudblazor in my Blazor app. I have the following code in a component inside ValidSubmit handler:

public async Task HandleValidSubmit()
{
    DialogService.Show<SavingDialog>("Saving Data");
    await Http.PostAsJsonAsync("api/Client/AddClient", CModel);

    //close the dialog here...
    //DialogService.Close(<need reference here>);
}

The DialogService opens the SavingDialog which is also a component. After the http call, I want to close the dialog. How do I do that? I can see the DialogService.Close(DialogReference dialog) in the documentation.

How do I get reference to the dialog box that I opened so I can close it?

Genu

Answer 1

Show returns a reference to the opened dialog!

So all you need to do is this:

public async Task HandleValidSubmit()
{
   var dialogRef = DialogService.Show<SavingDialog>("Saving Data");
   await Http.PostAsJsonAsync("api/Client/AddClient", CModel);

   //close the dialog here...
   dialogRef.Close();
}

Michaelson

What about from within the dialog component? I have a typical GUI setup, where the dialog is opened, and has [Save] and [Close] operations. Those functions are handled internally, and on handling, I need to trigger the dialog-close from within the in-dialog component. – Splurge

Answer 2

Inside your dialog component, define this:

 [CascadingParameter] MudDialogInstance MudDialog { get; set; }

then, you may able to call Close/Cancel methods.

    private void Cancel()
    {
        MudDialog.Cancel();
    }

    private void Ok()
    {
        MudDialog.Close(DialogResult.Ok( <any result you need to pass back> ));
    }

I found this, on the MudBlazor Dialog "Passing Data" example (check the .razor code)

Antacid