NET 8 验证表单中的 Blazor Web 应用程序不起作用

Question

我正在 NET 8 渲染服务器模式下制作 Blazor Web 应用程序。

我正在制作一个表单，我想实现验证，但当我发帖时我发现自己处于其中。它们不起作用。

我的代码如下。

public class LevelRiskDTO
{
     public int Id { get; set; }

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

     [Required]
     public int QsMin { get; set; }

     [Required]
     public int QsMax { get; set; }
} 

@page "/Create/{Id:int}"
@rendermode InteractiveServer
@inject Service _service;
  
<EditForm Model="Risk" OnValidSubmit="AddRiskLevel" FormName="Name">
   <DataAnnotationsValidator></DataAnnotationsValidator>
   <ValidationSummary class="text-danger"/>

    <div class="row g-3">

        <div class="col-sm-3">
           <label for="Level" class="form-label">Nivel</label>
           <InputText class="form-control" @bind-Value="Risk.Level" />
           <ValidationMessage For="@(() => Risk.Level)" />
        </div>

        <div class="col-sm-3">
           <label for="QsMin" class="form-label">Qs Min.</label>
           <InputNumber class="form-control" @bind-Value="Risk.QsMin" />
        </div>

        <div class="col-sm-3">
           <label for="QsMax" class="form-label">Qs Max.</label>
           <InputNumber class="form-control" @bind-Value="Risk.QsMax" />
        </div>

    </div>
    <div class="row g-3 pt-4">
        <div class="col-sm-1">
            <button type="button" class="btn btn-primary rounded-pill" @onclick="AddRiskLevel">Guardar</button>
        </div>
    </div>
</EditForm>

@code {
   [Parameter] public int Id { get; set; }

   [SupplyParameterFromForm] public LevelRiskDTO Risk { get; set; } = new();

   private void AddRiskLevel()
   {
      if (Id == 0)
          _service.CreateRisk(Risk);
   }
}

难道在渲染服务器模式下这不起作用？ 我使用 WebAssembly 渲染模式创建了一个项目，但它也不适合我

Answer 1

您的主要问题是按钮。 它需要一个

submit

类型。

<button type="submit" class="btn btn-primary rounded-pill" @onclick="AddRiskLevel">Guardar</button>

此外，您不会在

ints

上收到消息，因为它们的默认值为 0 [已满足要求]。 如果您想强制用户添加值或提供一些最大值和最小值验证，则需要允许空值。

public class LevelRiskDTO
{
    public int Id { get; set; }

    [Required]
    public string? Level { get; set; }

    [Required]
    public int? QsMin { get; set; }

    [Required]
    public int? QsMax { get; set; }
}

此外，您不需要

[SupplyParameterFromForm]

来获取 Blazor 服务器页面。 这适用于静态服务器端渲染。

这是我的演示页面供参考：

@page "/"

<PageTitle>Home</PageTitle>


@page "/Create/{Id:int}"
@rendermode InteractiveServer

<EditForm Model="Risk" OnValidSubmit="AddRiskLevel">
    <DataAnnotationsValidator></DataAnnotationsValidator>
    <ValidationSummary class="text-danger" />

    <div class="row g-3">

        <div class="col-sm-3">
            <label for="Level" class="form-label">Nivel</label>
            <InputText class="form-control" @bind-Value="Risk.Level" />
            <ValidationMessage For="@(() => Risk.Level)" />
        </div>

        <div class="col-sm-3">
            <label for="QsMin" class="form-label">Qs Min.</label>
            <InputNumber class="form-control" @bind-Value="Risk.QsMin" />
        </div>

        <div class="col-sm-3">
            <label for="QsMax" class="form-label">Qs Max.</label>
            <InputNumber class="form-control" @bind-Value="Risk.QsMax" />
        </div>

    </div>
    <div class="row g-3 pt-4">
        <div class="col-sm-1">
            <button type="submit" class="btn btn-primary rounded-pill" @onclick="AddRiskLevel">Guardar</button>
        </div>
    </div>
</EditForm>

@code {
    [Parameter] public int Id { get; set; }

    private LevelRiskDTO Risk { get; set; } = new();

    private void AddRiskLevel()
    {
        if (Id == 0)
            this.Risk = new();
    }
}