Résoudre les problèmes liés aux formulaires Blazor ASP.NET Core

Si le traitement des formulaires échoue, car la charge utile du formulaire du composant a dépassé la taille maximale autorisée des messages SignalR entrants pour les méthodes hub, le formulaire peut adopter la diffusion en continu JS de l’interopérabilité sans augmenter la limite de taille du message. Pour plus d’informations sur la limite de taille et l’erreur levée, consultez Conseils pour BlazorSignalR ASP.NET Core.

Dans l’exemple suivant, une zone de texte (<textarea>) est utilisée avec l’interopérabilité de la diffusion en continu JS pour passer à 50 000 octets de données vers le serveur.

Ajouter une fonction JavaScript (JS) getText à l’application :

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

Pour plus d’informations sur l’endroit où placer JS dans une application Blazor, consultez Emplacement de JavaScript dans les applications Blazor ASP.NET Core.

En raison des considérations de sécurité, les streams à longueur nulle ne sont pas autorisés pour l’interopérabilité de diffusion en continu JS. Par conséquent, le composant StreamFormData suivant intercepte un JSException et retourne une chaîne vide si la zone de texte est vide lorsque le formulaire est envoyé.

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

Si le traitement des formulaires échoue, car la charge utile du formulaire du composant a dépassé la taille maximale autorisée des messages SignalR entrants pour les méthodes hub, la limite de taille du message peut être augmentée. Pour plus d’informations sur la limite de taille et l’erreur levée, consultez Conseils pour BlazorSignalR ASP.NET Core.