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

Question

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

我只是在摆弄我的第一个 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");
    }
}

Run Code Online (Sandbox Code Playgroud)

展示模型

using System.ComponentModel.DataAnnotations;

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

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

Run Code Online (Sandbox Code Playgroud)

铬合金

我可以看到 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

Run Code Online (Sandbox Code Playgroud)

启用所有异常并关闭“Just My Code”

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

防伪令牌

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

    //services.AddRazorPages()

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

Run Code Online (Sandbox Code Playgroud)

晚上最后一次编辑

如果遵循Blazor Univercity 文章中的表单验证示例，它会触发 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");
        }
    }

Run Code Online (Sandbox Code Playgroud)

回购协议：

https://github.com/PhilipAnthonyMurray/Blazor

Answer 1

Pet*_*ris 7

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

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

一旦删除表格，它就会起作用。

归档时间：	5 年，4 月前
查看次数：	5380 次
最近记录：	5 年，4 月前