Document EventCallback

[rpc-scandinavia]

Under "Component parameters" (Data binding), I don't see an example on how the parent component get its variable updated when it is changed IN the child component. The example shows the change being made in the parent component, all the child component do is showing its own variable, and that works without "bind".

---

Dokumentinformasjon

⚠ Ikke rediger denne delen. Den kreves for koblingen docs.microsoft.com ➟ GitHub-problem.

• ID: 11a64802-62dc-40e0-034f-fcee55f31d4e
• Version Independent ID: 038d7f90-aa71-a35c-cee9-c8543403cfd7
• Content: Create and use Razor Components
• Content Source: aspnetcore/razor-components/components.md
• Product: aspnet-core
• GitHub Login: @guardrex
• Microsoft Alias: riande

[guardrex]

Cross-ref: https://github.com/aspnet/Blazor/issues/1355

BindingParentComponent.cshtml:

@page "/BindingParentComponent"

<h1>Parent Component</h1>

<p>ParentYear: @ParentYear</p>

<BindingChildComponent Year="@ParentYear" YearChanged="@ChildFiredEvent" />

<button class="btn btn-primary" onclick="@ChangeYearFromParent">
    Change Year to 1986 from the Parent component
</button>

@functions {
    [Parameter]
    private int ParentYear { get; set; } = 1978;

    void ChangeYearFromParent()
    {
        ParentYear = 1986;
    }

    void ChildFiredEvent(int year)
    {
        ParentYear = year;
        StateHasChanged();
    }
}

BindingChildComponent.cshtml:

<h2>Child Component</h2>

<p>Year: @Year</p>

<button class="btn btn-primary" onclick="@ChangeYearFromChild">
    Change Year to 2027 from the Child component
</button>

@functions {
    [Parameter]
    private int Year { get; set; }

    [Parameter]
    private Action<int> YearChanged { get; set; }

    void ChangeYearFromChild()
    {
        Year = 2027;
        YearChanged(Year);
    }
}

Works but is at odds with bind-Year syntax in the current data binding example for the Child component.

@rpc-scandinavia Let's put this on hold for a bit. I need to consult with engineering, and they're 🏃😅 right now. I'll get up with them later in the week.

btw ...

all the child component do is showing its own variable, and that works without "bind".

That's just for demonstration purposes to show the value from both the parent and the child. It isn't really the focus of the scenario.

[rpc-scandinavia]

@guardrex
Yes, data binding is useless if you want the result to be shown automatically in the parent, because you have to do the "StateHasChanged" yourself. I found these two threads:

dotnet/aspnetcore#5504

dotnet/aspnetcore#6351

So perhaps it will work in 3.0 with the "EventCallback".

[guardrex]

Management will triage this and provide guidance. I have a feel'in that we'll hit it for 3.0 ... but we'll see how they want to play it later.