ASP.NET Core Blazor フォームのトラブルシューティング

この記事では、Blazor フォームのトラブルシューティングに関するガイダンスを示します。

大きなフォーム ペイロードと SignalR のメッセージ サイズの制限

このセクションは、SignalR を実装する Blazor Web アプリ、Blazor Server アプリ、ホストされている Blazor WebAssembly ソリューションにのみ適用されます。

コンポーネントのフォーム ペイロードがハブ メソッドで許可されている SignalR の最大受信メッセージ サイズを超えたことでフォーム処理が失敗した場合、フォームはメッセージ サイズの制限を増やすことなく、ストリーミング JS 相互運用を採用できます。 サイズ制限とスローされるエラーの詳細については、「ASP.NET Core BlazorSignalR ガイダンス」を参照してください。

次の例では、テキスト領域 (<textarea>) をストリーミング JS 相互運用で使用して、最大 50,000 バイトのデータをサーバーに移動しています。

JavaScript (JS) の getText 関数をアプリに追加します。

window.getText = (elem) => {
  const textValue = elem.value;
  const utf8Encoder = new TextEncoder();
  const encodedTextValue = utf8Encoder.encode(textValue);
  return encodedTextValue;
};

Blazor アプリ内での JS の配置場所については、「ASP.NET Core Blazor アプリでの JavaScript の場所」を参照してください。

セキュリティ上の考慮事項により、長さ 0 のストリームは、ストリーミング JS 相互運用では許可されません。 したがって、次の StreamFormData コンポーネントは JSException をトラップし、フォームの送信時にテキスト領域が空白の場合は空の文字列を返します。

StreamFormData.razor:

@page "/stream-form-data"
@inject IJSRuntime JS
@inject ILogger<StreamFormData> Logger

<h1>Stream form data with JS interop</h1>

<EditForm FormName="StreamFormData" Model="this" OnSubmit="Submit">
    <div>
        <label>
            &lt;textarea&gt; value streamed for assignment to
            <code>TextAreaValue (&lt;= 50,000 characters)</code>:
            <textarea @ref="largeTextArea" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

<div>
    Length: @TextAreaValue?.Length
</div>

@code {
    private ElementReference largeTextArea;

    public string? TextAreaValue { get; set; }

    protected override void OnInitialized() =>
        TextAreaValue ??= string.Empty;

    private async Task Submit()
    {
        TextAreaValue = await GetTextAsync();

        Logger.LogInformation("TextAreaValue length: {Length}",
            TextAreaValue.Length);
    }

    public async Task<string> GetTextAsync()
    {
        try
        {
            var streamRef =
                await JS.InvokeAsync<IJSStreamReference>("getText", largeTextArea);
            var stream = await streamRef.OpenReadStreamAsync(maxAllowedSize: 50_000);
            var streamReader = new StreamReader(stream);

            return await streamReader.ReadToEndAsync();
        }
        catch (JSException jsException)
        {
            if (jsException.InnerException is
                    ArgumentOutOfRangeException outOfRangeException &&
                outOfRangeException.ActualValue is not null &&
                outOfRangeException.ActualValue is long actualLength &&
                actualLength == 0)
            {
                return string.Empty;
            }

            throw;
        }
    }
}

EditForm パラメーターのエラー

InvalidOperationException: EditForm には Model パラメーターか EditContext が必要になりますが、両方とも必要になることはありません。

EditForm によって ModelまたはEditContext が割り当てられることを確認します。 同じフォームに両方を使用しないでください。

Model に割り当てるときは、そのモデルの種類がインスタンス化されていることを確認します。

接続の切断

エラー :次のエラーで接続が切断されました。"エラー: サーバーが終了時にエラーを返しました:接続はエラーで終了しました。"

System.IO.InvalidDataException: メッセージの最大サイズ 32768B を超えました。 メッセージのサイズは、AddHubOptions で構成できます。

情報とガイダンスについては、次のリソースを参照してください。

• 大きなフォーム ペイロードと SignalR のメッセージ サイズの制限
• ASP.NET Core BlazorSignalR ガイダンス