Fermer

décembre 28, 2020

Événements d'interface utilisateur côté client et autres requêtes courantes dans Blazor


Nous examinons comment implémenter les événements de clic, de sélection et d'interface utilisateur asynchrones côté client, résoudre un problème CORS courant lors de la mise à niveau de .NET Core et afficher l'URL actuelle lors du développement dans Blazor.

Vous êtes donc en train de se familiariser avec l'application Web Blazor. Et vous constatez probablement qu'il adopte une approche différente du modèle de conception MVC. Par conséquent, l'intégration dans Blazor sera très différente de celle de MVC. Nous allons explorer certains des sujets que vous pouvez rencontrer lors du développement dans Blazor. Cela pourrait être des conseils sur la façon de développer un domaine particulier. Ou, cela pourrait être le processus de résolution d'un problème particulier.

Événements d'interface utilisateur côté client

Nous allons d'abord explorer certaines des questions courantes concernant les événements d'interface utilisateur côté client. Si vous êtes familiarisé avec les attributs d'événements HTML dans JavaScript, tels que onclick ou onselect alors les attributs d'événements Blazor vous seront familiers. Blazor prend en charge un grand nombre d'attributs d'événement. Tellement qu'il y en a trop à parcourir dans cet article. Cependant, nous allons passer en revue l'un des attributs d'événement les plus courants, onclick .

Comment faire des événements d'interface utilisateur côté client dans Blazor

Comme pour JavaScript, vous spécifiez un attribut d'événement dans un HTML marque. L'une des différences est que vous devez ajouter un @ avant de spécifier le nom de l'attribut d'événement. Par exemple, si vous utilisez l'attribut d'événement onclick, vous devrez le spécifier comme @onclick comme indiqué ci-dessous.

Cependant, cela ne suffit pas. Si vous ne parvenez pas à déclarer un gestionnaire d'événements lors de la spécification de votre attribut d'événement, Blazor générera une erreur. Par conséquent, vous devez créer un gestionnaire d'événements. Et il y a deux façons de le faire.

La première consiste à spécifier un gestionnaire d'événements en ligne que vous pouvez voir ci-dessous:

 Je m'appelle @MyName 


@code {
chaîne virtuelle publique MyName {get; ensemble; }

    Cliquez sur vide virtuel public (MouseEventArgs e)
    {
        MonNom = "Dave";
    }
}

Pour chaque gestionnaire d'événements, il est recommandé de spécifier le paramètre "événement". Le type de paramètre dépend de l'attribut d'événement que vous utilisez. Par exemple, si vous spécifiez l'attribut d'événement onclick votre paramètre doit être du type MouseEventArgs . Vous devriez pouvoir utiliser IntelliSense dans votre composant Blazor pour déterminer le type de paramètre correct.

Une dernière remarque à ajouter avec les attributs d'événement dans Blazor. Lorsque vous spécifiez un attribut d'événement, la couleur de l'attribut d'événement doit passer du rouge au violet. Cela suppose que vous avez conservé les thèmes de couleurs par défaut dans Visual Studio. S'il ne passe pas au violet, cela signifie qu'il vous manque une référence.

Vous devez vous assurer de référencer l'assemblage Microsoft.AspNetCore.Components.Web dans votre composant Razor. Cela devrait déjà être référencé dans votre fichier _Imports.razor . Si vous avez besoin de le référencer explicitement dans un autre composant Blazor, vous pouvez le faire en utilisant ce qui suit.

 @using Microsoft.AspNetCore.Components.Web

Événement Blazor onchange avec sélection de liste déroulante

En continuant avec le thème des événements de l'interface utilisateur côté client, nous allons maintenant implémenter un gestionnaire d'événements lorsqu'un menu déroulant est modifié. Ceci est largement similaire à l'attribut d'événement onclick . Les seules différences sont que nous utilisons l'attribut d'événement onchange . Nous devons également changer le type de paramètre en ChangeEventArgs lors de la spécification de notre gestionnaire d'événements.

Le type ChangeEventArgs contient une propriété de Value . Cela contient la valeur de ce à quoi le menu déroulant a été modifié. Ainsi, nous pouvons continuer et afficher cette valeur à l'utilisateur final si nous le souhaitons.

 @page "/ select"

La valeur sélectionnée est @SelectedNumber

 @code {
    chaîne virtuelle publique SelectedNumber {get; ensemble; }

    public void SelectANumber (ChangeEventArgs changeEventArgs)
    {
        SelectedNumber = changeEventArgs.Value.ToString ();
    }
}

