【问题标题】:How to programmatically submit a Blazor form?如何以编程方式提交 Blazor 表单?
【发布时间】:2020-10-03 03:47:13
【问题描述】:

有一个 Blazor EditForm 和一个包含的 InputTextArea(即多行文本框),当用户按下 Ctrl+Enter 时,我确实想验证并提交表单,就像他会点击提交按钮一样。

我已成功连接键盘处理程序,如下所示:

<EditForm Model="@myModel" Format="g" OnValidSubmit="@Store" @ref="_editForm">
    <InputTextArea 
        onkeypress="@(async e => await myKeyPress(e))"
        @bind-Value="myModel.Foo" />
    <button type="submit">Store it</button>
</EditForm>

后面有这段代码:

private EditForm _editForm;

private async Task myKeyPress(KeyboardEventArgs key)
{
    if (key.CtrlKey && key.Code == @"Enter")
    {
        _editForm.??? // What to call here?
    }
}

不幸的是,我在 EditForm 类中没有看到可以调用来提交验证表单的方法,就像用户单击提交按钮一样。

我查看了thisthis SO 问题,但没有成功。

我的问题

如何以编程方式提交和验证 Blazor 表单?

【问题讨论】:

  • 但是假设用户在输入后才按下回车键。这也将提交表单...实际上,如果输入控件具有焦点,并且您按 Enter 键,则表单始终会提交。考虑一下,然后重新提出您的问题...
  • @enet 由于它是一个 InputTextArea,它是一个多行控件,按下 Enter 键只需将键盘插入符号放到下一行。
  • 是的,你是对的。我没有注意这个事实。

标签: c# blazor blazor-server-side


【解决方案1】:
<EditForm Context=MyCurrentEditContext>
  <InputTextArea 
        onkeypress="@(async e => await myKeyPress(MyCurrentEditContext, e))"
        @bind-Value="myModel.Foo" />
    <button type="submit">Store it</button>
</EditForm>

@code
{
private async Task myKeyPress(EditContext editContext, KeyboardEventArgs key)
{
    if (key.CtrlKey && key.Code == @"Enter")
    {
        if (editContext.Validate())
        {
          ... Do stuff if valid
        }
    }
}
}

【讨论】:

  • 非常感谢,彼得。这几乎成功了。不幸的是, InputTextArea 上有一个验证,它必须是非空的。当此字段具有输入焦点并且键盘处理程序触发时,尚未执行 textarea 和绑定模型字段之间的交换。我必须先来回改变输入焦点。我什至尝试打电话给NotifyFieldChanged,但没有成功。即使没有焦点更改,是否/如何填充模型值的任何提示?
  • 好的,我通过派生自己的InputTextArea(例如here)并在onchange 处理程序之外添加oninput 处理程序来解决它。事实上,我从the original source 复制了代码并添加了oninput 处理程序。有了这个,改变不仅会在失去焦点时触发,而且会立即触发。
  • @UweKeim 尝试将@bind-Value:event="oninput" 添加到您的InputText。不确定它是否会起作用,但它可能会。
  • 谢谢,@PeterMorris 您在这里的帮助以及您网站上的大量教程和示例在很多情况下都为我提供了帮助和帮助。非常感谢您的努力!
  • @UweKeim 那么它对&lt;InputText&gt; 有效吗?我认为应该,但我从未尝试过。
猜你喜欢
  • 2010-11-22
  • 2018-06-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-07-11
  • 2015-08-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多