フォーム入力を試してみる

新しくなったBlazorで試しに何かつくってみようかと考えると、まずページのRenderModeをどれで作るの？で迷います。 例えばこのブログサイトで記事の表示はSSRが良い気がしますが、InteractiveServerだとどう変わるのでしょう？投稿ページは投稿ボタンがあるのでInteractiveの方が良い気がしますが、SSRでもフォームをPOSTできるのであればSSRでも良い気がしますが、どう違うのでしょう？

「ASP.NET Core Blazor フォームの概要」で登場する、/starship-2 ページで試してみました。

Starship2.razor

@page "/starship-2"
@using System.ComponentModel.DataAnnotations
@* @rendermode InteractiveServer *@
@inject ILogger<Starship2> Logger

<EditForm Model="@Model" OnValidSubmit="@Submit" FormName="Starship2">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <InputText @bind-Value="Model!.Id" />
    <button type="submit">Submit</button>
    <button>Another</button>
</EditForm>
@if (!string.IsNullOrEmpty(Model!.Id))
{
    <p>入力されたデータ: @Model!.Id</p>
}

@code {
    [SupplyParameterFromForm]
    public Starship? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    private void Submit()
    {
        Logger.LogInformation("Id = {Id}", Model?.Id);
    }

    public class Starship
    {
        [Required]
        [StringLength(10, ErrorMessage = "Id is too long.")]
        public string? Id { get; set; }
    }
}

RederModeを変更してみる

@rendermode InteractiveServerをコメントアウトしてみましたが、動作の違いがないようにみえます。 あそらくは、submitじゃないbuttonのonClickイベントを追加すればその違いがわかるのでしょう。 じゃあ、そのボタンがなければ...　@rendermode InteractiveServerは必要なのでしょうか？が、よくわかりませんTT

ボタンを追加してみる

EditForm内に、type="submit"じゃない「Another」ボタンを追加してみました。 SubmitじゃないAnotherボタンでもSubmitイベントが発火します！これはどう解釈すれば良いのでしょうか？ とりあえずはそうゆう仕様だと、つまり挙動をひとつひとつ確認しながら進めるしかなさそうです。