Udostępnij za pośrednictwem

Rozwiązywanie problemów z formularzami ASP.NET Core Blazor

  • Artykuł

Uwaga

Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z bieżącą wersją, zapoznaj się z wersją tego artykułu platformy .NET 8.

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ą, zapoznaj się z wersją tego artykułu platformy .NET 8.

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 tylko aplikacji internetowych, Blazor Server aplikacji i rozwiązań 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>
            &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;
        }
    }
}

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

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 Modellub .EditContext Nie używaj obu dla tego samego formularza.

Podczas przypisywania do Modelelementu upewnij się, że typ modelu jest tworzone.

rozłączenie Połączenie ion

Błąd: Połączenie ion rozłączony z błędem "Błąd: Serwer zwrócił błąd podczas zamykania: Połączenie ion został zamknięty 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: