feat: allow to pass parameters to dialogs

[MarvinKlein1508]

🙋 Feature Request

I'm writing this feature request as a result of my discussion, which can be found here: #2443

The issue here is to collect and exchange feedback regarding the DialogService within this library. In my opinion, the current way dialogs work isn't very useful in many cases because their use case only fits in very specific ways.

😯 Current Behavior

Currently, you can only bind to components that implement either IDialogContentComponent or IDialogContentComponent<T>. In addition, you cannot pass additional parameters to the dynamic component. You either need to add them to your model or create custom parameters that inherit from DialogParameters and cast them within your component every time. Both ways result in much boilerplate code, which is hard to maintain.

💁 Possible Solution

I would like to be able to use this kind of syntax:

private Modal _editModal = default;

protected override async Task ShowEditModalAsync(Customer? input = null)
{
// Provide parameters as dictionary
    var parameters = new Dictionary<string, object>
    {
        { nameof(CustomerForm.Model), input ?? new() },
        { nameof(CustomerForm.OnCancel), EventCallback.Factory.Create(this, _editModal.HideAsync) }, // Bind to modal close if you want
        { nameof(CustomerForm.OnSave), EventCallback.Factory.Create<Customer>(this, SaveAsync) } // Bind to other methods which has an input parameter
    };

    string modalTitle = input is null ? "New customer" : "Edit customer";

    await _editModal.ShowAsync<CustomerForm>(modalTitle, parameters: parameters);
}

The component itself should then create an instance of the provided component and fill all parameters. It would be even better if I could pass functions from the dialog itself as parameters.

🔦 Context

I want to pass additional parameters from outside to my dynamic component. For example, some sort of filters or rules for displaying content within the component itself.

In addition, I want to be able to use any component as a dynamic component for a dialog without having to implement the IDialogContentComponent or IDialogContentComponent interfaces every time.

💻 Examples

Let's say I have a component that displays a user list and allows me to filter them by name. So, I provide a filter class named UserFilter, which contains both age and username attributes.

Now, I have certain views. The first view should always display users above the age of 18. The other one can be changed according to the user's needs. So, I don't want the user to change the value for the age filter in view 1.

In Blazor, I would achieve this like this:

View 1:

<UserSearch Filter="MyFilter" AllowToChangeAge="false" />

View 2:

<UserSearch Filter="MyFilter" AllowToChangeAge="true" />

The alternative would be to apply this property to my filter class, but I don't want to change my filter model. In some cases, I cannot change the class at all since I cannot modify the original source files.

[vnbaaij]

Hi,

Because of vacation period, this will not see much activity in the coming weeks from my side.

[MarvinKlein1508]

@vnbaaij don't worry. I just wanted to sort this one out of my large post because this is really important to me. Have a nice vacation! :)

[ZnowuJa]

I support this request strongly.
This would be very useful.

Nowadays I create separated class just for combining few objects from page from which I open Dialog. But I have more and more features/forms in my app so maintenance is getting harder.

[MarvinKlein1508]

Hi @vnbaaij

I've done some research on this. In my opinion the biggest downside of the FluentDialog is the direct implementation of the Content property.

This limits the use of this component by a lot. Since v5 will introduce a lot of breaking changes anyways I would like to suggest to get rid of the TData implementation all together. Instead of the content you should allow the user to pass a Dictionary<string, object?> as paramters for the specified generic component. Those parameters should then be bound to the DynamicComponent which is currently only passing a Content parameter.
See:

fluentui-blazor/src/Core/Components/Dialog/FluentDialog.razor

Line 31 in a83077b

<DynamicComponent Type="@Instance.ContentType" Parameters="Instance.GetParameterDictionary()" />

&

fluentui-blazor/src/Core/Components/Dialog/Services/DialogInstance.cs

Line 22 in a83077b

{

This will allow the user to pass as many parameters as they want to the generic component which allows for much more complex implementations.

Let me think what you think about this approach.

[vnbaaij]

@dvoituron is already working on that for v5 (code is in the dev-v5 branch)...

• Any component can be displayed (no need to implement an interface)
• Any type can be passed to any [Parameter] property (e.g. Name and Age)

Example call:

var parameters = new DialogParameters(factory =>
{
    factory.Title = "My title";

    factory.Content.Add(nameof(SimpleDialog.Name), "John");
    factory.Content.Add(nameof(SimpleDialog.Age), 20);

    factory.OnStateChange = (e) =>
    {
   
     Console.WriteLine($"Dialog state changed: {e.State}");
    };
});
        
var dialog = await DialogService.ShowDialogAsync<SimpleDialog>(parameters);
var result = await dialog.Result;

peek_2.2.mp4

[MarvinKlein1508]

@vnbaaij you guys are my heros! I can't wait to get my hands on this!

[vnbaaij]

We aim to please! But getting this out will probable still take a while...

[MarvinKlein1508]

Yea sure! At least I know that the end will come! :)

[MarvinKlein1508]

I've taken another look on the draft by @dvoituron . I must say, I really really like this factory approach! Good job.