BlazorModals 1.0.0.1

Package install Install-Package BlazorModals -Version 1.0.0.1

Provide the service for injection:

builder.Services.AddScoped<IModalService, ModalService>();

_Imports.razor

@using BlazorModals.Models
@using BlazorModals.Views.Components

Wrap your layout with the Modal Launcher component

@inherits LayoutComponentBase
<ModalLauncher>
   ...
</ModalLauncher>

Basic Modal Usage:

<button @onclick="()=>modal.ShowModal()" 
        class="btn btn-primary" >Show Modal</button>

<Modal @ref="@modal" OnClose="Modal1Closed">
    <MyModalContent />
</Modal>

@code {
    private Modal modal;
    private void Modal1Closed(ModalCloseState modalCloseState) 
        => Console.WriteLine($"ModalCloseState : {modalCloseState}");
}

Template Modal Usage:

<ul class="list-group">
    @foreach (var someModel in someData)
    {
        <li @key=someModel.Id class="d-flex flex-row list-group-item">
            <div class="col-2">  @someModel.Name</div>
            <button @onclick="()=>OpenModal(someModel)" 
                    class="btn btn-primary btn-sm">edit</button>
        </li>
    }
</ul>

<TemplateModal @ref="@modal" 
               TContent="SomeDataModel" 
               OnClose="ModalClosed" 
               Background="#0000ff77" 
               BlurPixels="3" >
    <SomeModelEditForm SomeData="@context" />
</TemplateModal>

@code {
    private TemplateModal<SomeDataModel> modal;
    private SomeDataModel currentModel;
    private IEnumerable<SomeDataModel> someData;

    protected override void OnInitialized() 
        => someData = LoadData();  

    private void OpenModal(SomeDataModel data)
    {
        currentModel = data;
        var temp = new SomeDataModel();
        CopyModel(data, temp);
        modal.ShowModal(temp);
    }
    
    private void ModalClosed(ModalResult<SomeDataModel> modalResult)
    {
        if(modalResult.CloseState == ModalCloseState.Ok)
        {
            CopyModel(modalResult.Value, currentModel);
            StateHasChanged();
        }            
    }

    private void CopyModel(SomeDataModel source, SomeDataModel dest)
    {
        // use a clone method or copy the properties.
    }
}

The Buttons

<ModalCloseButton>Close</ModalCloseButton>
<ModalOkButton>Save changes</ModalOkButton>

They capture styling:

<ModalCloseButton type="button" class="btn btn-secondary" aria-label="Close">Close</ModalCloseButton>
<ModalOkButton type="button" class="btn btn-primary">Save changes</ModalOkButton>

Modal Parameters

<Modal @ref="@modal" 
             Background="#0088ff77" 
             BlurPixels="3" 
             AllowBackgroundClick="false">