Blazor在提交表单数据之前执行逻辑操作

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
}
}

然而，我似乎无法获得名为SUBMIT的element

如果我必须用其他方式来做，我可以接受。

Answer 1

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

在Blazor中，提交按钮只是简单地调用您的代码，然后在其中编程您选择的一些操作。例如，如果您想在操作后移动到另一个页面，那么您可以手动告诉Blazor更改通过Blazor的路由显示的页面组件。

使用Blazor的EditForm组件可以使处理表单更加简单。如果你这样做，你可以做这样的事情(从官方文件(：

<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表单和验证部分，特别是关于OnValidSubmit和OnSubmit的部分。