Blazor Dialog

Dialog component as a service for Blazor!

Features

• Call a dialog procedurally as a service and await for the result !
• Open any component as a dialog.
• Can use dialogs as normal components (if you don't want to use as a service).
• Build-in modal dialog with optional helper components (Header, Body, Footer).
• Option to use completely custom markup/css (without using the build-in opinionated css and html).

Samples / Demo

You can find code samples and demos here.

Installation

1. Add the nuget package in your Blazor project

> dotnet add package BlazorDialog

OR

PM> Install-Package BlazorDialog

Nuget package page can be found here.

2. Add the following line in your Blazor project in either Startup.cs (blazor server-side) or Program.cs (blazor wasm)

- Blazor server-side: Startup.cs

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        // other code
        services.AddBlazorDialog();
        // other code
    }
}

- Blazor wasm: Program.cs

public class Program
{
    public static async Task Main(string[] args)
    {
       // other code
        builder.Services.AddBlazorDialog();
        // other code
    }
}

3. Add the following line in your _Imports.razor

@using BlazorDialog

4. Add the following line in your MainLayout.razor or App.razor (must be rendered once in a central spot)

<DialogOutput/>

5. Reference the css file

Add the following static file references in your _Host.cshtml (server-side blazor) or in your index.html (client-side blazor). Make sure that there is a call to app.UseStaticFiles(); in your server project's Startup.cs.

<link href="_content/BlazorDialog/styles.min.css" rel="stylesheet" />

<script src="_content/BlazorDialog/blazorDialog.min.js"></script>

⚠️ Breaking changes ⚠️

Upgrading from 3.2 to 4.0

• It is required to add a static file reference to the new javascript file.

Upgrading from 0.3 to 1.0

• Removed PreventShow and PreventHide from OnBeforeShow and OnBeforeHide respectively. Too many cases where infinite loops could happen.

Release Notes

4.0

• A new javascript file is required to be loaded (see breaking changes).
• New feature: Allow closing the dialog with a key press (escape by default).

3.2

• Fix for a bug when the same dialog is presented consecutively, never returning result. Contributed by thanoskapsalis.

3.1

• Added ForceAllowNavigation and ForcePreventNavigation methods to the Dialog component to allow/prevent navigation regardless of the PreventNavigation parameter.

3.0

• Migrate to .NET 8.0
• Add PreventNavigation option to prevent navigation when dialog is open.

2.3

• Expose dialog options as cascading parameter when using ComponentAsDialog.

2.2

• Fix for showing the same dialog with the dialog service more than once in the same async function.
• Upgrade MS packages dependecy to 6.0.26

2.1

• Minor fix for when returning null dialog results to non nullable result types.

2.0

• New feature: ShowComponentAsDialog. Check demo app for examples.
• Upgraded target framework to 6.0

1.6

• Added a new size option: ExtraExtraLarge.

1.5

• Added css class parameter to all helper components (header/body/footer).

1.4

• Added css class parameter to dialog component.

1.3

• Added base z-index parameter to dialog component.

1.2

• Added fullscreen mode.

1.1

• Added support for dialog-in-dialog.

1.0

• Fixed an infinite loop bug with OnBeforeShow event.
• Fixed css bugs.
• Removed PreventShow and PreventHide from OnBeforeShow and OnBeforeHide respectively. Too many cases where infinite loops could happen.

0.3

• Upgrated to 3.1.
• Added new helper components: DialogHeader, DialogBody, DialogFooter

0.1

• Initial release.