Razor .Net : DialogPage, pass value back?

Hello All,

i have started creating a razor application with the Radzen NuGet package.
I'm really impressed. A lot of controls already and visually all looks very good !

I have a question regarding the dialogService. Is it possible to pass an object when closing the Service ?
this.dialogService.Close();

I want to pass my newly created Object. It would be nice to have something like this
this.dialogService.Close(newCustomer);

This way I can also know in the calling page if the Cancelled -or OK-Button is clicked.

Maybe there is another way to achieve this ?

thx, Gert

Hi Gert,

We will do our best to add return value for the dialog in our next release (next week probably).

Best Regards,
Vladimir

Thank you Vladimir !

Have dialog return values been added and if so how do you return a value from a dialog?

Thanks,
H

Yes, more info here:
https://blazor.radzen.com/dialog

Thank you. I'll assume then that you pass dialog return values through the Close(dynamic) delegate?

H

No, this is how you check what is returned. The passed result is here:

I suggest you to get the demo application and check how the dialog is working locally.

Sorry but I seem to be missing where exactly are you returning a value?

I have the following scenario.
I have a grid with a button that opens a dialog with an edit form of a row object.
After a successful submit on the close action I need to supply the grid back with the updated value.
Since you can't use a cascading parameter with the dialog and just a dictionary with params, what is the way to tackle this?
Again I seem to be missing the line of code that returns whatever kind of value to the calling component?

maybe this helps you, here is how we did it in our current project:

private async void AddLink()
{
    // show selector popup
    dynamic x = await dialogService.OpenAsync<ReferencesSelector>($"Select References",
                    new Dictionary<string, object>() { { "ParentDataChangedNotification", DataChangedAction }, { "AEDMode", AEDCallbackType.Add } },
                    new DialogOptions() { Width = "1400px"/*, Height = "Auto", Left = "calc(50% - 350px)", Top = "calc(50% - 100px)" */});

    if (x == null)
        return;
    var link = await dataService.AddLink(ParentID, (int)x, nodeType);
    listEntities.Add(link);
    StateHasChanged();
}

and in the dialog component, we return the value at a grid row selection event

// we selected a row - close dialog and return result
protected void gridRowSelect(Reference args)
{
    dialogService.Close(args.Id);
}

i'm pretty sure you can return anything you like, not just an int.

2 Likes

I'm using the Radzen Desktop app, Created a dialog for picking email addresses from a multiselect listbox, it has an add button which closes the dialog with result:

But on the other end, where I open the Dialog the desktop app generates the code with the void overload of the open dialog:

 protected async System.Threading.Tasks.Task BtnAddEmailsClick(MouseEventArgs args)
        {
            DialogService.Open<DialogSelectEmail>("DialogSelectEmail", new Dictionary<string, object>() { {"ClaimID", ClaimID} });
        }

Now I simply plan to Invoke the actual code instead of the open dialog.

Do you know what I'm doing wrong?

Regards,
Lori

The Result property of the Close dialog action should be the name of the page property that represents the selection of the multiselect e.g. ${emailAddresses}

Yes I'm doing the same, but on the other side in the page which opens the dialog, the code generator doesn't generate the correct overload for the Dialog Service.

I ended up with my custom function which I simply invoke:

public async Task OpenEmailsDialog()
        {
            var result = await DialogService.OpenAsync<DialogSelectEmail>("DialogSelectEmail", new Dictionary<string, object>() { { "ID", ID} });
            Emails = (IEnumerable<string>)result;
            diary.Recipients =  string.Join(", ", result);
        }
1 Like

This helped me a lot. It works perfectly!

Hello
I am kind a new to Radzen and also Blazor.
I am trying to implement simple Dialog which will return edited value.
I finally manage to create some very simple working test solution.
Could you tell me if it is correct implementation?

This is my MainComponent.razor

@page "/dialogTest"
@inject DialogService dialogService

<h3>Dialog Test</h3>
<RadzenButton Text="Open Dialog" ButtonStyle="ButtonStyle.Primary" Click=@ShowDialog />

<br />
<br />
<h5>Passed Text: @MainText</h5>
<h5>Returned Text: @MainNewText</h5>

@code {
    private string MainText { get; set; } = "This is my text";
    private string MainNewText { get; set; } = string.Empty;

    async Task ShowDialog()
    {
        var result = await dialogService.OpenAsync<DialogComponent>("Simple Test Dialog", new Dictionary<string, object>() { { "MainText", MainText } });

        if (result != null)
        {
            MainNewText = result;
        }
    }
}

And this is DialogComponent.razor

@inject DialogService dialogService

<div>
    <RadzenTextBox @bind-Value="MainText" />
    <RadzenButton Text="Submit New Value" Click="SubmitDialog" />
</div>

@code {
    [Parameter]
    public string MainText { get; set; } = string.Empty;

    void SubmitDialog()
    {
        dialogService.Close(MainText);
    }
}

Hi @CoRe23,

It looks OK.