Meaningless Notebook

我輩は雑記帖である。名はまだない。


それなりに考えて作ったので備忘録用に。

『InputModel.cs』

public sealed class InputModel
{
    public string Hoge { get; set; } = string.Empty;
}

フォ-ムの項目を定義する為のモデルクラス。

このモデルクラスを使ってコンポ-ネント内外でデ-タをやり取りする。

『InputEditForm.razor』

@if (editContext is not null)
{
    <EditForm EditContext="editContext" FormName="Fuga" method="post" onSubmit="OnSubmit">
        <DataAnnotationValidator />

        <ValidationSummary class="text-danger" role="alert" />

        <div>
            <label>
                Identifier: 
                <InputText @bind-Value="Input.Hoge" />
            </label>
        </div>

        <ValidationMessage For="() => Input.Hoge" class="text-danger" />
    </EditForm>
}

@code {
    [Parameter]
    public required InputModel Input { get; set; }

    [Paramter]
    public EventCallback OnValid { get; set; }

    [Parameter]
    public EventCallback OnInvalid { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        editContext = new(Input);
    }

    private async Task Submit()
    {
        if (!editContext.Validate())
        {
            if (OnInvalid.HasDelegate)
            {
                 await OnInvalid.InvokeAsync();
            }
        }
        else
        {
            if (OnValid.HasDelegate)
            {
                 await OnValid.InvokeAsync();
            }
        }
    }
}

再利用可能なフォ-ムコンポ-ネント。

呼び出し元から InputModel インスタンスと EditForm のバリデ-ションチェックの成否後に実行するコ-ルバック関数を渡してもらう。

『Page.razor』

<InputEditForm Input=@Input OnValid=@OnValid OnInvalid=@OnInvalid />

@code {
    private InputModel Input { get; set; } = new();

    public async Task OnValid()
    {
        // バリデ-ションチェック成功時の処理
    }

    public async Task OnInvalid()
    {
        // バリデ-ションチェック失敗時の処理
    }
}

利用したいペ-ジでは、フォ-ムコンポ-ネントにパラメ-タを渡すだけでいくらでも同じフォ-ムが使いまわせるようになる。

参考元