Blazor two-way binding with readonly data types

Question

I am trying to take advantage of Entity Framework Core 8's new complex properties feature for my webapp. I've made my Address model, which used to be a full entity with its own table, into a readonly record struct that exists as a complex property of several other models, for example Customer.

I have a Blazor component meant to be included in create/edit forms called AddressSubForm. It contains all the form fields necessary for an Address. The problem is, where before I could simply @bind-Address="Customer.Address", now that Address is readonly it won't be able to change the subproperties of the Address to reflect user input. That in itself isn't a problem, it's not hard or expensive to create a new Address using the with syntax for creating new records by modifying an old one. But Blazor or Entity Framework (it's not clear to me which) is having trouble tracking the changes to Address now, and it's saving null for all the Address columns to the database.

My most recent attempt looks like this:

@using System.Linq.Expressions
<FormItem Field="Address">
    <Template>
        <label for="Address" class="k-label k-form-label">Address</label>
        <div id="Address" class="k-form-field-wrap">
            <p>
                <label>Street Address</label>
                <TelerikTextBox @bind-Value="Street1"
                                OnChange="async value => { Address = Address with { Street1 = (string)value }; await AddressChanged.InvokeAsync(); }" />
            </p>
            <p>
                <label>Street Address (line 2)</label>
                <TelerikTextBox @bind-Value="Street2"
                                OnChange="async value => { Address = Address with { Street2 = (string)value }; await AddressChanged.InvokeAsync(); }" />
            </p>
            <!-- ... -->
        </div>
    </Template>
</FormItem>

@code {
    [Parameter] public Address Address { get; set; }
    [Parameter] public EventCallback<Address> AddressChanged { get; set; }
    [Parameter] public Expression<Func<Address>> AddressExpression { get; set; }

    private string Street1 { get; set; } = string.Empty;
    private string Street2 { get; set; } = string.Empty;
    // ...

    protected override void OnInitialized()
    {
        Street1 = Address.Street1;
        Street2 = Address.Street2;
        // ...
    }
}

How can I change this component so that it properly keeps track of any changes made to the Address complex property and allows it to be saved to the database?

Answer 1

I was able to solve this problem by passing a Func to this component that sets the Address property to the new value. Because of this, I no longer need two-way binding.

In AddressSubForm.razor:

<FormItem Field="Address">
    <Template>
        <label for="Address" class="k-label k-form-label">Address</label>
        <div id="Address" class="k-form-field-wrap">
            <p>
                <label>Street Address</label>
                <TelerikTextBox @bind-Value="Street1"
                                OnChange="value => Address = SetAddress(Address with { Street1 = (string)value })" />
            </p>
            <p>
                <label>Street Address (line 2)</label>
                <TelerikTextBox @bind-Value="Street2"
                                OnChange="value => Address = SetAddress(Address with { Street2 = (string)value })" />
            </p>
            <!-- ... -->
        </div>
    </Template>
</FormItem>

@code {
    [Parameter] public Address Address { get; set; }
    
    [Parameter] public Func<Address, Address> SetAddress { get; set; }

    private string Street1 { get; set; } = string.Empty;
    private string Street2 { get; set; } = string.Empty;
    // ...

    protected override void OnInitialized()
    {
        Street1 = Address.Street1;
        Street2 = Address.Street2;
        ...
    }
}

In AddCustomer.razor:

<AddressSubForm Address="Customer.Address"
                SetAddress="address => Customer.Address = address"/>