Risolvere i problemi relativi ai moduli di Blazor base di ASP.NET

Questo articolo fornisce indicazioni per la risoluzione dei problemi relativi ai Blazor moduli.

Payload di moduli di grandi dimensioni e limite di dimensioni dei SignalR messaggi

Questa sezione si applica solo a Blazor Web Apps, Blazor Server app e soluzioni ospitate Blazor WebAssembly che implementano SignalR.

Se l'elaborazione dei moduli ha esito negativo perché il payload del modulo del componente ha superato le dimensioni massime SignalR consentite per i metodi hub, il modulo può adottare l'interoperabilità di streaming JS senza aumentare il limite di dimensioni del messaggio. Per altre informazioni sul limite di dimensioni e sull'errore generato, vedere ASP.NET Linee guida di baseBlazorSignalR.

Nell'esempio seguente viene usata un'area di testo (<textarea>) con l'interoperabilità di streaming JS per spostare fino a 50.000 byte di dati nel server.

Aggiungere una funzione JavaScript (JS) getText all'app:

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

Per informazioni sulla posizione JS in un'appBlazor, vedere Percorso JavaScript nelle app di base ASP.NETBlazor.

A causa delle considerazioni sulla sicurezza, i flussi di lunghezza zero non sono consentiti per l'interoperabilità di streaming JS . Di conseguenza, il componente seguente StreamFormData intercettare un JSException oggetto e restituisce una stringa vuota se l'area di testo è vuota quando viene inviato il modulo.

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

Errore del parametro EditForm

InvalidOperationException: EditForm richiede un parametro Model o un parametro EditContext, ma non entrambi.

Verificare che l'oggetto EditForm assegni un Model oggetto o un oggetto EditContext. Non usare entrambi per lo stesso modulo.

Quando si assegna a Model, verificare che venga creata un'istanza del tipo di modello.

Connessione disconnessa

Errore: connessione disconnessa con errore 'Errore: il server ha restituito un errore alla chiusura: Connessione chiusa con un errore'.

System.IO.InvalidDataException: è stata superata la dimensione massima del messaggio di 32768B. Le dimensioni del messaggio possono essere configurate in AddHubOptions.

Per altre informazioni e indicazioni, vedere le risorse seguenti:

• Payload di moduli di grandi dimensioni e limite di dimensioni dei SignalR messaggi
• Linee guida per ASP.NET Core BlazorSignalR