ASP.NET Core les modèles d’hébergement éblouissantsASP.NET Core Blazor hosting models

Par Daniel RothBy Daniel Roth

Éblouissant est un Framework Web conçu pour s’exécuter côté client dans le navigateur sur un Runtime .NET basé sur Webassembly(éblouissant) ou côté serveur dans ASP.net Core (serveur éblouissant).Blazor is a web framework designed to run client-side in the browser on a WebAssembly-based .NET runtime (Blazor WebAssembly) or server-side in ASP.NET Core (Blazor Server). Quel que soit le modèle d’hébergement, les modèles d’application et de composant sont les mêmes.Regardless of the hosting model, the app and component models are the same.

Pour créer un projet pour les modèles d’hébergement décrits dans cet article, Prise en main d’ASP.NET Core éblouissanteconsultez.To create a project for the hosting models described in this article, see Prise en main d’ASP.NET Core éblouissante.

Webassembly éblouissantBlazor WebAssembly

Le modèle d’hébergement principal pour éblouissant s’exécute côté client dans le navigateur sur webassembly.The principal hosting model for Blazor is running client-side in the browser on WebAssembly. L’application Blazor, ses dépendances et le runtime .NET sont téléchargés sur le navigateur.The Blazor app, its dependencies, and the .NET runtime are downloaded to the browser. L’application est exécutée directement sur le thread d’interface utilisateur du navigateur.The app is executed directly on the browser UI thread. Les mises à jour de l’interface utilisateur et la gestion des événements se produisent dans le même processus.UI updates and event handling occur within the same process. Les ressources de l’application sont déployées en tant que fichiers statiques sur un serveur Web ou un service qui prend en charge le contenu statique sur les clients.The app's assets are deployed as static files to a web server or service capable of serving static content to clients.

Webassembly éblouissant : L’application éblouissant s’exécute sur un thread d’interface utilisateur dans le navigateur.

Pour créer une application éblouissant à l’aide du modèle d’hébergement côté client, utilisez le modèle d' application éblouissante Webassembly (dotnet New blazorwasm).To create a Blazor app using the client-side hosting model, use the Blazor WebAssembly App template (dotnet new blazorwasm).

Après avoir sélectionné le modèle application éblouissant Webassembly , vous avez la possibilité de configurer l’application pour utiliser un serveur principal ASP.net core en activant la case à cocher ASP.net Core hébergée (dotnet New blazorwasm--Hosted).After selecting the Blazor WebAssembly App template, you have the option of configuring the app to use an ASP.NET Core backend by selecting the ASP.NET Core hosted check box (dotnet new blazorwasm --hosted). L’application ASP.NET Core sert l’application éblouissant aux clients.The ASP.NET Core app serves the Blazor app to clients. L’application éblouissant webassembly peut interagir avec le serveur sur le réseau à l’aide d’appels d’API Web ou signalr.The Blazor WebAssembly app can interact with the server over the network using web API calls or SignalR.

Les modèles incluent le script éblouissant. webassembly. js qui gère les éléments suivants :The templates include the blazor.webassembly.js script that handles:

  • Téléchargement du Runtime .NET, de l’application et des dépendances de l’application.Downloading the .NET runtime, the app, and the app's dependencies.
  • Initialisation du runtime pour exécuter l’application.Initialization of the runtime to run the app.

Le modèle d’hébergement de webassembly éblouissant offre plusieurs avantages :The Blazor WebAssembly hosting model offers several benefits:

  • Il n’existe aucune dépendance côté serveur .NET.There's no .NET server-side dependency. L’application fonctionne entièrement après son téléchargement sur le client.The app is fully functioning after downloaded to the client.
  • Les ressources et les fonctionnalités du client sont pleinement exploitées.Client resources and capabilities are fully leveraged.
  • Le travail est déchargé du serveur vers le client.Work is offloaded from the server to the client.
  • Un serveur Web ASP.NET Core n’est pas requis pour héberger l’application.An ASP.NET Core web server isn't required to host the app. Les scénarios de déploiement sans serveur sont possibles (par exemple, pour servir l’application à partir d’un CDN).Serverless deployment scenarios are possible (for example, serving the app from a CDN).

L’hébergement d’un webassembly éblouissant présente des inconvénients :There are downsides to Blazor WebAssembly hosting:

  • L’application est limitée aux fonctionnalités du navigateur.The app is restricted to the capabilities of the browser.
  • Le matériel et le logiciel client compatibles (par exemple, la prise en charge de webassembly) sont requis.Capable client hardware and software (for example, WebAssembly support) is required.
  • La taille du téléchargement est supérieure, et les applications prennent plus de temps à se charger.Download size is larger, and apps take longer to load.
  • Le Runtime .NET et la prise en charge des outils sont moins matures..NET runtime and tooling support is less mature. Par exemple, des limitations existent dans la prise en charge de .NET standard et le débogage.For example, limitations exist in .NET Standard support and debugging.

Serveur éblouissantBlazor Server

Avec le modèle d’hébergement de serveur éblouissant, l’application est exécutée sur le serveur à partir d’une application ASP.NET Core.With the Blazor Server hosting model, the app is executed on the server from within an ASP.NET Core app. Les mises à jour de l’interface utilisateur, la gestion des événements et les appels JavaScript sont gérés par le biais d’une connexion SignalR.UI updates, event handling, and JavaScript calls are handled over a SignalR connection.

Le navigateur interagit avec l’application (hébergée à l’intérieur d’une application ASP.NET Core) sur le serveur via une connexion Signalr.

Pour créer une application éblouissant à l’aide du modèle d’hébergement de serveur éblouissant, utilisez le modèle d' application de serveur ASP.net Core éblouissant (dotnet New blazorserver).To create a Blazor app using the Blazor Server hosting model, use the ASP.NET Core Blazor Server App template (dotnet new blazorserver). L’application ASP.NET Core héberge l’application de serveur éblouissante et crée le point de terminaison Signalr où les clients se connectent.The ASP.NET Core app hosts the Blazor Server app and creates the SignalR endpoint where clients connect.

L’application ASP.net Core fait référence à la Startup classe de l’application à ajouter :The ASP.NET Core app references the app's Startup class to add:

  • Services côté serveur.Server-side services.
  • L’application vers le pipeline de traitement des demandes.The app to the request handling pipeline.

Le script† éblouissant. Server. js établit la connexion client.The blazor.server.js script† establishes the client connection. Il est de la responsabilité de l’application de conserver et de restaurer l’état de l’application en fonction des besoins (par exemple, en cas de perte de connexion réseau).It's the app's responsibility to persist and restore app state as required (for example, in the event of a lost network connection).

Le modèle d’hébergement de serveur éblouissant offre plusieurs avantages :The Blazor Server hosting model offers several benefits:

  • La taille du téléchargement est beaucoup plus petite qu’une application de webassembly éblouissante, et l’application se charge beaucoup plus rapidement.Download size is significantly smaller than a Blazor WebAssembly app, and the app loads much faster.
  • L’application tire pleinement parti des fonctionnalités du serveur, notamment de l’utilisation de toutes les API compatibles avec .NET Core.The app takes full advantage of server capabilities, including use of any .NET Core compatible APIs.
  • .NET Core sur le serveur est utilisé pour exécuter l’application, de sorte que les outils .NET existants, tels que le débogage, fonctionnent comme prévu..NET Core on the server is used to run the app, so existing .NET tooling, such as debugging, works as expected.
  • Les clients légers sont pris en charge.Thin clients are supported. Par exemple, les applications de serveur éblouissant fonctionnent avec des navigateurs qui ne prennent pas en charge webassembly et sur des appareils avec des ressources restreintes.For example, Blazor Server apps work with browsers that don't support WebAssembly and on resource-constrained devices.
  • Le .NET/C# base de code de l’application, y compris le code du composant de l’application, n’est pas pris en charge par les clients.The app's .NET/C# code base, including the app's component code, isn't served to clients.

L’hébergement du serveur éblouissant présente des inconvénients :There are downsides to Blazor Server hosting:

  • Une latence plus élevée existe généralement.Higher latency usually exists. Chaque interaction utilisateur implique un tronçon réseau.Every user interaction involves a network hop.
  • Il n’existe aucune prise en charge hors connexion.There's no offline support. Si la connexion cliente échoue, l’application cesse de fonctionner.If the client connection fails, the app stops working.
  • L’évolutivité est difficile pour les applications avec de nombreux utilisateurs.Scalability is challenging for apps with many users. Le serveur doit gérer plusieurs connexions clientes et gérer l’état du client.The server must manage multiple client connections and handle client state.
  • Un serveur de ASP.NET Core est requis pour servir l’application.An ASP.NET Core server is required to serve the app. Les scénarios de déploiement sans serveur ne sont pas possibles (par exemple, pour servir l’application à partir d’un CDN).Serverless deployment scenarios aren't possible (for example, serving the app from a CDN).

