Blazor页面多EditForm提交报错：EditForm缺少Model参数

问题场景 #

以下是Blazor页面代码，当LoginLevel切换到1并提交第二个表单时，抛出错误：EditForm requires either a Model parameter

@if (LoginLevel == 0)
{
    <EditForm Model="@SendMobile" OnValidSubmit="Send" FormName="Send">
    <InputText @bind-Value="SendMobile.Mobile"
           placeholder="شماره همراه خود را وارد کنید" class="input"/>
    <button type="submit" class="btn btn-primary icon-left">
        <i class="fi fi-rs-arrow-left"></i>ادامه
    </button>
    </EditForm>
}
else if (LoginLevel==1)
{
    <EditForm Model="@SendCode" OnValidSubmit="Authenticate" FormName="Authenticate">
    <InputText @bind-Value="SendCode.Code"
           placeholder="- - - -" class="input text-center" />
    <ValidationMessage For="() => SendCode.Code" class="text-alert error" />
    <button type="submit" class="btn btn-primary icon-left mx-1">
        <i class="fi fi-rs-check"></i>ورود
    </button>
 </EditForm>

@code{
public byte LoginLevel { get; set; } = 0;
[SupplyParameterFromForm]
public Dto.Account.SendMobileDto? SendMobile { get; set; } = new();
[SupplyParameterFromForm]
public Dto.Account.SendCodeDto? SendCode { get; set; }=new();
public async Task Send(){
LoginLevel = 1;
}

}
public async Task Authenticate(){}

错误原因及解决方案 #

1. 修正代码块语法错误 #

Authenticate方法定义在了@code块外部，不符合Blazor组件语法规范，组件的所有成员方法必须放在@code块内部。将该方法移入@code块：

@code{
public byte LoginLevel { get; set; } = 0;
[SupplyParameterFromForm]
public Dto.Account.SendMobileDto? SendMobile { get; set; } = new();
[SupplyParameterFromForm]
public Dto.Account.SendCodeDto? SendCode { get; set; }=new();

public async Task Send(){
    LoginLevel = 1;
}

public async Task Authenticate(){}
}

2. 确保SendCode实例不为null #

虽然你初始化了SendCode = new()，但[SupplyParameterFromForm]特性可能在表单回传时将其重置为null。可以通过两种方式避免：

• 若不需要从表单绑定参数到该属性，直接去掉[SupplyParameterFromForm]特性
• 或者在组件初始化时确保实例化：

protected override void OnInitialized()
{
    SendCode ??= new Dto.Account.SendCodeDto();
}

3. 验证EditForm的Model绑定 #

确保SendCodeDto是具有公共可读写属性的类，Code属性需支持双向绑定，否则EditForm无法正确识别Model参数。

完成以上修改后，第二个EditForm的Model参数即可正常识别，错误即可解决。

内容的提问来源于stack exchange，提问作者Ehsan Babaei