如何在组件外部放置 Blazor EditForm 的提交按钮答案

【问题标题】：How to place submit button for a Blazor EditForm outside of the component如何在组件外部放置 Blazor EditForm 的提交按钮
【发布时间】：2019-05-03 18:21:21
【问题描述】：

Blazor 文档的 Form Validation example 在 EditForm 组件中有一个提交按钮组件：

    <EditForm Model="@starship" > OnValidSubmit="@HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
    
        <p>
            <label for="identifier">Identifier: </label>
            <InputText id="identifier" bind Value="@starship.Identifier" />
        </p>
    
        Snip....

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

        Snip...

    </EditForm>

有没有办法将该提交按钮放置在EditForm 标记的外部并且仍然让它“本机”触发该EditForm 组件的提交而不使用JavaScript？

即让代码看起来像这样：

    <!-- Want this button to submit the form in the EditForm tags-->
    <button type="submit">Submit</button>

    Snip...

    <EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
    
        <p>
            <label for="identifier">Identifier: </label>
            <InputText id="identifier" bind-Value="@starship.Identifier" />
        </p>
    </EditForm>

【问题讨论】：

我在页面上有 blazor 组件，我想将表单和验证封装在组件内部，但我在页面顶部有一个保存按钮。

标签： blazor blazor-server-side

【解决方案1】：

很简单：

将id 属性添加到EditForm
将提交按钮放在EditForm之外，并为其form属性分配EditForm的id。

这是一个工作代码示例：

    @using System.ComponentModel.DataAnnotations;    

    <EditForm id="@MyID" Model="Model" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />

    <div class="form-group">
        <label for="name">Name: </label>
        <InputText Id="name" Class="form-control" @bind-Value="@Model.Name"> 
        </InputText>
        <ValidationMessage For="@(() => Model.Name)" />

    </div>
    <div class="form-group">
        <label for="body">Text: </label>
        <InputTextArea Id="body" Class="form-control" @bind-Value="@Model.Text"> 
        </InputTextArea>
        <ValidationMessage For="@(() => Model.Text)" />
    </div>
    </EditForm>

    <p>
        <button type="submit" form="@MyID" class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-light" 
                               @onclick="@Cancel">Cancel</button>
    </p>

    @code
    {
        private string MyID = "myid";

        private Comment Model = new Comment();

        public async Task HandleValidSubmit()
        {
            //  await Task.Delay(3000);

            await Task.Run(() =>
            {
                Console.WriteLine("Saving...");
                Console.WriteLine(Model.Name);
                Console.WriteLine(Model.Text);
            });

        }

        private void Cancel()
        {
            Console.WriteLine("Cancelling...");
            Console.WriteLine(Model.Name);
            Console.WriteLine(Model.Text);
        }

       public class Comment
       {
           [Required]
           [MaxLength(10)]
           public string Name { get; set; }

           [Required]
           public string Text { get; set; }

       }

    }

希望这会有所帮助...

【讨论】：

如何添加一个“editcontext”并从我们喜欢的任何地方检查它是否有效？
不确定我得到你...但是，你无法从任何你喜欢的地方检查它是否有效。这与在表单边界之外启动提交操作有很大不同。但是，您可以嵌入嵌入在 EditForm 中的子组件，将模型传递给它们，然后将这些组件当作 EditForm 的一部分来处理。注意：您可以发布一个问题，详细描述您的问题和要求，，，

【解决方案2】：

接受的答案对我有帮助，但我想指出代码部分中的这个变量是不必要的：

private string MyID = "myid";

您可以将其简化为：

<button type="submit" form="MyID" class="btn btn-primary">Save</button>

Snip...

<EditForm id="MyID" Model="Model" OnValidSubmit="HandleValidSubmit">

不需要@MyID razor 语法变量来完成此操作。

【讨论】：

这正是我阅读接受的答案的问题。很好。
你是对的，给定情况下的变量是不必要的。但是，考虑使用变量来控制按钮的form 属性是有帮助的，至少，如果您想使用同一个按钮提交不同的EditForms（例如，具有多个视图的向导）。