Question

我要创建的内容：

我将创建一个包含数据的Blazor服务器端页面。其中一些数据是只读的，因此用户只能看到它们。用户可以修改其他数据，因此他将通过EditForm对其进行修改。

我不会在EditForm中插入提交按钮，我想创建一个包含一些用户可以单击的按钮的按钮栏。其中之一是全部保存按钮。当用户单击它时，该按钮必须调用 EditForm validate（）函数，以验证EditForm中包含的数据是否仍然有效。

有可能吗？

<button @onclick="Foo">click me</button>

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

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

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

    private void HandleValidSubmit()
    {
        Console.WriteLine("OnValidSubmit");
    }

    private void Foo() 
    {
        //how can I call EditForm validate method?
    }
}

Answer 1

您可以像这样设置EditContext中的EditForm：

<button @onclick="Foo">click me</button>

<EditForm EditContext="_editContext" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

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

@code {
    private ExampleModel _exempleModel = new ExampleModel();
    private EditContext _editContext;

    protected override OnInitialized()
    {
        _editContext = new EditContext(_exempleModel);
        base.OnInitialized();
    }

    private void HandleValidSubmit()
    {
        Console.WriteLine("OnValidSubmit");
    }

    private void Foo() 
    {
        //how can I call EditForm validate method?
        if (_editContext.Validate())
        {            
            // TODO: Add the code to persist your model
        }
    }
}

Answer 2

这是一个有效的示例，将其复制并粘贴到“索引”页面组件中并运行它。您还应该定义此模型类：

Comment.cs

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

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

注意事项：

为了验证模型，您必须调用EditContext.Validate方法
“保存”按钮最初被禁用...
代码还订阅了EditContext的OnFieldChanged事件，该事件用于检查模型的有效性。每当字段更改时，都会调用此方法。
当您跳出第二个字段时，并且模型有效时，将启用“保存”按钮。
结果显示在输出窗口中

希望这对您有帮助...

用下面的代码替换Index.razor中的代码...

<h1>My articles</h1>

<p>Leave me a comment</p>

<EditForm EditContext="@EditContext">
    <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>Action 1</button>
    <button>Action 2</button>
    <button disabled="@Disabled" @onclick="Save">Save</button>
</p>

 @code
 {
     private EditContext EditContext;
     private Comment Model = new Comment();

     protected string Disabled { get; set; } = "disabled";

     private async Task Save ()
    {
        await Task.Delay(3000);
        Console.WriteLine("Saving...");
        Console.WriteLine(Model.Name);
        Console.WriteLine(Model.Text);
    }

    protected override void OnInitialized()
   {
       EditContext = new EditContext(Model);
       EditContext.OnFieldChanged += EditContext_OnFieldChanged;

       base.OnInitialized();
   }

   protected override void OnAfterRender(bool firstRender)
   {
       base.OnAfterRender(firstRender);

       SetSaveDisabledStatus();
   }

private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs 
                                                                          e)
{
    SetSaveDisabledStatus();
}

private void SetSaveDisabledStatus()
{
    if (EditContext.Validate())
    {
        Disabled = null;
    }
    else
    {
        Disabled = "disabled";
    }
}
}

如何从另一个方法调用EditForm validate方法？

2 个答案:

Comment.cs