Устранение неполадок с формами ASP.NET Core Blazor

В этой статье приводятся рекомендации по устранению неполадок для Blazor форм.

Полезные данные больших форм и SignalR ограничение размера сообщения

Этот раздел применяется только к Blazor веб-приложения, Blazor Server приложениям и размещенным решениям, реализующим Blazor WebAssembly SignalR.

Если обработка форм завершается ошибкой, так как полезные данные формы компонента превысили максимальный размер входящих SignalR сообщений, разрешенных для методов концентратора, форма может принять потоковый JS взаимодействие без увеличения ограничения размера сообщения. Дополнительные сведения об ограничении размера и возникновении ошибки см . в ASP.NET основных BlazorSignalR руководствах.

В следующем примере текстовая область (<textarea>) используется с потоком JS взаимодействия для перемещения до 50 000 байт данных на сервер.

Добавьте функцию JavaScript (JS) getText в приложение:

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

Сведения о расположении JS Blazor приложения см. в разделе "Расположение JavaScript" в приложениях ASP.NET CoreBlazor.

Из-за соображений безопасности потоки нулевой длины не допускаются для потокового JS взаимодействия. Поэтому следующий StreamFormData компонент перехватывает JSException и возвращает пустую строку, если текстовая область пуста при отправке формы.

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

InvalidOperationException: EditForm требует параметра Model или параметра EditContext, но не оба.

Убедитесь, что EditForm назначает Model или EditContext. Не используйте оба варианта для одной и той же формы.

При назначении Modelубедитесь, что тип модели создается.

Подключение отключено

Ошибка: подключение отключено с ошибкой "Ошибка: сервер вернул ошибку при закрытии: соединение закрыто с ошибкой."

System.IO.InvalidDataException: превышен максимальный размер сообщения 32768B. Размер сообщения можно настроить в AddHubOptions.

Дополнительные сведения и рекомендации см. в следующих ресурсах:

• Полезные данные больших форм и SignalR ограничение размера сообщения
• Руководство по ASP.NET Core BlazorSignalR