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

问题描述

我有一个简单的 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\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);
    }
}

标签： htmlrazorblazorrazor-pagesblazor-webassembly

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

问题描述

解决方案

推荐阅读