Namespace Dmnk.Blazor.Dialogs

Provides a set of components and services to easily create and manage dialogs in Blazor applications using the MVVM pattern. Based on Dmnk.Blazor.Mvvm (and Dmnk.Icons.Core).

Example

MyHostViewModel.cs:

public class MyHostViewModel(IVmDialogController dialogController) : ObservableObject
{
    [RelayCommand]
    private async Task ShowDialog()
    {
        var vm = new MyInputDialogViewModel();
        var dlg = await dialogController.Show(
            new VmDialogParameters { Title = "Input Dialog" }, vm);
        await dlg.WaitClosed;
        if (dlg.Cancelled)
        {
            Console.WriteLine("Dialog was cancelled");
            return;
        }
        Console.WriteLine($"Dialog closed with input: {vm.InputValue}");
        dialogController.ShowSuccess($"You entered: {vm.InputValue}");
    }
}

MyInputDialogViewModel.cs:

public class MyInputDialogViewModel : DialogViewModelBase
{
    [ObservableProperty]
    private string _inputValue;
}

Program.cs:

// you need a concrete implementation of IVmDialogController/BlazorVmDialogController
// FluentVmDialogController is implemented in the Dmnk.Blazor.Dialogs.Fluent package using FluentUI
var dialogController = builder.Services.AddFluentMvvmDialogs();
dialogController.Register<MyInputDialogViewModel, MyInputDialog>();

SomeRootComponentWithInteractivity.razor:

@using Dmnk.Blazor.Dialogs.Fluent
@* again, if you don't use the fluent implementation you will have to supply your own *@

<DialogControllerProvider/>

MyHostComponent.razor:

@inherits MvvmComponentBase<MyHostViewModel>

<button @onclick="@Vm.ShowDialogCommand.Bind(this)">Show Dialog</button>

MyInputDialog.razor:

@inherits BlazorVmDialogViewFor<MyInputDialogViewModel>

<VmDialogBody>
  <input @bind="Vm.InputValue" placeholder="Enter something..." />
</VmDialogBody>

<VmDialogFooter>
  <button @onclick="@Dialog.Close">Confirm</button>
  <button @onclick="@Dialog.Dismiss">Cancel</button>
</VmDialogFooter>

@code {
    [Parameter] public override required VmDialogReference Dialog { get; set; }
    [Parameter] public override required VmDialogParameters Params { get; set; }
}

Classes

BlazorVmDialogController

A base class for an implementation of IVmDialogController. Allows registering ViewModels with the corresponding views using Register(Type, Type).

HeadlessVmDialogController

Intended for unit tests: ViewModels are registered and opened without an actual view.