Felsöka ASP.NET Core-formulär Blazor

Den här artikeln innehåller felsökningsvägledning för Blazor formulär.

Stora datalaster från formulär och storleksgränsen för SignalR meddelanden

Det här avsnittet gäller endast för Blazor Web Apps, Blazor Server appar och värdbaserade Blazor WebAssembly lösningar som implementerar SignalR.

Om formulärbearbetningen misslyckas på grund av att komponentens formulärnyttolast har överskridit den maximala inkommande SignalR meddelandestorleken som tillåts för hubbmetoder, kan formuläret använda interop för direktuppspelning JS utan att öka gränsen för meddelandestorlek. Mer information om storleksgränsen och felet som genereras finns i ASP.NET Core-vägledningBlazorSignalR.

I följande exempel används ett textområde (<textarea>) med streaming interop JS för att flytta upp till 50 000 byte data till servern.

Lägg till en JavaScript-funktion (JS) getText i appen:

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

Information om var du kan placera JS i en Blazor app finns i JavaScript-plats i ASP.NET Core-apparBlazor.

På grund av säkerhetsöverväganden är nulllängdsströmmar inte tillåtna för streaming JS Interop. Därför trapsar följande StreamFormData komponent en JSException och returnerar en tom sträng om textområdet är tomt när formuläret skickas.

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

Parameterfel för EditForm

InvalidOperationException: EditForm kräver en modellparameter eller en EditContext-parameter, men inte båda.

Bekräfta att EditForm tilldelar en Modeleller en EditContext. Använd inte båda för samma formulär.

När du tilldelar till Modelbekräftar du att modelltypen är instansierad.

Anslutningen är frånkopplad

Fel: Anslutningen kopplades bort på grund av ett fel: "Fel: Servern returnerade ett fel vid avslutning: Anslutningen avslutades med ett fel.".

System.IO.InvalidDataException: Den maximala meddelandestorleken på 32768 byte överskreds. Meddelandestorleken kan konfigureras i AddHubOptions.

Mer information och vägledning finns i följande resurser:

• Stora formulärnyttolaster och storleksgränsen för SignalR meddelanden
• Vägledning för ASP.NET Core BlazorSignalR