†Le script éblouissant. Server. js est pris en charge à partir d’une ressource incorporée dans le ASP.net Core Framework partagé.†The blazor.server.js script is served from an embedded resource in the ASP.NET Core shared framework.

Comparaison avec l’interface utilisateur du rendu serveurComparison to server-rendered UI

L’une des façons de comprendre les applications serveur éblouissantes consiste à comprendre comment elles diffèrent des modèles traditionnels pour le rendu de l’interface utilisateur dans les applications de ASP.NET Core à l’aide de vues Razor ou de Razor Pages.One way to understand Blazor Server apps is to understand how it differs from traditional models for rendering UI in ASP.NET Core apps using Razor views or Razor Pages. Les deux modèles utilisent le langage Razor pour décrire le contenu HTML, mais ils diffèrent considérablement dans le mode de rendu du balisage.Both models use the Razor language to describe HTML content, but they significantly differ in how markup is rendered.

Quand une page Razor ou une vue est restituée, chaque ligne de code Razor émet du code HTML sous forme de texte.When a Razor Page or view is rendered, every line of Razor code emits HTML in text form. Après le rendu, le serveur supprime l’instance de la page ou de la vue, y compris tout état produit.After rendering, the server disposes of the page or view instance, including any state that was produced. Lorsqu’une autre demande pour la page se produit, par exemple lorsque la validation du serveur échoue et que le résumé des validations s’affiche :When another request for the page occurs, for instance when server validation fails and the validation summary is displayed:

  • La page entière est de nouveau restituée au texte HTML.The entire page is rerendered to HTML text again.
  • La page est envoyée au client.The page is sent to the client.

Une application éblouissant est composée d’éléments réutilisables de l’interface utilisateur, appelés composants.A Blazor app is composed of reusable elements of UI called components. Un composant contient C# du code, un balisage et d’autres composants.A component contains C# code, markup, and other components. Quand un composant est rendu, éblouissant produit un graphique des composants inclus similaires à un Document Object Model HTML ou XML (DOM).When a component is rendered, Blazor produces a graph of the included components similar to an HTML or XML Document Object Model (DOM). Ce graphique comprend l’état des composants contenus dans les propriétés et les champs.This graph includes component state held in properties and fields. Éblouissant évalue le graphique du composant pour produire une représentation binaire de la balise.Blazor evaluates the component graph to produce a binary representation of the markup. Le format binaire peut être :The binary format can be:

  • Converti en texte HTML (lors du prérendu).Turned into HTML text (during prerendering).
  • Utilisé pour mettre à jour efficacement le balisage pendant le rendu normal.Used to efficiently update the markup during regular rendering.

Une mise à jour de l’interface utilisateur dans éblouissant est déclenchée par :A UI update in Blazor is triggered by:

  • Intervention de l’utilisateur, telle que la sélection d’un bouton.User interaction, such as selecting a button.
  • Déclencheurs d’application, tels qu’un minuteur.App triggers, such as a timer.

Le graphique est rerendu et une différence d’interface utilisateur (différence) est calculée.The graph is rerendered, and a UI diff (difference) is calculated. Cette différence est le plus petit ensemble de modifications DOM requis pour mettre à jour l’interface utilisateur sur le client.This diff is the smallest set of DOM edits required to update the UI on the client. Le diff est envoyé au client dans un format binaire et appliqué par le navigateur.The diff is sent to the client in a binary format and applied by the browser.

