asp.net-coreblazoreditform

Multiple EditForm in Blazor Page


My Code is :

@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(){}

The Error After Submit Second Form is:

EditForm requires either a Model parameter

Solution

  • Firstly you need to add FormName for parameter attribute.

        [SupplyParameterFromForm(FormName = "Send")]
        public SendMobileDto? SendMobile { get; set; } = new();
        [SupplyParameterFromForm(FormName = "Authenticate")]
        public SendCodeDto? SendCode { get; set; }=new();
    

    But unfortuanately, in SSR, the second submit you will still have this error.

    Cannot submit the form because no form on the page currently has that name

    https://github.com/dotnet/aspnetcore/issues/55808

    This issue happens when using the SSR EditForm in the condition. You could try a workaround that don't use the condition. Instead, using hiddien attribute to make sure all the formname are recognized at the begining.

     <EditForm Model="@SendCode" OnValidSubmit="Authenticate" FormName="Authenticate" hidden="@(!LoginLevel)">
    ...
    <EditForm Model="@SendMobile" OnValidSubmit="Send" FormName="Send" hidden="@LoginLevel">
    ...
    public bool LoginLevel { get; set; } = false;
    ...
        public async Task Send(){
            LoginLevel = !LoginLevel;
        }