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

Question

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

前进或下一步按钮的当前输出是：如果未输入任何值 -> 正确验证（要求填写详细信息） -> 显示转发通知。

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

这是一些代码：

 <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\n{modelJson}");
        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);
    }
}

Answer 1

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

“保存”按钮可能除外。

Answer 2

您可以在按钮事件处理程序中手动进行验证，然后不使用 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);
                }
            }
        }

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

EditForm in Blazor app have multiple submit buttons

html

razor

razor-pages

blazor

blazor-webassembly