Partager via


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

Remarque

Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 8 de cet article.

Avertissement

Cette version d’ASP.NET Core n’est plus prise en charge. Pour plus d’informations, consultez la Stratégie de prise en charge de .NET et .NET Core. Pour la version actuelle, consultez la version .NET 8 de cet article.

Important

Ces informations portent sur la préversion du produit, qui est susceptible d’être en grande partie modifié avant sa commercialisation. Microsoft n’offre aucune garantie, expresse ou implicite, concernant les informations fournies ici.

Pour la version actuelle, consultez la version .NET 8 de cet article.

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

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 :