Řešení potíží s formuláři ASP.NET Core Blazor

Tento článek obsahuje pokyny k řešení potíží pro Blazor formuláře.

Velké datové části formuláře a SignalR limit velikosti zprávy

Tato část se týká Blazor Web Apppouze s, Blazor Server aplikací a hostovaných Blazor WebAssembly řešení, která implementují SignalR.

Pokud zpracování formuláře selže, protože datová část formuláře komponenty překročila maximální povolenou velikost příchozí SignalR zprávy pro metody centra, může formulář přijmout interoperability streamování JS bez zvýšení limitu velikosti zprávy. Další informace o limitu velikosti a vyvolané chybě najdete v pokynech k ASP.NET CoreBlazorSignalR.

V následujícím příkladu se používá textová oblast (<textarea>) s interoperabilitou streamování JS k přesunutí až 50 000 bajtů dat na server.

Přidejte do aplikace funkci JavaScriptu (JS): getText

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

Informace o umístění JS v aplikaci najdete v umístění JavaScriptu v aplikacích ASP.NET CoreBlazor.Blazor

Z bezpečnostních důvodů nejsou streamy nulové délky povolené pro interoperability streamování JS . Proto následující StreamFormData komponenta soutiská JSException a vrátí prázdný řetězec, pokud je textová oblast při odeslání formuláře prázdná.

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

Chyba parametru EditForm

InvalidOperationException: EditForm vyžaduje parametr modelu nebo parametr EditContext, ale ne obojí.

Potvrďte, že EditForm je přiřazena Model nebo .EditContext Nepoužívejte oba pro stejný formulář.

Při přiřazování Modelověřte, že se vytvoří instance typu modelu.

Odpojené připojení

Chyba: Připojení bylo odpojeno s chybou Chyba: Server vrátil chybu při zavření: Připojení se ukončilo s chybou.

System.IO.InvalidDataException: Byla překročena maximální velikost zprávy 32768B. Velikost zprávy se dá nakonfigurovat v AddHubOptions.

Další informace a pokyny najdete v následujících zdrojích informací:

• Velké datové části formuláře a SignalR limit velikosti zprávy
• Pokyny pro ASP.NET Core BlazorSignalR