blazor页面中列表的数据注释

问题描述 投票:0回答:1

我使用以下方法在blazor(server)中的表单上进行验证

<EditForm Model="@place" OnValidSubmit="HandleValidSubmit" Context="placesEdit" >
<DataAnnotationsValidator />
 <InputText @bind-Value="place.Name"/>
<ValidationMessage For="() => place.Name" />
</EditForm>
@{place=new Place(); }

属性Name作为[required]-属性。 这很好用。提交表单时,我看到错误消息,并且未调用HandleValidSubmit

但是当我尝试对列表执行相同操作时,验证不会发生。即使不满足要求,也不会显示错误并调用HandleValidSubmit

<EditForm Model="@places" OnValidSubmit="HandleValidSubmit" Context="placesEdit" >
<DataAnnotationsValidator />
 @foreach(var place in places) {
   <InputText @bind-Value="place.Name"/>
   <ValidationMessage For="() => place.Name" />
}
</EditForm>
@{places=new List<Place>(); }

验证程序也可以在循环中执行什么操作?

validation asp.net-core data-annotations blazor blazor-server-side
1个回答
0
投票

您不能使用集合形式的顶级对象或模型。它总是必须是单数。您可以定义一个Customer模型来表示一个实体,该实体拥有一组电话,但是您不能定义Customer的集合并将其分配给EditForm的Model属性。

EditForm组件将呈现为HTML表单元素,对吗?您可以在HTML表单元素中执行此操作吗?不,你不能。

下面的代码片段创建一个EditForm组件,其Model绑定到包含电话列表的Customer对象。这也演示了如何绑定到集合...尝试以类似方式为EditForm建模:

 @page "/"
 @using Microsoft.AspNetCore.Components.Forms
 @using System.ComponentModel.DataAnnotations;

<EditForm Model="@customer" OnSubmit="@submitChanges">
    <DataAnnotationsValidator />
    <p>
       <InputText id="name" @bind-Value="customer.Name" /><br />
    </p>
    @foreach (var phone in customer.phones)
    {
        <p>
            <InputText @bind-Value="phone.PhoneNumber" />
        </p>

    }

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

</EditForm>

<div>
<p>Edit  customer</p>

 <p>@customer.Name</p>
 @foreach (var phone in customer.phones)
 {
    <p>@phone.PhoneNumber</p>

 }

 </div>

 @code {

 Customer customer;



protected override void OnInitialized()
{
    customer = new Customer();

}
private void submitChanges()
{
    // ......
}

public class Customer
{
    public string Name { get; set; } = "jeff";

    public List<Phone> phones { get; } = new List<Phone>() 
                                  { new Phone {PhoneNumber = "123456" },
                                    new Phone {PhoneNumber = "654321" }};
}

public class Phone
{
    public string PhoneNumber { get; set; }
}

}

希望这有帮助...

© www.soinside.com 2019 - 2024. All rights reserved.