@Jaap，这是一个基于表单验证内部机制的解决方案。我希望这个解决方案能够满足您的需求，直到更好的解决方案被提供。
在Blazor中添加到EditContext对象的表单验证支持分为两个级别：对象级和字段级。当您点击提交按钮时，整个模型将被验证。我们已经看到，提交按钮非常有效，只有在模型字段的值有效时才允许您提交。当您点击取消按钮时，且模型字段的值有效时，对话框会顺利关闭。但是，当一个或多个字段具有无效值（例如，在清除电子邮件字段后），并且您点击取消按钮时，字段级验证立即开始，而取消按钮事件处理程序中的代码没有任何机会做任何事情。这种行为是设计上的，即使我使用Fluent Validation而不是DataAnnotations验证也重复发生。结论：这是我们的限制，而不是系统问题。我们需要投入更多的时间学习Blazor。
我提出的解决方案是在单击“取消”按钮时禁用字段级验证，因此立即关闭对话框而不进行任何验证。
注意：我的代码正在使用Fluent Validation，因为我正在尝试使用Fluent Validation，但同样也可以使用DataAnnotations验证来实现相同的功能。 在两种情况下的代码几乎相同，与Fluent Validation实际无关。请注意，我通过Chris Sainty的Fluent Validation示例代码进行了调整。
UserLogin.cs
public class UserLogin
{
public string Email { get; set; }
public string Password { get; set; }
}
UserLoginValidator.cs
public class UserLoginValidator : AbstractValidator<UserLogin>
{
public UserLoginValidator()
{
RuleFor(user => user.Email).NotEmpty().WithMessage("You must enter an email address");
RuleFor(user => user.Email).EmailAddress().WithMessage("You must provide a valid email address");
RuleFor(user => user.Password).NotEmpty().WithMessage("You must enter a password");
RuleFor(user => user.Password).MaximumLength(50).WithMessage("Password cannot be longer than 50 characters");
}
}
FluentValidationValidator.cs
public class FluentValidationValidator : ComponentBase
{
[CascadingParameter] EditContext CurrentEditContext { get; set; }
[Parameter] public bool ShouldValidate { get; set; }
protected override void OnInitialized()
{
if (CurrentEditContext == null)
{
throw new InvalidOperationException($"{nameof(FluentValidationValidator)} requires a cascading " +
$"parameter of type {nameof(EditContext)}. For example, you can use {nameof(FluentValidationValidator)} " +
$"inside an {nameof(EditForm)}.");
}
CurrentEditContext.AddFluentValidation(ShouldValidate);
}
}
EditContextFluentValidationExtensions.cs
public static class EditContextFluentValidationExtensions
{
public static EditContext AddFluentValidation(this EditContext editContext, bool shouldValidate)
{
if (editContext == null)
{
throw new ArgumentNullException(nameof(editContext));
}
var messages = new ValidationMessageStore(editContext);
editContext.OnValidationRequested +=
(sender, eventArgs) => ValidateModel((EditContext)sender, messages);
editContext.OnFieldChanged +=
(sender, eventArgs) => ValidateField(editContext, messages, eventArgs.FieldIdentifier, shouldValidate);
return editContext;
}
private static void ValidateModel(EditContext editContext, ValidationMessageStore messages)
{
var validator = GetValidatorForModel(editContext.Model);
var validationResults = validator.Validate(editContext.Model);
messages.Clear();
foreach (var validationResult in validationResults.Errors)
{
messages.Add(editContext.Field(validationResult.PropertyName), validationResult.ErrorMessage);
}
editContext.NotifyValidationStateChanged();
}
private static void ValidateField(EditContext editContext, ValidationMessageStore messages, in FieldIdentifier fieldIdentifier, bool shouldValidate)
{
Console.WriteLine(fieldIdentifier.FieldName.ToString());
if (shouldValidate)
{
var properties = new[] { fieldIdentifier.FieldName };
var context = new FluentValidation.ValidationContext(fieldIdentifier.Model, new PropertyChain(), new MemberNameValidatorSelector(properties));
var validator = GetValidatorForModel(fieldIdentifier.Model);
var validationResults = validator.Validate(context);
messages.Clear(fieldIdentifier);
foreach (var validationResult in validationResults.Errors)
{
messages.Add(editContext.Field(validationResult.PropertyName), validationResult.ErrorMessage);
}
editContext.NotifyValidationStateChanged();
}
}
private static IValidator GetValidatorForModel(object model)
{
var abstractValidatorType = typeof(AbstractValidator<>).MakeGenericType(model.GetType());
var modelValidatorType = Assembly.GetExecutingAssembly().GetTypes().FirstOrDefault(t => t.IsSubclassOf(abstractValidatorType));
var modelValidatorInstance = (IValidator)Activator.CreateInstance(modelValidatorType);
return modelValidatorInstance;
}
}
Cancel.razor
@page "/cancel"
@using System.ComponentModel.DataAnnotations;
<h3>Cancel Validation</h3>
<button type="submit" class="btn btn-primary" @onclick="Login">Login</button>
<hr />
<p>Status: @status</p>
@if (showModal)
{
<div class="modal" tabindex="-1" role="dialog" style="display:block" id="taskModal">
<div class="modal-dialog shadow-lg bg-white rounded" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Login</h5>
</div>
<div class="modal-body">
<EditForm Model="user" OnValidSubmit="HandleValidSubmit">
@*<DataAnnotationsValidator />*@
<FluentValidationValidator ShouldValidate="false" />
@*<ValidationSummary />*@
<div class="form-group row">
<label class="col-3 col-form-label">Email: </label>
<InputText class="col-8 form-control" @bind-Value="user.Email" />
<ValidationMessage For="@(() => user.Email)" />
</div>
<div class="form-group row">
<label class="col-3 col-form-label">Password: </label>
<InputText type="password" class="col-8 form-control" @bind-Value="user.Password" />
<ValidationMessage For="@(() => user.Password)" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-secondary" @onclick="CancelSubmit">Cancel</button>
</div>
</EditForm>
</div>
</div>
</div>
</div>
}
@code {
UserLogin user = new UserLogin();
bool showModal;
string status;
protected override void OnInitialized()
{
showModal = false;
status = "Init";
// for demo purposes, if you delete user.Email in the login dialog, you'll need to press 'Cancel' 2 times.
user.Email = "user@example.com";
user.Password = "12345";
}
private void Login()
{
status = "Show Login Modal";
showModal = true;
}
private void HandleValidSubmit()
{
status = "Valid Submit";
showModal = false;
}
private void CancelSubmit()
{
Console.WriteLine("CancelSubmit");
status = "Cancelled";
showModal = false;
}
}
请注意，FluentValidationValidator组件有一个名为ShouldValidate的属性，我们将其设置为false以删除字段级验证。请遵循执行流程，它非常简单。我几乎没有做什么来解决这个问题，这让我想到可能有一种更短更好的方法来解决它。
您可能需要安装Fluent Validation软件包...
祝你好运...
我需要再次点击“取消”按钮才能关闭模态对话框。
EditForm Model="user"，我使用EditForm EditContext="ctx"，其中ctx是new EditContext(user);，并且我在取消时创建一个新的上下文）。更多信息请参见ASP.NET Core Blazor表单和验证。 - dani herrera