Problembehandlung bei ASP.NET Core Blazor-Formularen

Dieser Artikel enthält einen Leitfaden zur Problembehandlung bei Blazor-Formularen.

Große Formularnutzlasten und die Begrenzung der Größe von SignalR-Nachrichten

Dieser Abschnitt gilt nur für Blazor Web Apps, Blazor Server-Apps und gehostete Blazor WebAssembly-Lösungen, die SignalR implementieren.

Wenn bei der Formularverarbeitung ein Fehler auftritt, weil die Formularnutzlast der Komponente die maximal zulässige Größe eingehender SignalR-Nachrichten für Hubmethoden überschritten hat, kann das Formular die JS-Streaminginteroperabilität übernehmen, ohne dass der Grenzwert für die Nachrichtengröße erhöht wird. Weitere Informationen zum Größenlimit und zum ausgelösten Fehler finden Sie in der ASP.NET Core BlazorSignalR-Anleitung.

Im folgenden Beispiel wird ein Textbereich (<textarea>) mit JS-Streaminginteroperabilität verwendet, um bis zu 50.000 Byte an Daten auf den Server zu verschieben.

Fügen Sie der App eine JavaScript-(JS-)getText-Funktion hinzu:

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

Informationen dazu, wo JS in einer Blazor App platziert werden sollen, finden Sie unter JavaScript-Speicherort in ASP.NET CoreBlazor-Apps.

Aus Sicherheitsgründen sind Datenströme der Länge Null für die JS-Streaminginteroperabilität nicht zulässig. Daher wird von der folgenden StreamFormData-Komponente ein JSException abgefangen und eine leere Zeichenfolge zurückgegeben, wenn der Textbereich beim Senden des Formulars leer ist.

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-Parameterfehler

InvalidOperationException: EditForm erfordert einen Model-Parameter oder einen EditContext-Parameter, aber nicht beides.

Vergewissern Sie sich, dass das EditForm ein Model oder einen EditContext zuweist. Verwenden Sie nicht beides für dasselbe Formular.

Stellen Sie beim Zuweisen zu Model sicher, dass der Modelltyp instanziiert wird.

Verbindung getrennt

Fehler: Connection disconnected with error „Error: Server returned an error on close: Connection closed with an error.“ (Die Verbindung wurde durch den folgenden Fehler getrennt: „Der Server hat beim Schließen einen Fehler zurückgegeben: Die Verbindung wurde durch einen Fehler beendet.“)

System.IO.InvalidDataException: The maximum message size of 32768B was exceeded. The message size can be configured in AddHubOptions. (System.IO.InvalidDataException: Die maximale Nachrichtengröße von 32.768 Byte wurde überschritten. Die Nachrichtengröße kann unter AddHubOptions konfiguriert werden.)

Weitere Informationen und Anleitungen finden Sie in folgenden Ressourcen:

• Große Formularnutzlasten und die Begrenzung der Größe von SignalR-Nachrichten
• Leitfaden zu BlazorSignalR in ASP.NET Core