Blazorise ModalProvider component

Programatically instantiate modals with custom content.

The modal provider component provides an abstraction on top of Blazorize's Modal component, enabling you to programatically instantiate modals with custom content/components.

Service Usage

Usage

You need to place <ModalProvider> somewhere in your application razor code. It can be placed anywhere, but a good approach is to place it in App.razor like in the following example.

A IModalService will be registered by Blazorise providing you with an API to programatically instantiate modals. Examples are provided further below. 

<Router AppAssembly="typeof(App).Assembly">
    <Found>...</Found>
    <NotFound>...</NotFound>
</Router>

<ModalProvider />

The IModalService

The IModalService is an important feature that lets you control <ModalProvider> instantiation. You are provided with various overloads of Show() to instantiate the <Modal> to your liking. This will return a ModalInstance that represents the <Modal> you've instantiated with all of its configuration. You may also use the provided Hide() method to close modals.

Options

You may provide options to <ModalProvider> globally by setting them on the <ModalProvider> component itself. 
<Router AppAssembly="typeof(App).Assembly">
    <Found>...</Found>
    <NotFound>...</NotFound>
</Router>

<ModalProvider UseModalStructure Animated Size="ModalSize.Fullscreen" />
Optionally you can override these when instantiating a modal through the ModalService usage. 
<Button Clicked="InstantiateModal"></Button>

@code {
    [Inject] public IModalService ModalService { get; set; }

    public Task InstantiateModal()
    {
        return ModalService.Show<ModalServiceOptionsExample>( "Override Options Example", new ModalInstanceOptions()
        {
            Animated = false,
            UseModalStructure = false,
            Size = ModalSize.Small
        } );
    }
}

Closing Modals

<ModalProvider> will only keep track of the modals that have been instantiated by itself.

To close a Modal:

  • You can use Blazorise's <CloseButton> component, which automatically knows how to close the currently opened <Modal>.
  • Use the provided IModalService and call IModelService.Hide(), this will close the last opened <Modal> tracked by the <ModalProvider>.
  • You may keep track of the ModalInstance and call IModalService.Hide(modalInstance), this will close the provided instance.
  • You may keep track of the ModalInstance and call modalInstance.ModalRef.Hide().

Stateful Instantied Modals

<ModalProvider> can keep the state of the modals even after they have been closed.

To do this you will need to:

  • Set Stateful to true in the ModalProvider or in the ModalInstanceOptions. The reason why you need to explicitly opt-in for this feature is because the instances you open will be kept in memory, and you should be mindful that you need to properly manage these.
  • Provide a unique Id so the instance can be tracked and reopen. This can be set in ModalInstanceOptions.ElementId. Optionally you may keep track of the ModalInstance returned by the IModalService.Show() method to reopen the same instance.
  • Control how the modal renders, by setting the RenderMode. If you'd like the state to be kept, use: ModalRenderMode.Default or ModalRenderMode.LazyLoad.

Examples

Custom component

Instantiates a modal with a counter example taking in the counter number from the provided parameter. ModalService.Show provides various overloads you can use to instantiate your custom content. 
<Button Color="Color.Primary" Clicked="ShowCounter">Show Counter</Button>

@code {
    [Inject] public IModalService ModalService { get; set; }

    public Task ShowCounter()
    {
        Random random = new();
        var newValue = random.NextInt64( 100 );
        return ModalService.Show<CounterExample>( "My Custom Content!", x => x.Add( x => x.Value, newValue ) );
    }
}

Render fragment

<Button Color="Color.Primary" Clicked="ShowRenderFragment">Show Custom Structure</Button>

@code {
    [Inject] public IModalService ModalService { get; set; }

    private RenderFragment customFragment => __builder =>
    {
        <Paragraph>This content is provided by a custom RenderFragment</Paragraph>
    };

    public Task ShowRenderFragment()
    {
        return ModalService.Show( "My Custom RenderFragment!", customFragment );
    }
}

Custom structure

If you want to customize the modal structure, you can do so, by setting UseModalStructure to false and providing the structure inside the custom content you are instantiating. You may do this by providing your custom html or by using the internal Modal components.

  • <ModalHeader>
  • <ModalBody>
  • <ModalFooter>

<Field Horizontal>
    <FieldLabel ColumnSize="ColumnSize.IsFull.OnTablet.Is2.OnDesktop">User Name</FieldLabel>
    <FieldBody ColumnSize="ColumnSize.IsFull.OnTablet.Is10.OnDesktop">
        <TextInput @bind-Value="userName"></TextInput>
    </FieldBody>
</Field>

<Button Color="Color.Primary" Clicked="ShowCustomStructure">Show Custom Structure</Button>

@code {
    [Inject] public IModalService ModalService { get; set; }
    private string userName = "John Doe";

    public Task ShowCustomStructure()
    {
        return ModalService.Show<CustomStructureModalExample>( parameters => parameters.Add( x => x.UserName, userName ), new ModalInstanceOptions() { UseModalStructure = false } );
    }
}

Interaction

Since you can pass in parameters into your component, you can take advantage of this to interact with your <Modal>. A common example, might be a generic formulary where the validation and success logic are not necessarily known by this component and are provided from "outside". The following example, setups a simple formulary showcasing this. 

<Paragraph>
    @formularyMessage
</Paragraph>
<Button Color="Color.Primary" Clicked="ShowFormulary">Show</Button>

@code {
    [Inject] public IModalService ModalService { get; set; }

    private string formularyMessage = "";

    public Task ShowFormulary()
    {
        formularyMessage = string.Empty;
        return ModalService.Show<FormularyModalExample>( x =>
        {
            x.Add( x => x.OnValidate, FormularyValidate );
            x.Add( x => x.OnSuccess, FormularySuccess );
        },
        new ModalInstanceOptions()
            {
                UseModalStructure = false
            } );
    }

    private Task<bool> FormularyValidate( Employee employee )
        => Task.FromResult( !string.IsNullOrWhiteSpace( employee.FirstName ) && !string.IsNullOrWhiteSpace( employee.Email ) );

    private Task FormularySuccess( Employee employee )
    {
        formularyMessage = $"Employee : {employee.FirstName} saved successfully!";
        return InvokeAsync( StateHasChanged );
    }
}

Stateful modal

<Button Color="Color.Primary" Clicked="ShowStateful">Show Stateful</Button>

@code {
    [Inject] public IModalService ModalService { get; set; }

    public Task ShowStateful()
    {
        return ModalService.Show<CounterExample>( "My Stateful content", new ModalInstanceOptions()
        {
            Stateful = true,
            ElementId = "Stateful",
            RenderMode = ModalRenderMode.LazyLoad
        } );
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page