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标签。您的问题是剃刀页面，而不是剃刀。

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

偶然地，您可以创建实现此类功能的Blazor组件，并将它们包含在您的Razor页面中。

我认为chris sainty在Blazor建立了一个烤面包库。它可能会帮助您。我还认为我看到了Daniel Wroth的推送通知示例，该示例在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://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1

剃刀/剃刀页面-无需导航的表单和验证

2 个答案: