防止服务器端 Blazor 在 EditForm 中触发 onsubmit答案

【问题标题】：Prevent Server Side Blazor from firing onsubmit in an EditForm防止服务器端 Blazor 在 EditForm 中触发 onsubmit
【发布时间】：2020-11-24 10:08:38
【问题描述】：

当我在输入字段中按 Enter 时，我想阻止服务器端 Blazor 触发 EditForm 的 OnSubmit 事件处理程序（由于某些其他原因我无法摆脱）。这似乎是一件容易的事，我就是无法解决。我编了一个我能想到的最小的例子：

_Index.razor：

@page "/"
@inject IJSRuntime JSRuntime;


<EditForm Model="Model" OnSubmit="HandleOnSubmit">
    <input id="testInput"/>
    <button type="submit" value="unneeded submit button"></button>
</EditForm>

@code
{
    private CModel Model { get; set; } = new CModel() { ID = "ID", Name = "Name" };

    private async Task HandleOnSubmit()
    {
        await JSRuntime.InvokeAsync<object>("alert", new object[] { "This alert shouldn't be shown!!" });
    }
}

CModel 类（尽管它与问题无关）：

public class CModel
{
    public string ID { get; set; }
    public string Name { get; set; }
}

和_Host.cshtml：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PreventSubmitOnForm</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">????</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
    <script>
        document.getElementById("testInput").addEventListener('keypress', function (event) {
            if (event.which === 13) {
                event.preventDefault();
                alert('Form submit prevented');
            }
        });
    </script>
</body>
</html>

在 _Host.cshtml 中我注册了一个新的 keypress 事件处理程序，并且在我调试时，在页面创建时它会真正注册。但它永远不会在按键 Enter 时触发。而且我已经尝试使用@onkeypress:preventDefault 和@onkeypress:stopPropagation 来欺骗这种情况，但是当我只想阻止我的输入字段的默认行为时，它们似乎没有帮助（正如史蒂夫桑德森声明的in his issue comment）仅针对事件的特定字段：按下 Enter。

在普通的 HTML + JS 案例中，它就像一个魅力：https://jsfiddle.net/wmk608gh/1/

所以我最终选择了 JS Interop 解决方案并添加了脚本

<script>
    document.getElementById("testInput").addEventListener('keypress', function (event) {
        if (event.which === 13) {
            event.preventDefault();
            alert('Form submit prevented');
        }
    });
</script>

到_Host.cshtml。但它似乎不起作用。我想我应该将我的脚本注册到另一个事件（而不是 keypress），或者我已经可以在此处遵循最佳实践。

任何帮助表示赞赏。

【问题讨论】：

标签： javascript c# event-handling blazor-server-side blazor-editform

【解决方案1】：

问题是您尝试在 <input /> 元素尚未呈现时添加 EventListener。

要完成这项工作，您可以在 blazor 呈现您的页面后调用您的 JS 函数：

在您的 _Index.razor @code 块中添加：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("PreventDefault");
    }
}

在 _Host.cshtml 中用一个函数包装你的 addEventListener：

<script>
    function PreventDefault() {
        document.getElementById("testInput").addEventListener('keypress', function (event) {
            if (event.which === 13) {
                event.preventDefault();
                alert('Form submit prevented');
            }
        });
    }
</script>

【讨论】：