So I have a child button component that uses onclick event to add a class and then remove the class after a short bit of time (for a button ripple effect). The issue I am facing now is adding another event to the parent when the button is clicked (such as opening a modal window).

Child component (PrimaryButton.razor):

@using System.Timers

<button type="button" class="@ButtonClass @RippleClass" @onclick="AddRipple">@ButtonText</button>

@code {
    [Parameter] public string ButtonClass { get; set; }
    [Parameter] public string ButtonText { get; set; }
    [Parameter] public EventCallback OnClick { get; set; }
    private async Task HandleClick() 
    {
        await OnClick.InvokeAsync(null);
    }
    // Set Ripple Class
    private string RippleClass = "";
    private void AddRipple()
    {
        RippleClass = "ripple";
        StartTimer();
    }
    private void StartTimer()
    {
        var timer = new Timer(500);
        timer.Elapsed += RemoveClass;
        timer.AutoReset = false;
        timer.Start();
    }
    private void RemoveClass(object source, ElapsedEventArgs e)
    {
        RippleClass = "";
        ((Timer)source).Dispose();
        InvokeAsync(StateHasChanged);
    }
}

Parent (Index.razor):

<PrimaryButton ButtonClass="btn-primary1" ButtonText="Search" OnClick="@OpenModal" />

<SfDialog IsModal="true" @bind-Visible="Visibility">
    <DialogTemplates>
        <Header>Search Results</Header>
        <Content>
            <p>Showing 0 of 0 search results.</p>
        </Content>
        <FooterTemplate>
            <PrimaryButton ButtonClass="btn-primary2" ButtonText="Okay" OnClick="@CloseModal" />
        </FooterTemplate>
    </DialogTemplates>
    <DialogEvents OnOverlayModalClick="@OverlayClick"></DialogEvents>
    <DialogAnimationSettings Effect="@DialogEffect.None"></DialogAnimationSettings>
</SfDialog>

@code {
    // Modal
    private bool Visibility { get; set; } = false;
    private void OpenModal()
    {
        this.Visibility = true;
    }
    private void CloseModal()
    {
        this.Visibility = false;
    }
    private void OverlayClick(OverlayModalClickEventArgs args)
    {
        this.Visibility = false;
    }
}

I tried using EventCallBack but don't think I am using it correctly. I need more explanation other than what I read here (if that is the way to go):

.0#eventcallback

So I have a child button component that uses onclick event to add a class and then remove the class after a short bit of time (for a button ripple effect). The issue I am facing now is adding another event to the parent when the button is clicked (such as opening a modal window).

Child component (PrimaryButton.razor):

@using System.Timers

<button type="button" class="@ButtonClass @RippleClass" @onclick="AddRipple">@ButtonText</button>

@code {
    [Parameter] public string ButtonClass { get; set; }
    [Parameter] public string ButtonText { get; set; }
    [Parameter] public EventCallback OnClick { get; set; }
    private async Task HandleClick() 
    {
        await OnClick.InvokeAsync(null);
    }
    // Set Ripple Class
    private string RippleClass = "";
    private void AddRipple()
    {
        RippleClass = "ripple";
        StartTimer();
    }
    private void StartTimer()
    {
        var timer = new Timer(500);
        timer.Elapsed += RemoveClass;
        timer.AutoReset = false;
        timer.Start();
    }
    private void RemoveClass(object source, ElapsedEventArgs e)
    {
        RippleClass = "";
        ((Timer)source).Dispose();
        InvokeAsync(StateHasChanged);
    }
}

Parent (Index.razor):

<PrimaryButton ButtonClass="btn-primary1" ButtonText="Search" OnClick="@OpenModal" />

<SfDialog IsModal="true" @bind-Visible="Visibility">
    <DialogTemplates>
        <Header>Search Results</Header>
        <Content>
            <p>Showing 0 of 0 search results.</p>
        </Content>
        <FooterTemplate>
            <PrimaryButton ButtonClass="btn-primary2" ButtonText="Okay" OnClick="@CloseModal" />
        </FooterTemplate>
    </DialogTemplates>
    <DialogEvents OnOverlayModalClick="@OverlayClick"></DialogEvents>
    <DialogAnimationSettings Effect="@DialogEffect.None"></DialogAnimationSettings>
</SfDialog>

@code {
    // Modal
    private bool Visibility { get; set; } = false;
    private void OpenModal()
    {
        this.Visibility = true;
    }
    private void CloseModal()
    {
        this.Visibility = false;
    }
    private void OverlayClick(OverlayModalClickEventArgs args)
    {
        this.Visibility = false;
    }
}

I tried using EventCallBack but don't think I am using it correctly. I need more explanation other than what I read here (if that is the way to go):

https://learn.microsoft/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-9.0#eventcallback

• button
• blazor
• event-handling
• syncfusion-blazor

1 Answer 1

I may be missing something here, but why can't you just do this.

<button type="button" class="@ButtonClass @RippleClass" @onclick="HandleClick">@ButtonText</button>

// added to test
<style>
    .ripple {
    background-color:black;
    }
</style>

@code {
    [Parameter] public EventCallback OnClick { get; set; }

    private async Task HandleClick()
    {
        this.AddRipple();
        await OnClick.InvokeAsync();
    }