Un composant est supprimé une fois que l’utilisateur l’a quittée sur le client.A component is disposed after the user navigates away from it on the client. Lorsqu’un utilisateur interagit avec un composant, l’état du composant (services, ressources) doit être conservé dans la mémoire du serveur.While a user is interacting with a component, the component's state (services, resources) must be held in the server's memory. Étant donné que l’état de nombreux composants peut être géré simultanément par le serveur, l’épuisement de la mémoire est un problème qui doit être résolu.Because the state of many components might be maintained by the server concurrently, memory exhaustion is a concern that must be addressed. Pour obtenir des conseils sur la création d’une application de serveur éblouissant pour garantir la meilleure utilisation de la mémoire Sécuriser les applications de serveur ASP.NET Core éblouissantesdu serveur, consultez.For guidance on how to author a Blazor Server app to ensure the best use of server memory, see Sécuriser les applications de serveur ASP.NET Core éblouissantes.

ÉlectriquesCircuits

Une application de serveur éblouissant est basée sur ASP.net Core signalr.A Blazor Server app is built on top of ASP.NET Core SignalR. Chaque client communique avec le serveur sur une ou plusieurs connexions Signalr nommé circuit.Each client communicates to the server over one or more SignalR connections called a circuit. Un circuit est l’abstraction de l’éblouissant sur les connexions Signalr qui peuvent tolérer des interruptions réseau temporaires.A circuit is Blazor's abstraction over SignalR connections that can tolerate temporary network interruptions. Lorsqu’un client éblouissant voit que la connexion Signalr est déconnectée, il tente de se reconnecter au serveur à l’aide d’une nouvelle connexion Signalr.When a Blazor client sees that the SignalR connection is disconnected, it attempts to reconnect to the server using a new SignalR connection.

Chaque écran de navigateur (onglet de navigateur ou IFRAME) qui est connecté à une application de serveur éblouissante utilise une connexion Signalr.Each browser screen (browser tab or iframe) that is connected to a Blazor Server app uses a SignalR connection. Il s’agit encore d’une autre distinction importante par rapport aux applications classiques affichées par le serveur.This is yet another important distinction compared to typical server-rendered apps. Dans une application affichée sur un serveur, l’ouverture de la même application dans plusieurs écrans de navigateur n’est généralement pas convertie en demandes de ressources supplémentaires sur le serveur.In a server-rendered app, opening the same app in multiple browser screens typically doesn't translate into additional resource demands on the server. Dans une application de serveur éblouissant, chaque écran de navigateur requiert un circuit distinct et des instances distinctes de l’état du composant à gérer par le serveur.In a Blazor Server app, each browser screen requires a separate circuit and separate instances of component state to be managed by the server.

Éblouissant prend en compte la fermeture d’un onglet de navigateur ou la navigation vers une URL externe un arrêt normal .Blazor considers closing a browser tab or navigating to an external URL a graceful termination. En cas de résiliation appropriée, le circuit et les ressources associées sont immédiatement libérés.In the event of a graceful termination, the circuit and associated resources are immediately released. Un client peut également se déconnecter de manière non appropriée, par exemple en raison d’une interruption du réseau.A client may also disconnect non-gracefully, for instance due to a network interruption. Le serveur éblouissant stocke les circuits déconnectés pour un intervalle configurable afin de permettre au client de se reconnecter.Blazor Server stores disconnected circuits for a configurable interval to allow the client to reconnect. Pour plus d’informations, consultez la section reconnexion au même serveur .For more information, see the Reconnection to the same server section.

Latence de l’interface utilisateurUI Latency

La latence de l’interface utilisateur est le temps qu’il faut après une action initiée jusqu’au moment où l’interface utilisateur est mise à jour.UI latency is the time it takes from an initiated action to the time the UI is updated. Des valeurs plus petites pour la latence de l’interface utilisateur sont impératives pour qu’une application soit réactive à un utilisateur.Smaller values for UI latency are imperative for an app to feel responsive to a user. Dans une application de serveur éblouissant, chaque action est envoyée au serveur, traitée et une comparaison d’interface utilisateur est renvoyée.In a Blazor Server app, each action is sent to the server, processed, and a UI diff is sent back. Par conséquent, la latence de l’interface utilisateur est la somme de la latence du réseau et de la latence du serveur lors du traitement de l’action.Consequently, UI latency is the sum of network latency and the server latency in processing the action.

