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

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

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 pouze webových aplikací, 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;
        }
    }
}
@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;
        }
    }
}

Pokud zpracování formuláře selže, protože datová část formuláře komponenty překročila maximální velikost příchozí SignalR zprávy povolená pro metody centra, lze zvýšit limit velikosti zprávy. Další informace o limitu velikosti a vyvolané chybě najdete v pokynech k ASP.NET CoreBlazorSignalR.

Chyba parametru EditForm

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

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

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

odpojeno Připojení

Chyba: Připojení odpojení s chybou Chyba: Server vrátil chybu při zavření: Připojení ion uzavřen 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í: