Blazor 应用程序中的 EditForm 有多个提交按钮

Posted 2023-03-27

【中文标题】Blazor 应用程序中的 EditForm 有多个提交按钮

【英文标题】：EditForm in Blazor app have multiple submit buttons

【发布时间】：2021-09-08 15:53:53

【问题描述】：

我有一个简单的 Blazor Editform，其中有多个带有不同导航和 toast 通知的按钮。我已将 OnValidSubmit 附加到 Editform。现在验证适用于所有按钮。我添加了 onclick() 来触发按钮功能，但我希望仅在用户输入所有详细信息时才触发 onclick。希望我已经解释得很好。请让我知道以获取更多信息。

Forward 或 Next 按钮的当前输出是：如果没有输入值 -> 正确验证（要求填写详细信息）-> 显示转发通知。

预期输出： 如果没有输入值 -> 正确验证（要求填写详细信息）。 如果输入所有值 -> 正确验证 -> 显示转发通知。

这是一些代码：

 <EditForm EditContext="@editContext" OnValidSubmit="HandleValidSubmit"  @onreset="HandleReset">
            <DataAnnotationsValidator />
            <div class="form-row">
                <div class="form-group col">
                    <label>Role</label><br />
                    <InputRadioGroup @bind-Value="model.Role" class="form-control">
                        @foreach (var option in rdOptions)
                        
                            <InputRadio Value="option" /> @option
                            <text>&nbsp;&nbsp;</text>
                        
                    </InputRadioGroup>
                    <ValidationMessage For="@(() => model.Role)" />
                </div>
                <div class="form-group col">
                    <label>Company Name</label>
                    <InputSelect id="txtCompanyName" class="form-control" @bind-Value="@model.CompanyName">
                        <option selected value="-1">-Select-</option>
                        <option value="CompanyName1">CompanyName1</option>
                        <option value="CompanyName2">CompanyName2</option>
                    </InputSelect>
                    <ValidationMessage For="@(() => model.CompanyName)" />
                </div>
            </div>
         

            <div class="form-row">
                <div class="text-left col-3">
                    <button type="submit" class="btn btn-primary btn-success">Save</button>
                </div>
                <div class="text-right col-3">
                    <button type="submit" class="btn btn-primary" @onclick="@Forward">Forward</button>
                </div>
                <div class="text-right col-3">
                    <button type="submit" class="btn btn-primary" @onclick="@Review">Next</button>
                </div>
                <div class="text-right col-3">
                    <button type="reset" class="btn btn-secondary">Clear</button>
                </div>
            </div>
        </EditForm>

代码部分：

@code 
    private Model model = new Model();
    private EditContext editContext;
    List<Model> models = new();


    protected override void OnInitialized()
    
        editContext = new EditContext(model);
    

    private void HandleValidSubmit()
    
        var modelJson = JsonSerializer.Serialize(model, new JsonSerializerOptions  WriteIndented = true );
        JSRuntime.InvokeVoidAsync("alert", $"SUCCESS!! :-)\n\nmodelJson");
        toastService.ShowSuccess("saved successfully!");
    

    private void Forward()
    
        toastService.ShowInfo("Forwarded!!");
    

    private void Review()
    
        toastService.ShowInfo("Review!!");
    
    private void HandleReset()
    
        model = new Model();
        editContext = new EditContext(model);
    

【问题讨论】：

请问这是服务器端还是 Web 程序集，@Shrey？

【参考方案1】：

您可以在按钮事件处理程序中手动进行验证，然后不使用EditForm OnValidSubmit，并将按钮类型设置为button。

...
if (editContext.Validate())
 go
else
 alert
...

仅供参考 - EditForm 的相关代码如下所示：

        private async Task HandleSubmitAsync()
        
            Debug.Assert(_editContext != null);

            if (OnSubmit.HasDelegate)
            
                // When using OnSubmit, the developer takes control of the validation lifecycle
                await OnSubmit.InvokeAsync(_editContext);
            
            else
            
                // Otherwise, the system implicitly runs validation on form submission
                var isValid = _editContext.Validate(); // This will likely become ValidateAsync later

                if (isValid && OnValidSubmit.HasDelegate)
                
                    await OnValidSubmit.InvokeAsync(_editContext);
                

                if (!isValid && OnInvalidSubmit.HasDelegate)
                
                    await OnInvalidSubmit.InvokeAsync(_editContext);
                
            
        

【参考方案2】：

将type="submit" 更改为type="button"

也许保存按钮除外。

【讨论】：

我需要对所有按钮进行验证，但只有在正确验证的情况下，onclick 才能正常工作。您的回答在一定程度上有所帮助。我已经尝试过一些东西及其工作。让我发帖。