Pour une application métier limitée à un réseau d’entreprise privé, l’effet sur les perceptions des utilisateurs de la latence en raison de la latence du réseau est généralement inperceptible.For a line of business app that's limited to a private corporate network, the effect on user perceptions of latency due to network latency are usually imperceptible. Pour une application déployée sur Internet, la latence peut devenir perceptible pour les utilisateurs, en particulier si les utilisateurs sont largement répartis géographiquement.For an app deployed over the Internet, latency may become noticeable to users, particularly if users are widely distributed geographically.

L’utilisation de la mémoire peut également contribuer à la latence de l’application.Memory usage can also contribute to app latency. L’augmentation de l’utilisation de la mémoire permet de garbage collection fréquentes ou la pagination de la mémoire sur le disque, qui dégradent les performances des applications et augmentent la latence de l’interface utilisateur.Increased memory usage results in frequent garbage collection or paging memory to disk, both of which degrade app performance and consequently increase UI latency. Pour plus d'informations, consultez Sécuriser les applications de serveur ASP.NET Core éblouissantes.For more information, see Sécuriser les applications de serveur ASP.NET Core éblouissantes.

Les applications de serveur éblouissantes doivent être optimisées pour réduire la latence de l’interface utilisateur en réduisant la latence du réseau et l’utilisation de la mémoire.Blazor Server apps should be optimized to minimize UI latency by reducing network latency and memory usage. Pour une approche de la mesure de la latence du Héberger et déployer ASP.NET Core serveur éblouissantréseau, consultez.For an approach to measuring network latency, see Héberger et déployer ASP.NET Core serveur éblouissant. Pour plus d’informations sur Signalr et éblouissant, consultez :For more information on SignalR and Blazor, see:

Reconnexion au même serveurReconnection to the same server

Les applications serveur éblouissantes nécessitent une connexion active Signalr au serveur.Blazor Server apps require an active SignalR connection to the server. Si la connexion est perdue, l’application tente de se reconnecter au serveur.If the connection is lost, the app attempts to reconnect to the server. Tant que l’état du client est toujours en mémoire, la session client reprend sans perte d’État.As long as the client's state is still in memory, the client session resumes without losing state.

Lorsque le client détecte que la connexion a été perdue, une interface utilisateur par défaut est affichée à l’utilisateur pendant que le client tente de se reconnecter.When the client detects that the connection has been lost, a default UI is displayed to the user while the client attempts to reconnect. En cas d’échec de la reconnexion, l’utilisateur a la possibilité de réessayer.If reconnection fails, the user is provided the option to retry. Pour personnaliser l’interface utilisateur, définissez un élément components-reconnect-modal avec id comme dans la page Razor _Host. cshtml .To customize the UI, define an element with components-reconnect-modal as its id in the _Host.cshtml Razor page. Le client met à jour cet élément avec l’une des classes CSS suivantes en fonction de l’état de la connexion :The client updates this element with one of the following CSS classes based on the state of the connection:

  • components-reconnect-show– Affichez l’interface utilisateur pour indiquer que la connexion a été perdue et que le client tente de se reconnecter.components-reconnect-show – Show the UI to indicate the connection was lost and the client is attempting to reconnect.
  • components-reconnect-hide– Le client dispose d’une connexion active et masque l’interface utilisateur.components-reconnect-hide – The client has an active connection, hide the UI.
  • components-reconnect-failed– Échec de la reconnexion.components-reconnect-failed – Reconnection failed. Pour tenter une nouvelle connexion, appelez window.Blazor.reconnect().To attempt reconnection again, call window.Blazor.reconnect().

Reconnexion avec état après le prérenduStateful reconnection after prerendering

Les applications serveur éblouissantes sont configurées par défaut pour prérestituer l’interface utilisateur sur le serveur avant que la connexion cliente au serveur soit établie.Blazor Server apps are set up by default to prerender the UI on the server before the client connection to the server is established. Elle est configurée dans la page Razor _Host. cshtml :This is set up in the _Host.cshtml Razor page:

<body>
    <app>@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))</app>

    <script src="_framework/blazor.server.js"></script>
</body>

RenderModeConfigure si le composant :RenderMode configures whether the component:

  • Est prérendu dans la page.Is prerendered into the page.
  • Est rendu en HTML statique sur la page ou s’il contient les informations nécessaires pour démarrer une application éblouissant à partir de l’agent utilisateur.Is rendered as static HTML on the page or if it includes the necessary information to bootstrap a Blazor app from the user agent.
RenderMode DescriptionDescription
ServerPrerendered Génère le rendu du composant en HTML statique et comprend un marqueur pour une application de serveur éblouissante.Renders the component into static HTML and includes a marker for a Blazor Server app. Au démarrage de l’agent utilisateur, ce marqueur est utilisé pour démarrer une application éblouissante.When the user-agent starts, this marker is used to bootstrap a Blazor app. Les paramètres ne sont pas pris en charge.Parameters aren't supported.
Server Restitue un marqueur pour une application de serveur éblouissante.Renders a marker for a Blazor Server app. La sortie du composant n’est pas incluse.Output from the component isn't included. Au démarrage de l’agent utilisateur, ce marqueur est utilisé pour démarrer une application éblouissante.When the user-agent starts, this marker is used to bootstrap a Blazor app. Les paramètres ne sont pas pris en charge.Parameters aren't supported.
Static Génère le rendu du composant en HTML statique.Renders the component into static HTML. Les paramètres sont pris en charge.Parameters are supported.

Le rendu des composants serveur à partir d’une page HTML statique n’est pas pris en charge.Rendering server components from a static HTML page isn't supported.

Le client se reconnecte au serveur avec le même État que celui utilisé pour prégénérer l’application.The client reconnects to the server with the same state that was used to prerender the app. Si l’état de l’application est toujours en mémoire, l’état du composant n’est pas restitué après l’établissement de la connexion Signalr.If the app's state is still in memory, the component state isn't rerendered after the SignalR connection is established.

Restituer des composants interactifs avec état à partir de pages et de vues RazorRender stateful interactive components from Razor pages and views

Les composants interactifs avec état peuvent être ajoutés à une page ou à une vue Razor.Stateful interactive components can be added to a Razor page or view.

Lors du rendu de la page ou de la vue :When the page or view renders:

  • Le composant est prérendu avec la page ou la vue.The component is prerendered with the page or view.
  • L’état initial du composant utilisé pour le prérendu est perdu.The initial component state used for prerendering is lost.
  • Un nouvel état de composant est créé lorsque la connexion Signalr est établie.New component state is created when the SignalR connection is established.

La page Razor suivante affiche un Counter composant :The following Razor page renders a Counter component:

<h1>My Razor Page</h1>

@(await Html.RenderComponentAsync<Counter>(RenderMode.ServerPrerendered))

Rendre des composants non interactifs à partir de pages et de vues RazorRender noninteractive components from Razor pages and views

Dans la page Razor suivante, le MyComponent composant est rendu statiquement avec une valeur initiale spécifiée à l’aide d’un formulaire :In the following Razor page, the MyComponent component is statically rendered with an initial value that's specified using a form:

<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

@(await Html.RenderComponentAsync<MyComponent>(RenderMode.Static, 
    new { InitialValue = InitialValue }))

@code {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Étant MyComponent donné que est rendu statiquement, le composant ne peut pas être interactif.Since MyComponent is statically rendered, the component can't be interactive.

Détecter quand l’application est prérenduDetect when the app is prerendering

Bien qu’une application de serveur éblouissante soit prérendue, certaines actions, telles que l’appel en JavaScript, ne sont pas possibles, car une connexion avec le navigateur n’a pas été établie.While a Blazor Server app is prerendering, certain actions, such as calling into JavaScript, aren't possible because a connection with the browser hasn't been established. Les composants peuvent avoir besoin d’être restitués différemment lorsqu’ils sont prérendus.Components may need to render differently when prerendered.

Pour différer les appels Interop JavaScript jusqu’à ce que la connexion avec le navigateur soit établie, OnAfterRenderAsync vous pouvez utiliser l’événement du cycle de vie du composant.To delay JavaScript interop calls until after the connection with the browser is established, you can use the OnAfterRenderAsync component lifecycle event. Cet événement est appelé uniquement une fois que l’application est entièrement rendue et que la connexion cliente est établie.This event is only called after the app is fully rendered and the client connection is established.

@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime

<input @ref="myInput" value="Value set during render" />

@code {
    private ElementReference myInput;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            JSRuntime.InvokeAsync<object>(
                "setElementValue", myInput, "Value set after render");
        }
    }
}

