Blazer EditForm 提交不会触发 OnValidSubmit 和 OnInvalidSubmit 方法答案

【问题标题】：Blazer EditForm submit does not fire OnValidSubmit & OnInvalidSubmit methodsBlazer EditForm 提交不会触发 OnValidSubmit 和 OnInvalidSubmit 方法
【发布时间】：2020-07-07 17:12:08
【问题描述】：

我只是在搞乱我的第一个 Blazer 服务器应用程序，并且在提交 EditForm 时遇到了问题。验证适用于绑定到具有必需注释的属性的两个文本框，但是当我提交表单时，没有调用任何表单方法，Chrome 只会报告错误。知道问题是什么吗？

页面

@page "/"
@inject NavigationManager NavigationManager

@using MyModels

<div class="backgroupContainer">
    <EditForm Model="@authModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInValidSubmit">
        <DataAnnotationsValidator />

        <div id="login">
            <img id="login-image" src="images/img-01.png" alt="Login" />
            <div class="container">
                <div id="login-row" class="row justify-content-center align-items-center">
                    <div id="login-column" class="col-md-6">
                        <div id="login-box" class="col-md-12">
                            <form id="login-form" class="form" action="" method="post">
                                <h3 class="text-center text-info">Login</h3>
                                <div class="form-group">
                                    <label for="username" class="text-info">Username:</label><br>
                                    <InputText id="username" class="form-control" placeholder="Username" @bind-Value="authModel.Username" />
                                    <ValidationMessage For="@(() => authModel.Username)" />
                                </div>
                                <div class="form-group">
                                    <label for="password" class="text-info">Password:</label><br>
                                    <InputText id="password" class="form-control" type="password" placeholder="Password" @bind-Value="authModel.Password" />
                                    <ValidationMessage For="@(() => authModel.Password)" />
                                </div>
                                <div class="form-group">
                                    <button type="submit">Login</button>*
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </EditForm>
</div>

@code {

    private AuthenticationModel authModel = new AuthenticationModel();

    private void HandleLogin()
    {
        System.Diagnostics.Debugger.Break();
        NavigationManager.NavigateTo("counter");
    }

    private void HandleValidSubmit()
    {
        System.Diagnostics.Debugger.Break();
        NavigationManager.NavigateTo("fetchdata");
    }

    private void HandleInValidSubmit()
    {
        System.Diagnostics.Debugger.Break();
        NavigationManager.NavigateTo("error");
    }
}

显示模型

using System.ComponentModel.DataAnnotations;

namespace MyModels
{
    public class AuthenticationModel
    {
        [Required]
        public string Username { get; set; }

        [Required]
        public string Password { get; set; }
    }
}

铬

我可以看到 Chrome 控制台开发工具引发了异常，但在我捕获它之前它已经消失了。

我设法捕获了 Chrome 控制台错误，尽管它做得很好。

Visual Studio 输出窗口显示

已加载 '/usr/share/dotnet/shared/Microsoft.NETCore.App/3.1.5/System.Security.Principal.Windows.dll'。跳过加载符号。模块经过优化和调试器选项 “仅我的代码”已启用。

这是来自 Docker 容器的日志

warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. warn: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[35]
      No XML encryptor configured. Key {0405d1c3-4428-4e59-add8-4b1e48db282b} may be persisted to storage in unencrypted form. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://[::]:443 info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://[::]:80 info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development info: Microsoft.Hosting.Lifetime[0]
      Content root path: /app

启用所有例外并关闭“仅我的代码”

启用所有异常类型没有任何区别，但关闭“仅我的代码”调试给了我以下异常

防伪令牌

阅读此GitHub issue 后，我在 Startup.cs 的 ConfigureServices 方法中更改了以下代码。它不再轰炸到 400 Chrome 页面，但仍然不会触发页面中的 OnValidSubmit 或 OnInvalidSubmit 方法。

    //services.AddRazorPages()

    services.AddRazorPages(o =>
    {
        o.Conventions.ConfigureFilter(new Microsoft.AspNetCore.Mvc.IgnoreAntiforgeryTokenAttribute());
    });

晚上最后一次编辑

如果遵循 Blazor Univercity article 中的表单验证示例并且它触发了 OnValid 和 OnInalid 方法，那么它一定是我原始标记中的一个问题。目前我不知道是什么。

工作代码：

<EditForm Model=@person OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div class="form-group">
        <label for="Name">Name</label>
        <InputText @bind-Value=person.Name class="form-control" id="Name" />
    </div>
    <div class="form-group">
        <label for="Age">Age</label>
        <InputNumber @bind-Value=person.Age class="form-control" id="Age" />
    </div>
    <input type="submit" class="btn btn-primary" value="Save" />
</EditForm>

@code {
        Person person = new Person();

        public class Person
        {
            [System.ComponentModel.DataAnnotations.Required]
            public string Name { get; set; }
            [System.ComponentModel.DataAnnotations.Range(18, 80, ErrorMessage = "Age must be between 18 and 80.")]
            public int Age { get; set; }
        }

        private void HandleValidSubmit()
        {
            System.Diagnostics.Debugger.Break();
            NavigationManager.NavigateTo("fetchdata");
        }

        private void HandleInValidSubmit()
        {
            System.Diagnostics.Debugger.Break();
            NavigationManager.NavigateTo("error");
        }
    }

回购：

https://github.com/PhilipAnthonyMurray/Blazor

【问题讨论】：

如果您查看 VS（或运行服务器的控制台应用程序）中的输出窗口，会出现什么错误
@PeterMorris 我已经用其他信息更新了这个问题，但不确定它是否有帮助
我看不到任何有用的东西。你能不能去Debug/Windows/Exceptions窗口打开所有的dotnet异常类型，然后当错误发生时它应该暂停执行。
@PeterMorris 添加了更多信息
你有repo我可以下载试试吗？

标签： blazor blazor-server-side

【解决方案1】：

问题是您的标记中有<form>。您不需要它，因为<EditForm> 为您创建了一个并挂钩到表单事件中。

目前，当您提交表单时，应用会重新导航到当前页面，这就是它通过OnInitializedAsync 方法的原因。

只要您删除表单，它就会起作用。

【讨论】：