主页 / coding / 问题 / 79033667
Accepted
Geo
Asked: 2024-09-28 15:31:51 +0800 CST

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

  • 772

我正在 .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 渲染模式的项目，但它对我来说也不起作用

blazor

1 个回答

  1. Best Answer

    你的主要问题是按钮。它需要一个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();
    }
}
    • 2

相关问题