c# - Blazor: Reference to child page displayed by RenderFragment Body - Stack Overflow

admin管理员组

文章数量:1336659

If I create a Blazor project from the Visual Studio templates, in the MainLayout.razor there is a

<article class="content px-4">
    @Body
</article>

part. The @Body is a RenderFragment where all child pages are displayed.

If I insert a child razor page directly, I can set a reference like this:

<ChildPage @ref="child"></ChildPage>

and use this in the code to e.g. update the child page:

ChildPage child { get; set; }

child.Update();

How can I get a reference to a child page in the MainLayout.razor to e.g. reload the child page?

If I create a Blazor project from the Visual Studio templates, in the MainLayout.razor there is a

<article class="content px-4">
    @Body
</article>

part. The @Body is a RenderFragment where all child pages are displayed.

If I insert a child razor page directly, I can set a reference like this:

<ChildPage @ref="child"></ChildPage>

and use this in the code to e.g. update the child page:

ChildPage child { get; set; }

child.Update();

How can I get a reference to a child page in the MainLayout.razor to e.g. reload the child page?

• c#
• asp-core
• blazor

Share Improve this question Follow edited Nov 20, 2024 at 1:34 Qiang Fu 9,17411 gold badge66 silver badges1616 bronze badges asked Nov 19, 2024 at 15:11 Toni TurekToni Turek 2544 bronze badges 5

• You don't normally manually trigger a render like that. If you explain why you want to call Update on ChildPage from the layout, we can probably provide mainstream solution to your use case. – MrC aka Shaun Curtis Commented Nov 19, 2024 at 15:38
• Well, in the child page I have e.g. a chart that I need to refresh using updated data. If I just call StateHasChanged() in the parent, the chart in the child page is not updated. – Toni Turek Commented Nov 19, 2024 at 15:43
• You should do all this in the Chart page. What mechanism triggers an update and calling StateHasChanged? Add some more code to your question. – MrC aka Shaun Curtis Commented Nov 19, 2024 at 16:15
• I do calculations in the parent (MainLayout.razor). The results are relevant for many child pages. For example time marching steps are performed. At a new time step, I need to tell the child to update a chart with the new data. – Toni Turek Commented Nov 19, 2024 at 19:13
• I believe you might be looking for Cascading Values/Parameters here, that way you should be able to pass whatever data you have on Layout level down to any page requiring it as a parameter -> learn.microsoft/en-us/aspnet/core/blazor/components/… Alternative approach would be to look into state management -> learn.microsoft/en-us/aspnet/core/blazor/state-management – cycaHuH Commented Nov 19, 2024 at 20:49

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You could try create a TriggerService like following.

    public class TriggerService
    {
        // Use Func<Task> to allow for async methods
        public  Func<Task>? OnTriggerAsync { get; set; }

        // Trigger the async method
        public  async Task TriggerMethodAsync()
        {
            if (OnTriggerAsync != null)
            {
                await OnTriggerAsync.Invoke();
            }
        }
    }

builder.Services.AddScoped<TriggerService>();

ChildPage.razor (register the trigger event to the update method)

@inject TriggerService _triggerSerivce
ChildValue: @childValue
@code {
    private string childValue { get; set; } = "old value";
    protected override async Task OnInitializedAsync()
    {
        _triggerSerivce.OnTriggerAsync += Update;
    }
    private async Task Update()
    {
        // Simulate asynchronous getting new data
        await Task.Delay(500);
        childValue = "new value";
        StateHasChanged();
    }
}

After these, you could call following at any place to update the child data without using reference.

await TriggerService.TriggerMethodAsync();

本文标签： cBlazor Reference to child page displayed by RenderFragment BodyStack Overflow