Устранение неполадок с формами ASP.NET Core Blazor
Примечание.
Это не последняя версия этой статьи. В текущем выпуске см . версию .NET 8 этой статьи.
Внимание
Эта информация относится к предварительному выпуску продукта, который может быть существенно изменен до его коммерческого выпуска. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.
В текущем выпуске см . версию .NET 8 этой статьи.
В этой статье приводятся рекомендации по устранению неполадок для Blazor форм.
Полезные данные больших форм и SignalR ограничение размера сообщения
Этот раздел применяется только к Blazor веб-приложения, Blazor Server приложениям и размещенным решениям, реализующим Blazor WebAssemblySignalR.
Если обработка форм завершается ошибкой, так как полезные данные формы компонента превысили максимальный размер входящих 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;
};
Сведения о расположении JSBlazor приложения см. в разделе "Расположение 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>
<textarea> value streamed for assignment to
<code>TextAreaValue (<= 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;
}
}
}
@page "/stream-form-data"
@inject IJSRuntime JS
@inject ILogger<StreamFormData> Logger
<h1>Stream form data with JS interop</h1>
<EditForm Model="this" OnSubmit="Submit">
<div>
<label>
<textarea> value streamed for assignment to
<code>TextAreaValue (<= 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;
}
}
}
Если обработка форм завершается ошибкой, так как полезные данные формы компонента превысили максимальный размер входящих SignalR сообщений, разрешенный для методов концентратора, можно увеличить ограничение размера сообщения. Дополнительные сведения об ограничении размера и возникновении ошибки см . в ASP.NET основных BlazorSignalR руководствах.
Ошибка параметра EditForm
InvalidOperationException: EditForm требует параметра Model или параметра EditContext, но не оба.
Убедитесь, что EditForm назначает ModelилиEditContext. Не используйте оба варианта для одной и той же формы.
При назначении Modelубедитесь, что тип модели создается.
отключение Подключение ion
Ошибка: Подключение ion отключен с ошибкой "Ошибка: сервер вернул ошибку при закрытии: Подключение ion закрыт с ошибкой."
System.IO.InvalidDataException: превышен максимальный размер сообщения 32768B. Размер сообщения можно настроить в AddHubOptions.
Дополнительные сведения и рекомендации см. в следующих ресурсах:
ASP.NET Core
Обратная связь
https://aka.ms/ContentUserFeedback.
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделеОтправить и просмотреть отзыв по