Returning complex objects from Modal

[SteveTeece]

I've created a Modal which is bound to a complex object (an Address class called AddressModel). The Modal displays the custom form correctly, allows me to enter data, and when I submit the form and close the modal, I am able to see (in the debugger) the complex class is being returned as an IModalReference.

I've tried to explicitly cast the returned data into a new AddressModel without success. If I call ToString() on the result, I get the correct data returned, but I want to access each individual property.

My question is how do I access the properties of the complex class from the returned data? The properties are things like Street Name, Street Number, City etc.

Thanks in advance
Steve.

[chrissainty]

Hi Steve,

Can you provide some code showing how you're attempting to do things currently?

[SteveTeece]

Hi Chris,

Thanks for responding so quickly.

Here is some of the code I currently have. Note I will remove a lot of the XAML / Razor display code for the sake of brevity, but leave (what I think) are the important bits.

First, the Address Model that I am binding the contents of the modal to:

namespace JustizLib.Models
{
    [Table("Addresses")]
    public class AddressModel
    {
        public int Id { get; set; }
        public string? UnitNumber { get; set; } = string.Empty;
        public string? BuildingName { get; set; } = string.Empty;

        [Required]
        public string StreetNumber { get; set; } = string.Empty;

        [Required]
        public string StreetName { get; set; } = string.Empty;

        [Required]
        public string City { get; set; } = string.Empty;

        public States State { get; set; } = States.NSW;

        [Required]
        public string Postcode { get; set; } = string.Empty;
        public string Country { get; set; } = "Australia";
        public AddressType AddressType { get; set; } = AddressType.Residential;


        public string SingleLineAddress()
        {
            string output = "";
            if (!string.IsNullOrWhiteSpace(UnitNumber))
            {
                output += $"{UnitNumber}/";
            }

            output += $"{StreetNumber} {StreetName}, {City} {State} {Postcode}";

            if (!string.IsNullOrWhiteSpace(Country) && this.Country != "Australia")
            {
                output += $", {Country}";
            }

            return output;
        }

        public override string ToString()
        {
            return this.SingleLineAddress();
        }
    }
}

Now the Razor control that I use to populate the Modal:

<EditForm Model="Model" OnValidSubmit="@HandleValidSubmit" >
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="col-10 control-section"> @*Take up half the screen for the address, over several lines*@
        <div class="row control-wrapper"> @*First Address Row*@
            <div class="col-3 control-wrapper"> @*Unit Number*@
                <SfTextBox Placeholder='Unit No.'
                    FloatLabelType='@FloatLabelType.Auto'
                    @bind-Value="Model.UnitNumber">
                </SfTextBox>
            </div>

            <div class="col-9 control-wrapper"> @*Building Name*@
                <SfTextBox Placeholder='Building Name'
                    FloatLabelType='@FloatLabelType.Auto'
                    @bind-Value="Model.BuildingName">
                </SfTextBox>
            </div>
        </div>
        
        <div class="row control-wrapper"> @*Second Address Row*@
            <div class="col-3 control-wrapper"> @*Street Number*@
                <SfTextBox Placeholder='Street No.'
                    FloatLabelType='@FloatLabelType.Auto'
                    @bind-Value="Model.StreetNumber">
                </SfTextBox>
            </div>

            <div class="col-9 control-wrapper"> @*Street Name*@
                <SfTextBox Placeholder='Street Name'
                    FloatLabelType='@FloatLabelType.Auto'
                    @bind-Value="Model.StreetName">
                </SfTextBox>
            </div>
        </div>
        
        <div class="row control-wrapper"> @*Third Address Row*@
            <div class="col-7 control-wrapper"> @*City*@
                <SfTextBox Placeholder='City'
                    FloatLabelType='@FloatLabelType.Auto'
                    @bind-Value="Model.City">
                </SfTextBox>
            </div>

            <div class="col-2 control-wrapper"> @*State FIeld*@
                <SfDropDownList TValue="string" 
                    TItem="string" 
                    FloatLabelType='@FloatLabelType.Auto'
                    Placeholder="State" 
                    DataSource="@states"/>
            </div>

            <div class="col-3 control-wrapper"> @*Postcode*@
                <SfTextBox Placeholder='Postcode'
                    FloatLabelType='@FloatLabelType.Auto'
                    @bind-Value="Model.Postcode">
                </SfTextBox>
            </div>
        </div>
        
        <div class="row control-wrapper"> @*Fourth Address Row*@
            <div class="col-9 control-wrapper"> @*Country*@
                <SfTextBox Placeholder='Country'
                    FloatLabelType='@FloatLabelType.Auto'
                    @bind-Value="Model.Country">
                </SfTextBox>
            </div>

            <div class="col-3 control-wrapper"> @*Address Type FIeld*@
                <SfDropDownList TValue="string" 
                    TItem="string" 
                    FloatLabelType='@FloatLabelType.Auto'
                    Placeholder="Address Type" 
                    DataSource="@addressTypes"/>
            </div>

        </div>
        
    </div>
    <BSButton IsSubmit="true" OnClick="HandleValidSubmit" Color="BSColor.Primary" Class="my-2" >Save</BSButton>
    <BSButton OnClick="Cancel" Class="my-2 mx-2">Cancel</BSButton>
</EditForm>
@code{

    [CascadingParameter]
    BlazoredModalInstance _modal { get; set; } = default!;

    private AddressModel Model { get; set; } = new();
    private List<string> states { get; set; } = new();
    private List<string> addressTypes { get; set; } = new();



    protected override void OnInitialized()
    {
        // Populate State dropdown control
        foreach (string s in Enum.GetNames(typeof(States)))
        {
            states.Add(s);
        }

        // Populate Address Type dropdown
        foreach (string a in Enum.GetNames(typeof(AddressType)))
        {
            addressTypes.Add(a);
        }
    }

    private async Task HandleValidSubmit() => await _modal.CloseAsync(ModalResult.Ok(Model));
    private async Task Cancel() => await _modal.CancelAsync();

}

Here is the "edited" control that I want to call the modal from, and return an address as the result of the modal. Note this is a complex control, and I have removed a lot of the XAML. All the XAML and bindings are working as expected.

@inject IBlazorStrap blazorstrap
@inject NavigationManager _nav

<EditForm Model="Model" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    
    <SfTab CssClass="default-tab border gap-1" style="padding: 2px" 
        OverflowMode="@OverflowMode.Extended" 
        HeaderPlacement="HeaderPosition.Top"
        @bind-SelectedItem="@selectedTab"
        LoadOn="ContentLoad.Init">

        <TabAnimationSettings>
                <TabAnimationPrevious Effect="AnimationEffect.None"></TabAnimationPrevious>
                <TabAnimationNext Effect="AnimationEffect.None"></TabAnimationNext>
        </TabAnimationSettings>
    
        <TabItems>
    
             @* Personal Details Tab *@
             <TabItem>
                 <HeaderTemplate>Personal Details</HeaderTemplate>
                 <ContentTemplate>
                     <div style="height:500px;">

                            // Display XAML removed for brevity 
                       </div>
                              <div class="col-6 control-wrapper">
                                <BSButton Color="BSColor.Primary" @onclick="ProcessAddress" Class="my-2">Add New Address</BSButton>
                              </div>
                              
                         </div>
                     </div>
                    
                     <NextPreviousButtonsControl 
                         OnNextButtonClicked="@NextTab"
                         OnPreviousButtonClicked="@PreviousTab" />
                 </ContentTemplate>
             </TabItem>

           // Additional tabs and XAML: removed for brevity
        
    </SfTab>


    <div class="row float-end">
        <button type="submit" class="btn btn-primary float-end">@buttonText</button>
    </div>
</EditForm>


@*Control Style
*@<style>
    .e-checkbox-wrapper {
        margin-top: 18px;
    }
</style>

@code {
    [Parameter]
    public ParticipantModel Model { get; set; } = new();

    [Parameter]
    public int Id { get; set; }

    [Parameter]
    public EventCallback OnSubmit { get; set; }

    [CascadingParameter]
    public IModalService Modal { get; set; } = default!;

    private AddressModel newAddress { get; set; } = new();

    string buttonText = "Save";
    int selectedTab;


    private void HandleValidSubmit()
    {
        OnSubmit.InvokeAsync();
    }

    private void NextTab()
    {
        selectedTab++;
    }

    private void PreviousTab()
    {
        selectedTab--;
    }

    private async Task ProcessAddress()
    {
        var addressModal = Modal.Show<AddressControl>("Add Address");
        var result = await addressModal.Result;

        if (result.Cancelled)
        {
            // Cancel button clicked
        }
        else if (result.Confirmed)
        {
            // This is where I want to extract the address data from the return of the modal.
 
        }
    }
}

Thanks again for your help. I look forward to your reply.

Steve.

[SteveTeece]

I've created a work-around for this issue...

I take the complex object, and turn it into a comma separated string, which I can then get from result.Data. Then, in the parent component, I reverse the process and turn the string back into an object.

I'm sure there would have to be a better way than this, but it's working for the moment.

[csharpnoob41]

Thanks for this workaround. This is the route I went as well, worked like a charm.

[jasperzeinstra]

I was also looking for an example on how to do this. I resolved it differently. Instead of making the return value a string, I keep it as an object. And then I check if the data is of that type. So in your example that would look something like this:

private async Task ProcessAddress()
    {
        var addressModal = Modal.Show<AddressControl>("Add Address");
        var result = await addressModal.Result;

        if (result.Cancelled)
        {
            // Cancel button clicked
        }
        else if (result.Confirmed)
        {
            // This is where I want to extract the address data from the return of the modal.
            if (result.Data is AddressModel addressModelResult)
            {
                // Do your stuff here with data like:
                // addressModelResult.StreetName 
            }
        }
    }

[SteveTeece]

@jasperzeinstra I love this solution. Much more elegant than converting to a JSON or comma separated string then back again.

This solution should be added to the documentation as an example. You should make a pull request against the docs to include this.