PSC.Blazor.Components.Modals 6.0.5

Modals for Blazor

This component helps you to create modal windows and modal popup in your Blazor application.

Install

In your index.html you have to add the style in the head of the page and the script at the bottom like

<link href="_content/PSC.Blazor.Components.Modals/themes/default.css" rel="stylesheet" />
<script src="_content/PSC.Blazor.Components.Modals/js/pscmodals.js"></script>

In .NET6 in the Program.cs you have to add those lines

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

The ModalsService manages the list of windows across the application and ModalService is the component for a single window to inject in your page.

Then, in your MainLayout.razor you have to place the container for the modals adding

<ModalContainer />

So, the component it is ready to use. In the Razor page when you want to use this controller, you have to inject the IModalService adding

@inject IModalService ModalService

In your _Imports.razor it could be required to add the following lines:

@using PSC.Blazor.Components.Modals
@using PSC.Blazor.Components.Modals.Enums
@using PSC.Blazor.Components.Modals.Interfaces
@using PSC.Blazor.Components.Modals.Models

Use embedded modal

In the component the embedded modal allow you to show a message and wait for the interaction from the user. You can create a simple box with a message and an Ok button with the following code:

await ModalService.ShowDialogAsync(new DialogOptions
    {
        MainText = "You have a new message",
        SubText = "Check your inbox for more information",
        CancelText = "",
        IconElements = SVGIcons.Message,
        StatusColor = "#1e293b"
    });

IconElement is a SVG image and for that you can use my other component PSC.Blazor.Components.Icons.

If you want to display a message box with 2 buttons (for example Ok and Cancel), the code is the following

var result = await ModalService.ShowDialogAsync(new DialogOptions
    {
        MainText = "Are you sure?",
        SubText = "Please note this can not be undone",
        IconElements = SVGIcons.Question_mark,
        StatusColor = "#ff0000"
    });

If you want to display your own Razor component in the modal, you can use the following code:

private ModalOptions modalOptions = new ModalOptions { Size = ModalSize.Large, Draggable = true };

var component = new RenderComponent<YourRazorComponent>();
var result = await ModalService.ShowAsync("This is a Title", component, modalOptions);

Options