Exécuter la méthode async sur le clic de bouton dans Blazor

Les exemples que nous avons montrés jusqu'à présent ont été exécutés de manière synchrone. Mais que se passe-t-il si vous souhaitez configurer un gestionnaire d'événements asynchrones? Ou vous souhaitez exécuter une méthode asynchrone dans un gestionnaire d'événements? Eh bien, c’est relativement simple à faire. Lors du référencement de votre gestionnaire d'événements, vous devez spécifier qu'il est asynchrone. De plus, votre méthode doit être définie sur asynchrone et renvoyer un type Task .

  Autres questions courantes
 Cela couvre notre section sur les événements de l'interface utilisateur. Nous allons maintenant jeter un oeil à quelques autres requêtes que les gens posent souvent lors de l'utilisation de Blazor.
 Comment réparer l'erreur «Le protocole CORS ne permet pas de spécifier une origine et des informations d'identification génériques en même temps» [19659006] Il est probable que vous receviez cette erreur car vous venez de mettre à niveau à partir d'ASP.NET Core version 2. Ce problème n'est pas exclusif à Blazor, mais vous pouvez l'obtenir si votre application Blazor fait référence à une autre application, telle qu'un API.
 CORS signifie partage de ressources entre origines. En un mot, il précise quels hôtes peuvent accéder aux données depuis son application. Par conséquent, si votre application Blazor dispose d'une API, vous devez configurer votre API pour qu'elle puisse accepter les requêtes de votre application Blazor.
 Vous l'avez probablement déjà fait. En supposant que c'est une API que votre application Blazor fait référence, si vous regardez dans votre classe  Startup  dans votre API, vous aurez probablement quelque chose de similaire à ce qui suit.
 app .  UseCors  ( policy  = >  policy
.  AllowAnyOrigin  () 
.  AllowAnyMethod  () 
.  AllowAnyHeader  () [19659045].  AllowCredentials  () 
) ; 

 Et c'était bien pour ASP.NET Core 2. Cependant, les choses ont changé dans ASP.NET Core 3. Vous devez maintenant spécifier explicitement quelles origines peuvent communiquer avec votre application. Vous devez spécifier l'hôte de l'application comme ceci.
 app .  UseCors  ( policy  = >  policy
.  WithOrigins  ( new   string  []   {  "https://my-blazor-application.com" [19659070]} ) 
.  AllowAnyMethod  () 
.  AllowAnyHeader  () 
.  AllowCredentials  ( ) 
) ; 

 N'oubliez pas que CORS doit être spécifié sur l'application référencée. Donc, dans ce cas, il serait déclaré dans l'API et non dans l'application Blazor.
 Obtenir l'URL actuelle dans un composant Blazor
 Le dernier point que nous examinerons est d'afficher l'URL actuelle. C'est là que nous devrons utiliser le mot-clé  @inject . À l'intérieur d'un composant Razor, le mot clé  @inject  injecte des services que vous auriez pu déclarer avec l'injection de dépendances.
 Pour obtenir l'URL actuelle, nous devons injecter la classe  NavigationManager  dans notre composant Razor. Vous pouvez trouver le  NavigationManager  dans l'assemblage  Microsoft.AspNetCore.Components . Vous pouvez l'injecter à l'aide de l'extrait de code suivant.
 @inject NavigationManager navigationManager

 Il suffit alors d'appeler la propriété  Uri  qui existe dans  NavigationManager .
 @ navigationManager.Uri

 Ceci renvoie une chaîne avec l'URL complète, y compris le nom d'hôte. Si vous souhaitez obtenir l'URL relative ou des fragments de l'URL, vous pouvez convertir l'URL en un type  Uri .
 @ (new Uri (navigationManager.Uri) .PathAndQuery)

 Progression de votre application Blazor
 Cela devrait avoir résolu certaines de vos requêtes Blazor et vous aidera à aller de l'avant. Il aurait également dû vous donner plus de connaissances sur les fonctionnalités de Blazor.
 En regardant les événements de l'interface utilisateur côté client, il est bon de voir que Blazor prend en charge les attributs d'événement pris en charge dans JavaScript. Il vous permet également de passer un événement pour vous donner les propriétés de l'événement qui s'est déclenché. De plus, il prend en charge les fonctionnalités d'autres applications Web .NET, telles que l'obtention de l'URL actuelle.
 Tous ces facteurs sont très importants pour créer un cadre Web solide côté client et côté serveur.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link