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

Cet article fournit de l’aide pour la résolution des problèmes liés aux formulaires Blazor.

Charges utiles volumineuses du formulaire et limite de taille de message SignalR

Cette section s’applique uniquement aux applications Blazor Web App, aux applications Blazor Server et aux solutions hébergées Blazor WebAssembly qui implémentent SignalR.

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

Erreur du paramètre EditForm

InvalidOperationException : EditForm nécessite un paramètre Model ou un paramètre EditContext, mais pas les deux.

Vérifiez qu’EditForm attribue un Model ou un EditContext. N’utilisez pas les deux pour le même formulaire.

Lors de l’affectation à Model, vérifiez que le type de modèle est instancié.

Connexion déconnectée

Erreur : Connexion déconnectée avec l’erreur « Erreur : Le serveur a retourné une erreur à la fermeture : Connexion fermée avec une erreur. ».

System.IO.InvalidDataException : la taille maximale du message de 32768 octets a été dépassée. La taille du message peut être configurée dans AddHubOptions.

Pour plus d’informations et d’instructions, consultez les ressources suivantes :

• Charges utiles volumineuses du formulaire et SignalR limite de taille de message
• Conseils pour BlazorSignalR ASP.NET Core