Le composant suivant montre comment utiliser l’interopérabilité JavaScript dans le cadre de la logique d’initialisation d’un composant d’une manière compatible avec le prérendu.The following component demonstrates how to use JavaScript interop as part of a component's initialization logic in a way that's compatible with prerendering. Le composant montre qu’il est possible de déclencher une mise à jour de OnAfterRenderAsyncrendu depuis l’intérieur.The component shows that it's possible to trigger a rendering update from inside OnAfterRenderAsync. Le développeur doit éviter de créer une boucle infinie dans ce scénario.The developer must avoid creating an infinite loop in this scenario.

JSRuntime.InvokeAsync est appelé, ElementRef est utilisé uniquement dans OnAfterRenderAsync et non dans une méthode de cycle de vie antérieure, car il n’y a pas d’élément JavaScript tant que le composant n’est pas rendu.Where JSRuntime.InvokeAsync is called, ElementRef is only used in OnAfterRenderAsync and not in any earlier lifecycle method because there's no JavaScript element until after the component is rendered.

StateHasChangedest appelé pour restituer à nouveau le composant avec le nouvel état obtenu à partir de l’appel JavaScript Interop.StateHasChanged is called to rerender the component with the new state obtained from the JavaScript interop call. Le code ne crée pas de boucle infinie, car StateHasChanged est nullappelé uniquement lorsque infoFromJs est.The code doesn't create an infinite loop because StateHasChanged is only called when infoFromJs is null.

@page "/prerendered-interop"
@using Microsoft.AspNetCore.Components
@using Microsoft.JSInterop
@inject IComponentContext ComponentContext
@inject IJSRuntime JSRuntime

<p>
    Get value via JS interop call:
    <strong id="val-get-by-interop">@(infoFromJs ?? "No value yet")</strong>
</p>

<p>
    Set value via JS interop call:
    <input id="val-set-by-interop" @ref="myElem" />
</p>

@code {
    private string infoFromJs;
    private ElementReference myElem;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && infoFromJs == null)
        {
            infoFromJs = await JSRuntime.InvokeAsync<string>(
                "setElementValue", myElem, "Hello from interop call");

            StateHasChanged();
        }
    }
}

Pour restituer de façon conditionnelle un contenu différent selon que l’application est actuellement prérendu du contenu, IsConnected utilisez la propriété IComponentContext sur le service.To conditionally render different content based on whether the app is currently prerendering content, use the IsConnected property on the IComponentContext service. Pour les applications serveur éblouissantes IsConnected , retourne true uniquement s’il existe une connexion active au client.For Blazor Server apps, IsConnected only returns true if there's an active connection to the client. Elle retourne true toujours dans les applications webassembly éblouissantes.It always returns true in Blazor WebAssembly apps.

@page "/isconnected-example"
@using Microsoft.AspNetCore.Components.Services
@inject IComponentContext ComponentContext

<h1>IsConnected Example</h1>

<p>
    Current state:
    <strong id="connected-state">
        @(ComponentContext.IsConnected ? "connected" : "not connected")
    </strong>
</p>

<p>
    Clicks:
    <strong id="count">@count</strong>
    <button id="increment-count" @onclick="@(() => count++)">Click me</button>
</p>

@code {
    private int count;
}

Configurer le client Signalr pour les applications serveur éblouissantesConfigure the SignalR client for Blazor Server apps

Parfois, vous devez configurer le client Signalr utilisé par les applications serveur éblouissantes.Sometimes, you need to configure the SignalR client used by Blazor Server apps. Par exemple, vous pouvez configurer la journalisation sur le client Signalr pour diagnostiquer un problème de connexion.For example, you might want to configure logging on the SignalR client to diagnose a connection issue.

Pour configurer le client Signalr dans le fichier pages/_Host. cshtml :To configure the SignalR client in the Pages/_Host.cshtml file:

  • Ajoutez un autostart="false" attribut à la <script> balise du script éblouissant. Server. js .Add an autostart="false" attribute to the <script> tag for the blazor.server.js script.
  • Appelez Blazor.start et transmettez un objet de configuration qui spécifie le générateur signalr.Call Blazor.start and pass in a configuration object that specifies the SignalR builder.
<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
  Blazor.start({
    configureSignalR: function (builder) {
      builder.configureLogging(2); // LogLevel.Information
    }
  });
</script>

Ressources supplémentairesAdditional resources