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.

[guardrex]

Cross-ref: EventCallback: Updates to Event Handling and Binding

No reason to delay this work ... I'll get on it very soon!

[guardrex]

From @RichiCoder1 on #11682 ...

Examples on how to affect the Layout rendering from Body component

It's not clear if it's possible to pass data from the wrapped component to the Layout ala https://docs.microsoft.com/en-us/aspnet/web-pages/overview/ui-layouts-and-themes/3-creating-a-consistent-look#passing-data-to-layout-pages, and if so how. Clarification would be great

I'll test EventCallback/chained binding with layouts while working this to confirm it's all 👍.

[RichiCoder1]

Awesome! Thanks