Dialog Manager

The RfDialogManager adds support to show common modals like those in JavaScript: window.alert, window.confirm, and window.prompt.

When to Use

Use RfDialogManager when there is a need to ask or tell the user something straight forward. For example:

• Confirm when confirming an item should be deleted.
• Prompt when asking the user for a simple comment in during a saving process.
• Alert when you want to make sure they read something and would like it to be confirmed before going forward.
• Multi Action when you need to present the user with more than two choices, such as "Save", "Don't Save", or "Cancel", allowing for more complex decision flows than a simple confirm dialog.

When not to Use

RfDialogManager is a helpful and easy to use tool but there are several instances of when it would be better to create a custom modal. Such cases as:

• When you need validation beyond requirement.
• Need an edit form.

It takes two parts to use RfDialogManager. First the page will need to have an

<RfDialogManager />

registered somewhere that isn't inside of a overflow hidden element. Pererrabley it should be as high up the DOM tree to ensure some CSS rule doesn't affect it.

Secondly, the page will need to inject RForgeBlazor.Services.IDialogManager.cs. This interface is used to communicate between RfDialogManager and the page. This interface supports several overloads for each alert, confirm, and prompt.

Standard Request Flow

The RfDialogManager works off calling RForgeBlazor.Services.IDialogManager.cs and providing the method a callback function when completed.

Failing Callbacks

The callback you pass to Alert, Confirm, Prompt, or MultiAction runs when the user answers. If it throws, or if you supplied none for an action the user takes, the exception reaches your code instead of disappearing, and the dialog still closes cleanly: the loading state clears and the next queued dialog is shown, so one bad callback never freezes the dialog host. Handle errors inside your callback if the user should see a message.

Dialog Host Lifetime

Each RfDialogManager registers itself as the live dialog host when it starts, and the injected IDialogManager service always routes Alert, Confirm, Prompt, and MultiAction calls to the most recently registered host. The recommended setup is exactly one host placed high in the layout that lives for the life of the app. In that setup there is nothing to manage.

When the host does move, the newest instance always wins. If one RfDialogManager replaces another, for example during a layout or render tree swap, the new host takes over immediately and a later dispose of the replaced (stale) instance leaves the current registration untouched. Dialogs keep rendering through the live host no matter when the old instance is cleaned up. Disposing the currently registered host does unregister it: calls made after that point are queued and shown as soon as a new host registers.

Manual unregistration is unchanged. The no-argument Unregister() on IDialogManager still clears the registration unconditionally, so custom IDialogManager implementations and code that called it directly behave exactly as before. Only the library component's own cleanup changed: it now unregisters with its own instance identity, and the swap safety above applies whenever the injected service is the library's own DialogManager.

Setting up RForge is simple. Follow the below steps to add RForge Blazor components to your project.

1. Install the Nuget package
2. Import the namespaces (optional)
3. Register RForge services
4. Include Bulma CSS

Install the Nuget Package

RForge Blazor components are installed via Nuget. There are two packages. One for the blazor app and one for the library if any.

Blazor Project Installation

Command Line

dotnet add package RForge.Blazor

Package Manager Console

Install-Package RForge.Blazor

Library Project Installation

This is optional but may be useful if you want to use common enums across the backend and frontend.

Command Line

dotnet add package RForge.Abstractions

Package Manager Console

Install-Package RForge.Abstractions

Import the namespaces

To simplify namespacing while using RForge, the package is designed with most all components sitting within the root RForge namespace.

You may want to include the following namespaces in your _import.razor for ease of use.

@using RForgeBlazor
@using RForgeBlazor.Services
@using RForge.Abstractions

Namespace	Purpose
RForgeBlaozr	Houses all of the blazor components.
RForgeBlaozr.Services	Houses interfaces you may need to communicate with certain components.
RForgeBlaozr.Abstractions	Common enums used through out the components.

Register RForge Services

In order for some components to work they must first have their services registered.

Open up Program.cs and add the following line before the var app = builder.Build();.

using RForgeBlazor;
//...
builder.Services.AddRfForgeBlazorServices();
//...
var app = builder.Build();
    

Include Bulma CSS

RForge makes use of Bulma CSS to stylize the components. Add / install Bulma and add the CSS file to the head. Link to download: Bulma releases.