How Can I restore data when clicking on No (cancel) using DialogService with IDialogReference

[bao86]

Hello there,

How can I restore back the EditForm value when click on cancel button from Dialog ?
I'm using the example from "Customized Dialog"

on SimpleCustomizedDialog.razor :
@implements IDialogContentComponent<SimplePerson>
[...]

@* Footer *@
<FluentDialogFooter>
    <FluentButton Appearance="Appearance.Accent" OnClick="@SaveAsync">Save</FluentButton>
    <FluentButton Appearance="Appearance.Accent" OnClick="@UnSaveAsync">Cancel</FluentButton>
</FluentDialogFooter>

@code {
    [Parameter]
    public SimplePerson Content { get; set; } = default!;

    [CascadingParameter]
    public FluentDialog Dialog { get; set; } = default!;

    private SimplePerson _cloneContent { get; set; } = default!;
    
    protected override void OnInitialized()
   {
        _cloneContent = Content;
   }

    private async Task SaveAsync()
    {
        await Dialog.CloseAsync();
    }

    private async Task UnSaveAsync()
    {
        Content = _cloneContent;
        await Dialog.CancelAsync();
    }
}

[dvoituron]

If you directly bind the properties of the object passed to the dialog box (SimplePerson), they are automatically modified when the user changes them via the UI. So there are two solutions in Blazor:

1. Create a "Clone" of the SimplePerson object, which will be bound in the dialog box, and use or not this object by clicking on the Save or Cancel button.
2. Don't bind this SimplePerson object to the dialog box and manually modify the properties only when the user presses Save.

But probably the easy way is to use a record data (and not a class).
Example for the Demo web site:

1. In the SimplePerson file, replace the class keyword by a record

public record SimplePerson
{
    public string Firstname { get; set; } = string.Empty;
    public string Lastname { get; set; } = string.Empty;
    public int Age { get; set; }
}

2. In the Dialogbox file, use this code to close the dialog, when the user will click on [Save] or [Cancel] button.

private async Task SaveAsync() => await Dialog.CloseAsync(Content);
private async Task CancelAsync() => await Dialog.CancelAsync();

3. From the "parent" page, when you have to open your Dialogbox, send a new instance of your DialogData using the "record" syntax DialogData with { Age = 42 } (you could create another property (e.g. Id) instead of using Age). And, of course, you have to check if the user clicks on the [Save] button using if (!result.Cancelled).

private async Task OpenAsync()
{
    var dialog = await DialogService.ShowDialogAsync<SimpleCustomizedDialog>(DialogData with { Age = 42 }, new DialogParameters()
        {
            // ... existing dialog options
        });

    var result = await dialog.Result;
    if (!result.Cancelled)
    {
        DialogData = result.Data as SimplePerson;
    }
}

[bao86]

Oh thank you so much :) I will try with record instead of class.

Do you have an example for clone method ?

[dvoituron]

In C#, you can't easily clone an object. You have to copy each method manually.

newObject.MyProp1 = oldObject.MyProp1
newObject.MyProp2 = oldObject.MyProp2
...

But you have this famous lib to simplify the job: https://github.com/AutoMapper/AutoMapper

[bao86]

Thanks for your help, it's working fine with deepcopy