Blazor EditForm以编程方式提交

Question

备注:这不是重复的，虽然标题可能相似，但我的问题与他们不同。

我有一个Blazor EditForm，并希望通过代码手动提交它。出于一些UI问题的考虑，我不想在表单中放置提交按钮:

<EditForm  OnValidSubmit="ValidSubmit" OnInvalidSubmit="Invalid">
...
<button type="submit" >Save</button> // <--- I don't want the button to be here. I want it to be placed somewhere else outside of Editform 
</EditForm>
@code{
public void ValidSubmit()
{
Console.WriteLine("valid");
}
public void Invalid()
{
Console.WriteLine("invalid");
}
}

我希望提交按钮被放置在Editform之外的其他地方。在编辑表单中调用一个不可见的提交按钮的click事件也可以接受。

Answer 1

下一段代码显示了一个通用的Blazor组件，一旦字典、url和JS运行时都可用，该组件就会自动将字符串值的字典发送到外部url:

@inject IJSRuntime JSRuntime
<form action="@Url" method="post" style="display:none">
@if (Data != null)
{
@foreach (var item in Data ?? new Dictionary<string, string>())
{
<input type="hidden" name="@item.Key" value="@item.Value" />
}
}
<input type="submit" value="submit" @ref="SubmitButton" />
</form>

@code {
ElementReference SubmitButton;
[Parameter] public string? Url { get; set; }
[Parameter] public Dictionary<string, string>? Data { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (Data != null && !string.IsNullOrEmpty(Url))
{
await JSRuntime.InvokeVoidAsync("triggerClick", SubmitButton);
}
}
}

为了使它工作，你应该插入一个javascript函数，以编程方式单击_Host上的表单提交按钮。导入_framework/blazor.server.js前的CSHTML:

function triggerClick(elt) {
elt.click();
}