Why does a [BindProperty] require an EventCallback?

Question

Hi all;

I have an inner component that has the following in it:

public partial class Address
{
    [BindProperty]
    [Parameter]
    public MapAddressDto? Value { get; set; }

    // lots of other stuff
}

And then in the outer razor file I have:

<Address 
    @ref="_addressElement"
    @bind-Value="@Model.Address"
    Selected="OnAddressSelected">
</Address>

I got to run and when it loads that page I get this exception:

InvalidOperationException: Object of type 'LouisHowe.web.Shared.Address' does not have a property matching the name 'ValueChanged'.
Microsoft.AspNetCore.Components.Reflection.ComponentProperties.ThrowForUnknownIncomingParameterName(Type targetType, string parameterName)
...
Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.<RunAsync>g__Awaited|0_0(Task task, TagHelperExecutionContext executionContext, int i, int count)
LouisHowe.web.Pages.Pages__Host.<ExecuteAsync>b__23_1() in _Host.cshtml
+
    <component type="typeof(App)" render-mode="ServerPrerendered" param-InitialState="initialTokenState" />
Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperExecutionContext.SetOutputContentAsync()
LouisHowe.web.Pages.Pages__Host.ExecuteAsync()
...

So I added EventCallback<MapAddressDto> ValueChanged

public partial class Address
{
    [BindProperty]
    [Parameter]
    public MapAddressDto? Value { get; set; }

    //[Parameter]
    public EventCallback<MapAddressDto> ValueChanged { get; set; }

    // lots of other stuff
}

And now it runs fine. I looked at some of the components in DevExpress' Blazor library and they appear to always have a ValueChanged event to go with every Value property. So I'm guessing that a [BindProperty] requires a matching EventCallback.

Does it? And why?

thanks - dave

Answer 1

Hi,@David Thielen,

As the document mentioned:

Component parameters permit binding properties of a parent component with @bind-{PROPERTY} syntax, where the {PROPERTY} placeholder is the property to bind.

....

By convention, the EventCallback<TValue> for the parameter must be named as the component parameter name with a "Changed" suffix. The naming syntax is {PARAMETER NAME}Changed, where the {PARAMETER NAME} placeholder is the parameter name

......

<ChildBind @bind-Year="year" /> is equivalent to writing:<ChildBind @bind-Year="year" @bind-Year:event="YearChanged" />

In your case, you called @bind-Value ,so a parameter named ValueChanged type of EventCallback is required

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

RuikaiFeng