Error compiling button click sample code: The type already contains a definition for 'ToggleBtn'

[Ryan]

I get a compile error when running the button click sample code from this page: https://ej2.syncfusion.com/blazor/documentation/button/native-event/

The error is: The type 'ButtonSample' already contains a definition for 'ToggleBtn'.  

This is the code:

@page "/ButtonSample"

@using Syncfusion.EJ2.Blazor.Buttons

    <EjsButton @ref="ToggleBtn" onclick="onToggleClick" CssClass="e-flat" IsToggle="true" IsPrimary="true" Content="@Content"></EjsButton>

@code {
    EjsButton ToggleBtn;
    public string Content = "Play";
    private void onToggleClick(UIMouseEventArgs args)
    {
        if (ToggleBtn.Content == "Play")
        {
            this.Content = "Pause";
        }
        else
        {
            this.Content = "Play";
        }
    }
}

If I remove the @ref attribute from the button component, the compile error goes away.  However, that leads to the following runtime error:

InvalidOperationException: Unable to set property 'onclick' on object of type 'Syncfusion.EJ2.Blazor.Buttons.EjsButton'. The error was: Unable to cast object of type 'System.String' to type 'Microsoft.AspNetCore.Components.EventCallback`1[Microsoft.AspNetCore.Components.UIMouseEventArgs]'.

SyncFusion Version: 17.2.0.47-beta

.NET Core Version: 3.0 preview 8

[Sangeetha Priya Murugan]

Hi Ryan, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your reported issue and we are able to reproduce it in our end, based on your provided codes. And the cause of this issue is due to breaking changes in @ref functionality in Blazor with Preview8. However, we have already mentioned this in our release notes itself. Please refer the below links for more details. 

 

Github Issue Link: https://github.com/aspnet/AspNetCore/issues/13099 

 

Release Notes Link: https://ej2.syncfusion.com/blazor/documentation/release-notes/17.2.46/ 

 

For your convenience, to avoid this issue we would suggest you to use “suppressField” as like in the below code example. 

 

CODE EXAMPLE: 

 

@using Syncfusion.EJ2.Blazor.Buttons 

 

<EjsButton CssClass="e-flat" IsToggle="true" IsPrimary="true" Content="@Content" @ref="ToggleBtn" @ref:suppressField @onclick="onToggleClick"></EjsButton> 

 

@code { 

    EjsButton ToggleBtn; 

    public string Content = "Play"; 

    private void onToggleClick(UIMouseEventArgs args) 

    { 

        if (ToggleBtn.Content == "Play") 

        { 

            this.Content = "Pause"; 

        } 

        else 

        { 

            this.Content = "Play"; 

        } 

    } 

} 

 

For more details, please refer the below demo link for toggle button functionality. 

 

https://ej2.syncfusion.com/blazor/Buttons/DefaultFunctionalities 

 

Could you please check the above details and get back to us, if you need any further assistance on this? 

 

Regards, 

Sangeetha M 

[Ryan]

Thank you, that fixed it.

[Sangeetha Priya Murugan]

Hi Ryan, 

 

Thanks for your update. 

 

We are happy to hear that your issue has been resolved. Kindly get back to us if you need any further assistance. 

 

Regards, 

Sangeetha Priya M