Rozwiązywanie problemów z formularzami ASP.NET Core Blazor
Uwaga
Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z bieżącą wersją, zobacz wersję tego artykułu platformy .NET 9.
Ważne
Te informacje odnoszą się do produktu w wersji wstępnej, który może zostać znacząco zmodyfikowany, zanim zostanie wydany komercyjnie. Firma Microsoft nie udziela żadnych gwarancji, jawnych lub domniemanych, w odniesieniu do informacji podanych w tym miejscu.
Aby zapoznać się z bieżącą wersją, zobacz wersję tego artykułu platformy .NET 9.
Ten artykuł zawiera wskazówki dotyczące rozwiązywania problemów z Blazor formularzami.
Duże ładunki formularzy i limit rozmiaru komunikatu SignalR
Ta sekcja dotyczy Blazor Web Apptylko rozwiązań s, Blazor Server aplikacji i hostowanych Blazor WebAssembly , które implementują usługę SignalR.
Jeśli przetwarzanie formularzy nie powiedzie się, ponieważ ładunek formularza składnika przekroczył maksymalny rozmiar komunikatów przychodzących SignalR dozwolony dla metod centrum, formularz może przyjąć interop przesyłania strumieniowego JS bez zwiększania limitu rozmiaru komunikatów. Aby uzyskać więcej informacji na temat limitu rozmiaru i zgłoszonych błędów, zobacz wskazówki dotyczące ASP.NET CoreBlazorSignalR.
W poniższym przykładzie obszar tekstowy (<textarea>) jest używany z międzyoperacyjnością przesyłania strumieniowego JS do 50 000 bajtów danych na serwerze.
Dodaj funkcję JavaScript (JS) getText do aplikacji:
window.getText = (elem) => {
const textValue = elem.value;
const utf8Encoder = new TextEncoder();
const encodedTextValue = utf8Encoder.encode(textValue);
return encodedTextValue;
};
Aby uzyskać informacje na temat miejsca umieszczenia JS w Blazor aplikacji, zobacz Lokalizacja języka JavaScript w aplikacjach ASP.NET CoreBlazor.
Ze względu na zagadnienia dotyczące zabezpieczeń strumienie o zerowej długości nie są dozwolone w przypadku przesyłania strumieniowego międzyoperacyjności JS . W związku z tym następujący StreamFormData składnik wychwyci element JSException i zwraca pusty ciąg, jeśli obszar tekstowy jest pusty podczas przesyłania formularza.
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;
}
}
}
Jeśli przetwarzanie formularzy nie powiedzie się, ponieważ ładunek formularza składnika przekroczył maksymalny rozmiar komunikatu przychodzącego SignalR dozwolony dla metod centrum, można zwiększyć limit rozmiaru komunikatu. Aby uzyskać więcej informacji na temat limitu rozmiaru i zgłoszonych błędów, zobacz wskazówki dotyczące ASP.NET CoreBlazorSignalR.
Błąd parametru EditForm
InvalidOperationException: Metoda EditForm wymaga parametru Model lub parametru EditContext, ale nie obu tych parametrów.
Upewnij sięEditForm, że element przypisuje element Model lub .EditContext Nie używaj obu dla tego samego formularza.
Podczas przypisywania do Modelelementu upewnij się, że typ modelu jest tworzone.
Rozłączone połączenie
Błąd: Połączenie zostało rozłączone z powodu błędu "Błąd: Serwer zwrócił błąd podczas zamykania: połączenie zostało zamknięte z powodu błędu".
System.IO.InvalidDataException: przekroczono maksymalny rozmiar komunikatu 32768B. Rozmiar komunikatu można skonfigurować w obszarze AddHubOptions.
Aby uzyskać więcej informacji i wskazówek, zobacz następujące zasoby:
