Question

在我的Blazor服务器端应用程序中，我必须呼叫另一个网站并提交表格。但是，在可以提交表单之前，应用程序需要进行一些本地处理，并根据结果提交或不提交表单。怎么做？

我的想法是要有一个带有@onclick的按钮，然后从该函数调用表单。像这样：

<button @onclick="MyFunction">Click Me</button>
<form METHOD="POST" ACTION="https://someURL.com">
    <input TYPE="hidden" NAME="value1" VALUE="@myValue1">
    <input TYPE="hidden" NAME="value2" VALUE="@myValue2">
    <input TYPE="SUBMIT" NAME="SUBMIT" class="btn btn-primary" style="margin: 5px" VALUE="Do stuff">
</form>
@code{
    private void MyFunction()
    {
        if (AmazingLogicFunction())
         //Code to click SUBMIT
    }
}

但是，我似乎无法获得名为element的{{1}}

如果我不得不以其他方式来做，那我很好。

Answer 1

这里要记住的事情是，您实际上并没有像使用传统的HTML表单和服务器端网络技术（例如ASP）那样提交和重新加载整个页面。

在Blazor中，“提交”按钮只是调用您的代码，然后在其中编写您选择要执行的操作。例如，如果您随后要在操作后移至其他页面，则可以手动告诉Blazor更改通过Blazor路由显示的页面组件。

使用Blazor的EditForm组件可以简化表单的处理。如果这样做，则可以执行以下操作（from the official documentation）

：

<EditForm EditContext="@editContext" OnSubmit="@HandleSubmit">

    ...

    <button type="submit">Submit</button> 
</EditForm>

@code {
    private Starship starship = new Starship() { ProductionDate = DateTime.UtcNow };
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(starship);
    }

    private async Task HandleSubmit()
    {
        var isValid = editContext.Validate();

        if (isValid)
        {
            AmazingLogicFunction()
            // whatever you want to happen next
        }
        else
        {
            ...
        }
    } 
}

或者，如果只希望在表单数据有效时触发函数，则可以简化为：

<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="exampleModel.Name" />

    <button type="submit">Submit</button> 
</EditForm>

@code {
    private ExampleModel exampleModel = new ExampleModel();

    private void HandleValidSubmit()
    {
            AmazingLogicFunction()
            // whatever you want to happen next
    } 
}

请仔细阅读文档的整个ASP.NET Core Blazor forms and validation部分，尤其是有关OnValidSubmit和OnSubmit的部分。

Blazor在提交表单数据之前先做逻辑

1 个答案: