Solución de problemas de formularios de ASP.NET Core Blazor

En este artículo se proporcionan instrucciones de solución de problemas para formularios de Blazor.

Cargas de formulario grandes y el límite de tamaño del mensaje SignalR

Esta sección solo se aplica a aplicaciones web de Blazor, aplicaciones de Blazor Server y soluciones hospedadas de Blazor WebAssembly que implementan SignalR.

Si se produce un error en el procesamiento de formularios porque la carga del formulario del componente ha superado el tamaño máximo de mensaje SignalR entrante permitido para los métodos de concentrador, el formulario puede adoptar la interoperabilidad de streaming de JS sin aumentar el límite de tamaño del mensaje. Para obtener más información sobre el límite de tamaño y el error que se produce, consulte Guía de BlazorSignalR para ASP.NET Core.

En el ejemplo siguiente se usa un área de texto (<textarea>) con la interoperabilidad de streaming de JS para mover hasta 50 000 bytes de datos al servidor.

Agregue una función de JavaScript (JS) getText a la aplicación:

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

Para obtener información sobre dónde colocar JS en una aplicación Blazor, consulte Ubicación de JavaScript en aplicaciones Blazor de ASP.NET Core.

Por motivos de seguridad, no se permiten las transmisiones de longitud cero para la interoperabilidad de streaming de JS. Por lo tanto, el siguiente componente StreamFormData captura JSException y devuelve una cadena vacía si el área de texto está en blanco cuando se envía el formulario.

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

Error del parámetro EditForm

InvalidOperationException: EditForm requiere un parámetro Model o un parámetro EditContext, pero no ambos.

Confirme que el componente EditForm asigna un componente ModeloEditContext. No use los dos para el mismo formulario.

Al asignar a Model, confirme que se crea una instancia del tipo de modelo.

Conexión desconectada

Error: Conexión desconectada con el error "Error: El servidor ha devuelto un error al cerrarse: Conexión cerrada con un error.".

System.IO.InvalidDataException: Se ha superado el tamaño máximo del mensaje de 32768B. El tamaño del mensaje se puede configurar en AddHubOptions.

Para obtener más información e instrucciones, consulte los siguientes recursos:

• Cargas de formulario grandes y el límite de tamaño del mensaje SignalR
• Guía de BlazorSignalR para ASP NET Core