Blazor 按钮 onclick 未使用 InteractiveServer 渲染模式触发

Question

我有一个服务器程序集页面，但我无法让它调用隐藏代码（主页、联系人组件）。

在浏览器控制台中，没有错误。

在“联系人”组件中，我在页面顶部添加了：

@rendermode InteractiveServer

然后我有一个按钮：

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

...以及@code部分中的函数：

    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.";
        }
    }

现在有一个奇怪的事情 - 如果我将按钮放在表单中并使其成为提交按钮，它会调用

SendEMail()

。我不想这样做，因为它会刷新主页并丢失其他内容，例如如果

IsValidMail()

失败，我想要返回的消息。

如果我删除表单，或删除表单的

onsubmit

来调用

SendEMail()

，那么按钮将不会调用该方法，即使我指定了渲染模式。

我还尝试在

App.razor

那里有

<Routes />

添加这样的规范：

<Routes rendermode="RenderMode.InteractiveServer" />

...这应该强制所有页面采用交互式服务器模式，但它不会获得调用该方法的按钮。

我应该补充一下，我还在

Program.cs

中验证了模板生成了代码：

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

...和

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

Answer 1

问题原来是 JavaScript 与我们合并的网站模板冲突。在 JQuery 部分中，有一些动画函数可以操纵 DOM 来执行动画 - 一旦我们恢复默认的 Blazor JS，分配了“animated”类的容器内的任何内容都不会呈现。