Blazer EditForm提交不触发OnValidSubmit & OnInvalidSubmit方法
Blazer 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 console Dev工具抛出了一个异常，但在我捕获它之前它已经走远了。
我成功地捕获了Chrome控制台错误，尽管它做了很多好事。
显示Visual输出窗口
加载'/usr/share/dotnet/shared/Microsoft.NETCore.App/3.1.5/System.Security.Principal.Windows.dll'.跳过装载符号。对模块进行了优化，并启用了调试器选项“只是我的代码”。
这是码头集装箱的日志
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问题之后，我更改了Startup.cs的ConfigureServices方法中的以下代码。它不再轰炸到400个Chrome页面，但仍然不触发页面中的OnValidSubmit或OnInvalidSubmit方法。
//services.AddRazorPages()
services.AddRazorPages(o =>
{
o.Conventions.ConfigureFilter(new Microsoft.AspNetCore.Mvc.IgnoreAntiforgeryTokenAttribute());
});晚间的最后一次编辑
如果遵循Blazor大学文章的表单验证示例，并且它触发了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");
}
}回购：
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-07 20:41:50
问题是标记中有一个<form>。您不需要这样做，因为<EditForm>为您创建了一个，并将其挂钩到表单事件中。
目前，当您提交表单时，应用程序重新导航到当前页面，这就是为什么它要通过OnInitializedAsync方法。
一旦您移除表单，它就会工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62780516
复制相关文章
相似问题
腾讯云开发者
