Question

我只是在弄乱我的第一个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控制台开发工具抛出了一个异常，但是在捕获它之前它已经消失了。

尽我所能，我设法捕获了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");
        }
    }

REPO：

https://github.com/PhilipAnthonyMurray/Blazor

Answer 1

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

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

删除表单后，它将立即生效。

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

1 个答案: