Razor / Blazor页面表单&不带导航的验证

Question

我有一个带有表格的剃须刀页，这个是附在模型上的。在‘提交’的时候，我尝试在服务器端验证一些数据，如果它失败了，我会显示一个‘祝酒词’。

问题是，表单是“刷新”页面，它似乎导航到自己！因此，由于这种“刷新”，我无法在祝酒词中显示我的错误。

index.cshtml

@model TestModel
<form method="post">

    <button type="submit">GO</button>

</form>

TestModel.cs

public virtual async Task<IActionResult> OnPostAsync()
{
  _toaster.ShowError("Hellow world", "I got an issue");
  return Page();
}

有办法解决这个问题吗？

Answer 1

您应该移除Blazor标签。你的问题是Razor Pages，而不是Blazor。

你看到另一个答案里的密码了吗。您应该做一些类似于EditForm在Blazor中所做的事情。一般来说，您应该使用JavaScript Fetch API与服务器通信，而不以传统的方式提交表单，其结果是页面的完全刷新。我还建议使用Fetch API，因为Blazor使用它与服务器上的API端点进行通信。但你可以用jQuery代替..。不过，我不建议这样做。我希望到现在为止，您已经意识到应该使用AJAX，对吗？

顺便说一句，您可以创建实现这些功能的Blazor组件，并将它们包含在Razor页面中。

我想克里斯·圣蒂已经在巴兹尔建了一个敬酒图书馆。可能对你有帮助。我还看到了Daniel的推送通知示例，演示了在Blazor中创建PWA时的示例。

希望这能帮上忙。

Answer 2

例如，如果您移动了验证客户端，您可以使用EditForm和DataAnnotationsValidator；

<EditForm Model="@CurrentObject" OnValidSubmit="@HandleValidSubmit">

                    <DataAnnotationsValidator />

                    <div class="form-group">
                        <label for="Name">Name</label>
                        <InputText id="Name" class="form-control" @bind-Value="@CurrentObject.Name" />
                        <ValidationMessage For="@(() => CurrentObject.Name)" />
                    </div>


                    <button type="submit" class="btn btn-primary">Submit</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </EditForm>

在HandleValidSubmit将是您的实际提交(创建/更新等)，@CurrentObject将是您的模型类的一个实例，这反过来将得到丰富的属性来自System.ComponentModel.DataAnnotations命名空间，例如；

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace [YourNamespace].Data.Model
{
    public class ExampleModel
    {

        // holds the front-end name for the record
        [Required(ErrorMessage = "Name is required")]
        public string Name { get; set; } = "";

    }
}

如果您希望保持验证服务器端，仍然可以使用EditForms，并使用"HandleSubmit“方法代替这里的详细说明；https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1