Nested modal works perfectly

[joshjohner]

So I accidently implemented something that was EXTREMELY useful. I'm not sure if it was supposed to work this way, is a "duh of course that works because...." or what.... but...

I created a generic "SaveCancelModal" component with contains a DataAnnotationsValidator and ValidationSummary, displays the child content and a Save/Cancel button group inside an edit form. The "SaveCancelModal" contains the BlazoredModalInstance (and a IModalService to display a nested "Discard Changes" modal on cancel).

Then when I need an edit form for a specific object type, I create an EditObjectModal component, which contains a SaveCancelModal component, but is not bound directly to a BlazoredModalInstance, and supplies the @ChildContent of the SaveCancelModal with the edit fields and interacts with the repository.

When I call modal.Show() it is able to find the BlazoredModalInstance in the nested SaveCancelModal, and everything just runs with NO additional work. And by having my Objects that need saving implement an interface to determine if they are new or edit, the SaveCancelModal.razor.cs can be of type where TItem : Interface and the bulk of my logic is contained in the SaveCancelModal, which only needs EventCallback for CreateItem and UpdateItem. Meaning the EditObjectModal only has to contain the ChildContent, a reference to the repository, a way to populate the form on initialization and callback functions for CreateObject and EditObject.

[larsk2009]

Do you have an example of this? It sounds interesting but I can't totally follow what you have created. If you can show as an example, I am very interested 😃.

[joshjohner]

public class Identifiable
{
    public int Id { get; set; }
    public bool IsNew { get { return Id == 0; } }
}

// SaveCancelModal.razor------------------------------------
@typeparam TItem
@if (!string.IsNullOrWhiteSpace(Error))
{
    <h6 class="text-danger">@Error</h6>
}
@if (Item != null)
{
    <EditForm Model="Item" OnValidSubmit="ConfirmAction" class="@ModalSize">
        <DataAnnotationsValidator/>
        <ValidationSummary/>
        
       @ChildContent(Item)

        <div class="modal-footer">
            <button @onclick="CancelAction" class="btn btn-warning float-start btn-sm" type="button">Cancel</button>
            <button type="submit" class="btn btn-success float-end btn-sm">Send It!</button>
        </div>

    </EditForm>
}


//SaveCancelModal.razor.cs--------------------------

using Blazored.Modal;
using Blazored.Modal.Services;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using System.Text.Json;
using System.Threading.Tasks;

namespace MyProject.Client.Shared
{
    public partial class SaveCancelModal<TItem> where TItem : Identifiable
    {
        [Inject] JsonSerializerOptions options { get; set; }
        [CascadingParameter] BlazoredModalInstance BlazoredModal { get; set; }
        [CascadingParameter] public IModalService Modal { get; set; }
        [Parameter] public string ModalSize { get; set; } = "";
        [Parameter] public TItem Item { get; set; }
        [Parameter] public string Error { get; set; }
        [Parameter] public RenderFragment<TItem> ChildContent { get; set; }
        [Parameter] public EventCallback<TItem> CreateItem { get; set; }
        [Parameter] public EventCallback<TItem> UpdateItem { get; set; }
        EditForm EF;
        bool Changed;
        JsonEqualizer<TItem> JsonEqualizer;

        async Task ConfirmAction()
        {
            Error = "";
            if (Item.IsNew || JsonEqualizer.HasChanged(Item))
            {
                    if (Item.IsNew)
                    {
                        await CreateItem.InvokeAsync(Item);
                    }
                    else
                    {
                        await UpdateItem.InvokeAsync(Item);
                    }
                    if (string.IsNullOrWhiteSpace(Error)) await BlazoredModal.CloseAsync(ModalResult.Ok(Item));
                    return;
            }
            await BlazoredModal.CloseAsync();
        }

        async Task CancelAction()
        {
            if (Changed && JsonEqualizer.HasChanged(Item))
            {
                if (!await Modal.Confirm("All unsaved changes will be lost?", "Discard Changes")) 
                {
                    return;
                } 
            }
            await BlazoredModal.CancelAsync();
        }

        protected override void OnAfterRender(bool firstRender)
        {
            if (firstRender && Item != null)
            {
                JsonEqualizer = new JsonEqualizer<TItem>(Item, options);
                EF.EditContext.OnFieldChanged += ((s, e) => Changed = true);
            }
        }
    }
}

//EditDocumentModal.razor---------------------------------------------------------------


<SaveCancelModal TItem="Document" Item="@Document" Error="@Error" ModalSize="@ModalConstants.Large"
                 CreateItem="CreateDocument"
                 UpdateItem="EditDocument">
    <div class="form-group has-success">
        <label>Title</label>
        <div>
            <InputText class="form-control" @bind-Value="@Document.Title" />
            <ValidationMessage For="@(()=>Document.Title)" />
        </div>
    </div>
    <div class="form-group has-success">
        <label>Description</label>
        <div>
            <InputText class="form-control" @bind-Value="@Document.Description" />
            <ValidationMessage For="@(()=>Document.Description)" />
        </div>
    </div>
    <div class="form-group has-success">
        <label>Link</label>
        <div>
            <InputText class="form-control" @bind-Value="@Document.Link" />
            <ValidationMessage For="@(()=>Document.Link)" />
        </div>
    </div>
</SaveCancelModal>
@code {
    [Inject] public IDocumentRepository DocumentRepository { get; set; }
    [Parameter] public Document Document { get; set; }
    [Parameter] public string Error { get; set; } = "";

    private async Task CreateDocument(Document Document)
    {
        try
        {
            this.Document = await DocumentRepository.CreateDocument(Document);
        }
        catch (Exception e)
        {
            Error = e.Message;
        }
    }

    private async Task EditDocument(Document Document)
    {
        try
        {
            await DocumentRepository.UpdateDocument(Document);
        }
        catch (Exception e)
        {
            Error = e.Message;
        }

    }
}


//Inside the Document Index Page----------------------------------
 private async Task ShowModal(Document Document, string Title)
    {
        var p = new ModalParameters();
        p.Add(nameof(EditDocumentModal.Document), Document);
        var m = Modal.Show<EditDocumentModal>($"{Title} Document", p);
        var r = await m.Result;
        if (!r.Cancelled)
        {
            await LoadDocuments();
            StateHasChanged();
        }
    }