Solucionar problemas de formulários do ASP.NET Core Blazor

Este artigo fornece diretrizes de solução de problemas para formulários do Blazor.

Grandes conteúdo de formulário e o limite de tamanho da mensagem SignalR

Esta seção se aplica apenas a aplicativos Web Blazor, aplicativos Blazor Server e soluções Blazor WebAssembly hospedadas que implementam SignalR.

Se o processamento do formulário falhar porque o conteúdo do formulário do componente excedeu o tamanho máximo da mensagem SignalR de entrada permitido para métodos de hub, o formulário poderá adotar interoperabilidade JS de streaming sem aumentar o limite de tamanho da mensagem. Para obter mais informações sobre o limite de tamanho e o erro gerado, consulte Diretrizes SignalR do Blazor do ASP.NET.

No exemplo a seguir, uma área de texto (<textarea>) é usada com a interoperabilidade JS de streaming para mover até 50.000 bytes de dados para o servidor.

Adicione uma função getText JavaScript (JS) ao aplicativo:

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

Para obter informações sobre onde colocar JS em um aplicativo Blazor, consulte Localização do JavaScript em aplicativos ASP.NET Core Blazor.

Devido a considerações de segurança, fluxos de comprimento zero não são permitidos para interoperabilidade JS de streaming. Portanto, o componente StreamFormData a seguir intercepta um JSException e retorna uma cadeia de caracteres vazia se a área de texto estiver em branco quando o formulário for enviado.

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

Erro do parâmetro EditForm

InvalidOperationException: EditForm requer um parâmetro Model ou um parâmetro EditContext, mas não ambos.

Confirme se o EditForm atribui um Modelou um EditContext. Não use ambos para o mesmo formulário.

Ao atribuir Model, confirme se foi criada uma instância para o tipo de modelo.

Conexão desconectada

Erro: conexão perdida com 'Erro: o servidor retornou um erro ao fechar: conexão fechada com um erro.'.

System.IO.InvalidDataException: o tamanho máximo da mensagem de 32768B foi excedido. O tamanho da mensagem pode ser configurado em AddHubOptions.

Para obter mais informações e exemplos, confira os seguintes recursos:

• Formulário com grande conteúdo e o limite de tamanho da mensagem SignalR
• Diretrizes BlazorSignalR do ASP.NET Core