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 Apps, Blazor Server aplikasi, dan solusi yang dihosting Blazor WebAssembly yang menerapkan 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 EditFormModelatau .EditContext Jangan gunakan keduanya untuk formulir yang sama.

Saat menetapkan ke Model, konfirmasikan bahwa jenis model dibuat.

Koneksi ion terputus

Kesalahan: Koneksi ion terputus dengan kesalahan 'Kesalahan: Server mengembalikan kesalahan pada penutupan: Koneksi ion 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