Calling the method in @Body from mainLayout Blazor

user_12018779 0
Viewed 449

I can't find a way to call the method in @Body from mainLayout. in mainLayout:

<div class="page"> <div class="sidebar">
    <NavMenu />

</div>

<div class="main">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
    <div class="top-row px-4">
        <a href="https://docs.microsoft.com/en-us/aspnet/" target="_blank">About</a>
    </div>

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

In the Main Layout there is a Click me button, by pressing which you need to call the method that is in the Body. What are the options for calling the method in Body from mainLayout?

blazor c#
1 Answers

Here's the Blazor Notification pattern applied to your code.

Define a service.

public class NotifyStateService
{
    public event EventHandler? EventClick;

    public void NotifyEventClick(object sender)
    {
        if (this.EventClick != null)
            this.EventClick(sender, EventArgs.Empty);
    }
}

and register it

//Program

builder.Services.AddScoped<NotifyStateService>();

MainLayout

@inherits LayoutComponentBase

<PageTitle>Server</PageTitle>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

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

@code {
    [Inject] private NotifyStateService? service {get; set;}
    // second null forgiving declaration as compiler too dumb to know service can't be null in this context 
    private NotifyStateService Service => service!;

    private void IncrementCount()
        => this.Service.NotifyEventClick(this);
}

Demo page

@page "/Increment"
@implements IDisposable
<h3>Incrementor</h3>

<div class=m-2 p-2>
    Counter: @this.counter
</div>

@code {
    [Inject] private NotifyStateService? service { get; set; }
    private NotifyStateService Service => service!;

    private int counter = 0;
    protected override void OnInitialized()
    {
        this.Service.EventClick += this.Increment;
        base.OnInitialized();
    }

    private void Increment(object? sender, EventArgs e)
    {
        counter++;
        this.InvokeAsync(StateHasChanged);
    }

    public void Dispose()
        => this.Service.EventClick -= this.Increment;
}
user_130657810
Related