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 die EditForm-Klasse ein Modeloder eine EditContext-Eigenschaft 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