Memecahkan masalah formulir ASP.NET Core Blazor

Artikel ini menyediakan panduan pemecahan masalah untuk Blazor formulir.

Payload formulir besar dan SignalR batas ukuran pesan

Bagian ini hanya berlaku untuk Blazor Web Appsolusi s, Blazor Server aplikasi, dan yang dihosting Blazor WebAssembly yang mengimplementasikan SignalR.

Jika pemrosesan formulir gagal karena payload formulir komponen telah melebihi ukuran pesan masuk SignalR maksimum yang diizinkan untuk metode hub, formulir dapat mengadopsi interop streaming JS tanpa meningkatkan batas ukuran pesan. Untuk informasi selengkapnya tentang batas ukuran dan kesalahan yang dilemparkan, lihat panduan ASP.NET CoreBlazorSignalR.

Dalam contoh berikut, area teks (<textarea>) digunakan dengan interop streaming JS untuk memindahkan hingga 50.000 byte data ke server.

Tambahkan fungsi JavaScript (JS) getText ke aplikasi:

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

Untuk informasi tentang tempat menempatkan JS di Blazor aplikasi, lihat Lokasi JavaScript di aplikasi ASP.NET CoreBlazor.

Karena pertimbangan keamanan, aliran panjang nol tidak diizinkan untuk Interop streaming JS . Oleh karena itu, komponen berikut StreamFormData menjebak JSException dan mengembalikan string kosong jika area teks kosong saat formulir dikirimkan.

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;
        }
    }
}

Kesalahan parameter EditForm

InvalidOperationException: EditForm memerlukan parameter Model, atau parameter EditContext, tetapi tidak keduanya.

Konfirmasikan bahwa menetapkan EditForm Model atau . EditContext Jangan gunakan keduanya untuk formulir yang sama.

Saat menetapkan ke Model, konfirmasikan bahwa jenis model dibuat.

Koneksi terputus

Kesalahan: Koneksi terputus dengan kesalahan 'Kesalahan: Server mengembalikan kesalahan saat ditutup: Koneksi ditutup dengan kesalahan.'.

System.IO.InvalidDataException: Ukuran pesan maksimum 32768B terlampaui. Ukuran pesan dapat dikonfigurasi di AddHubOptions.

Untuk informasi dan panduan selengkapnya, lihat sumber daya berikut ini:

• Payload formulir besar dan SignalR batas ukuran pesan
• panduan ASP.NET Core BlazorSignalR