ModalEditForm.razor

@inherits ComponentBase
@inject IJSRuntime JSRuntime

<div class="modal" tabindex="-1" role="dialog" id="@Id" @attributes="Attributes">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <EditForm EditContext="@EditContext" Model="@Model" OnSubmit="@OnSubmit" OnInvalidSubmit="@OnInvalidSubmit" OnValidSubmit="@OnValidSubmit">
                @if (!(Validators is null))
                {
                    @Validators
                }

                <div class="modal-body">
                    @Body
                </div>
                @if (!(Footer is null))
                {
                    <div class="modal-footer">
                        @Footer
                    </div>
                }
            </EditForm>
        </div>
    </div>
</div>

@code {
    [Parameter]
    public string Id { get; set; } = "modal";

    [Parameter]
    public string Title { get; set; } = string.Empty;

    [Parameter] 
    public object Model { get; set; }

    [Parameter] 
    public EditContext EditContext { get; set; }

    [Parameter]
    public RenderFragment Validators { get; set; }
    
    [Parameter]
    public RenderFragment Body { get; set; }

    [Parameter]
    public RenderFragment Footer { get; set; }

    [Parameter] 
    public EventCallback<EditContext> OnSubmit { get; set; }

    [Parameter]
    public EventCallback<EditContext> OnValidSubmit { get; set; }

    [Parameter]
    public EventCallback<EditContext> OnInvalidSubmit { get; set; }

    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> Attributes { get; set; } = new Dictionary<string, object>();

    public async Task ShowAsync()
        => await JSRuntime.InvokeVoidAsync("showModal", Id).ConfigureAwait(false);

    public async Task HideAsync()
        => await JSRuntime.InvokeVoidAsync("hideModal", Id).ConfigureAwait(false);
}