CODEWITHSUNDEEP
c#asp.net-coreblazor.net-8.0
Jay Imerman
Jay Imerman

Reputation: 4600

Blazor button onclick is not triggering using InteractiveServer rendermode

I have a server assembly page where I just can't get it to invoke the code-behind (the Home page, Contacts component).

In the browser console, there are no errors.

In the Contacts component, at the top of the page I added:

@rendermode InteractiveServer

I then have a button:

<button type="button" @onclick="@SendEmail" class="form contact-form-button light-form oswald light uppercase">send email</button>

... and the function in the @code section:

    private async Task SendEmail()
    {
        await Task.Delay(1);
        if (IsValidMail())
        {
            SendMessage = Utils.SendMail(contact.Name, contact.Email, contact.Subject, contact.Body);
        }
        else
        {
            SendMessage = "Please fill out all the fields and try again.";
        }
    }

Now here's the weird thing - if I put the button inside of a form and make it a submit button, it calls SendEMail(). I don't want to do it this way because it refreshes the home page and loses other things like the message I want to return if the IsValidMail() fails.

If I remove the form, or remove the onsubmit for the form to call SendEMail(), then the button will not invoke the method, even though I specified rendermode.

I also tried in the App.razor where it has <Routes /> to add a specification like this:

<Routes rendermode="RenderMode.InteractiveServer" />

...which should force interactive server mode for all pages, but it won't get the button to invoke the method.

I should add, I also verified in Program.cs that the template generated the code:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

... and

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Upvotes: 1

Views: 976

Answers (1)

Jay Imerman
Jay Imerman

Reputation: 4600

The problem turned out to be a JavaScript conflict with the website template that we incorporated. In the JQuery section, there were some animation functions that manipulated the DOM to perform the animation - anything within the container assigned the class "animated" is not rendered once we restored the default Blazor JS.

So to recap, we had to restore the missing Blazor JS in App.razor:

<script src="_framework/blazor.web.js"></script>

Then, we had to avoid using the animated CSS class from our web template.

Now everything works!

The lesson here is that the animation scripts apparently violated Microsoft's recommendations to not manipulate the DOM to achieve animations.

Upvotes: 0

Related Questions