Implémentation d'une page de liste / détails dans Blazor

Le composant d'interface utilisateur TelerikWindow de l'interface utilisateur Telerik pour Blazor facilite la mise en œuvre d'un modèle de conception d'interface utilisateur intuitif, permettant à l'utilisateur de sélectionner un élément dans une grille en haut de la page afin d'afficher (ou de mettre à jour) des données. au bas de la page.

Un modèle d’interface utilisateur courant est la page Liste + Détails: le haut de la page comporte une grille (ou peut-être une simple liste déroulante); le bas de la page contient le détail de l'élément sélectionné en haut de la page. Un exemple de ce modèle est une page avec une liste de clients en haut et une liste des commandes client actuellement sélectionnées en bas.

Le composant TelerikWindow de l'interface utilisateur in Telerik UI for Blazor facilite la mise en œuvre de ce modèle. L'utilisation de la fenêtre sépare efficacement votre page en deux vues (la partie supérieure et la partie inférieure), ce qui vous permet de développer la partie inférieure affichée à l'intérieur de la fenêtre, indépendamment de la partie supérieure. Le composant window vous permet de masquer ou de révéler le bas de la page, en fonction de ce qui se passe dans la partie supérieure. Votre décision la plus importante en matière de conception consiste à décider du nombre d'interfaces utilisateur que vous souhaitez placer à l'intérieur de la fenêtre.

Configuration du haut de la page

Par exemple, je commencerai par un élément en haut de ma page. qui affiche une liste de clients (cette liste est conservée dans un champ appelé clients dans le bloc fonctions). À l'intérieur de la grille, j'utilise l'élément pour placer un bouton de sélection sur chaque ligne et le lier à une méthode appelée DisplayDetail à l'aide des éléments et . Le balisage pour créer ma grille ressemble à ceci:

  
    
         Sélectionnez
      
    
    
  

Après la balise de fermeture de l'élément je mets le balisage qui définit les quelques colonnes d'informations clés permettant à l'utilisateur d'identifier le client pour lequel il souhaite voir les détails:

L'étape suivante consiste à charger la grille avec les données client lorsque la page est affichée pour la première fois (je récupère les données d'un noeud final de service dans ce code):

 @functions {
  private IEnumerable  customers = null;

  Protection protégée Task OnInitAsync ()
  {
    HttpClient hc = new HttpClient ();
    HttpResponseMessage rm = wait hc.GetAsync ("https: // localhost: 5001 / clients");
    clients = wait rm.Content.ReadAsAsync <IEnumerable > ();
    StateHasChanged ();
    retourne base.OnInitAsync ();
  }
} 

Avec la partie supérieure (liste) du motif en place, je peux utiliser la TelerikWindow pour implémenter la partie inférieure (détail).

Configuration du bas de la page

Initialement (et jusqu'à ce que l'utilisateur sélectionne un client dans la grille), la fenêtre affichant les détails est indisponible. J'ai donc commencé par définir l'attribut TelerikWindow de Visible . :

Vous pouvez ajouter des attributs supplémentaires à l'élément TelerikWindow pour contrôler l'emplacement et la taille de la fenêtre. L'attribut Taille par exemple, accepte une valeur de l'énumération Size pour utiliser l'une des trois tailles standard ( Large Medium et de grande taille. ). Vous pouvez également créer une taille personnalisée en ajoutant les attributs Height et Width à l'élément. En l'absence de l'un de ces attributs, la fenêtre est automatiquement dimensionnée pour être assez grande pour contenir son contenu.

Vous pouvez également définir l'attribut TelerikWindow sur Centré sur true pour que la fenêtre soit centrée dans la fenêtre du navigateur (et non dans le conteneur de la fenêtre). Pour le positionnement personnalisé, les attributs de TelerikWindow de Top et Left vous permettent de placer la fenêtre où vous le souhaitez (dans la fenêtre du navigateur, bien sûr). Sans les attributs Centered Top et Left la fenêtre s'affichera à l'endroit où elle apparaîtrait dans le "flux normal" de la page.

Wiring En haut du bouton de sélection

L’étape suivante consiste, dans ma méthode DisplayDetail à activer la fenêtre et à récupérer les données à afficher dans la fenêtre lorsque l’utilisateur sélectionne une ligne. Je dois d’abord ajouter deux instructions using en haut de la page pour que le code fonctionne:

 @using Telerik.Blazor
@ utiliser Telerik.Blazor.Components.Window 

Ma méthode DisplayDetail appelée à partir de la grille, sera automatiquement transmise au paramètre GridCommandEventArgs comportant deux propriétés de clé: et IsCancelled . La propriété Item contient une référence à l'objet Customer affiché dans la ligne sélectionnée. la propriété IsCancelled me permet de supprimer le comportement par défaut du bouton (qui consiste à faire passer la ligne du mode affichage au mode édition).

Dans la méthode DisplayDetail Je souhaite simplement déplacer l'objet Client sélectionné dans un champ ou une propriété afin de lier les éléments d'interface utilisateur de la fenêtre aux propriétés de l'objet Customer . Je dois également définir la propriété IsCancelled sur true pour que la ligne ne soit pas mise en mode édition. Ce code ressemble à ceci:

 @functions {
  Client privé actuel client;
    
  public void DisplayDetail (GridCommandEventArgs e)
  {
    currentCustomer = (Client) e.Item;
    e.IsCancelled = true;

    // ...
  }
} 

Bien sûr, plutôt que d'afficher plus d'informations à partir de l'objet Client je pouvais récupérer d'autres informations connexes, telles que les commandes client ou une liste des expéditions, par exemple.

Maintenant qu'il y a des données à afficher, je dois rendre la fenêtre visible. La première étape de ce processus consiste à peaufiner l'attribut Visible de TelerikWindow afin qu'il soit lié à un champ ou à une propriété de mon bloc de fonctions. Le balisage amélioré ressemble à ceci:

Dans le bloc de fonctions de ma page, je dois définir le champ de windowsVisible :

 @functions {
  fenêtre de bool privéeVisible;
  Client privé actuel client;

  // ...
} 

Maintenant, pour que la fenêtre soit visible, il suffit de définir le champ windowVisable de windowVisable sur true et d'appeler l'état de Blazor afin de mettre à jour la page. . Je le ferai à la fin de ma méthode DisplayDetail :

 public void DisplayDetail (GridCommandEventArgs e)
{
  currentCustomer = (Client) e.Item;
  e.IsCancelled = true;
  windowVisible = true;
  StateHasChange ();
} 

Ajout de contenu à la fenêtre

Le haut et le bas de ma page étant définis (et leur interaction), il ne reste plus qu'à ajouter du contenu à la fenêtre. J'ajoute ce contenu dans les éléments de l'élément .

Le balisage suivant ajoute un élément textbox qui, à l'aide de l'attribut bind de Blazor, implémente la liaison de données bidirectionnelle entre la zone textuelle et le Propriété FirstName sur mon objet currentCustomer (c.-à-d. Que les modifications apportées à la propriété modifient la valeur dans la zone de texte et que celles-ci modifient automatiquement la propriété. Le contenu comprend également un bouton sur lequel l'utilisateur peut cliquer pour enregistrer les modifications apportées à cet objet client dans la zone de texte:

  
     Prénom: 
    
    
  
 

J'aurais aussi pu ajouter l'élément dans l'élément pour définir un en-tête pour ma fenêtre.

Dans la méthode SaveChanges appelée depuis mon bouton, il me faut faire quelques choses. Tout d’abord, bien sûr, j’ai besoin d’envoyer le currentCustomer mis à jour au noeud final de service où je l’ai récupéré afin de mettre à jour les données du service. Après cela, je règle le champ qui contrôle la visibilité de ma fenêtre sur false et le champ currentCustomer sur null . La grille se chargera d'afficher les données modifiées afin que je n'ai pas besoin d'appeler StateHasChanged pour mettre à jour l'affichage avec les données modifiées:

 public async void SaveCustomer ()
{
  HttpClient hc = new HttpClient ();
  HttpResponseMessage rm = wait hc.PutAsJsonAsync ("https: // localhost: 5001 / clients",
                                                   currentCustomer);
  currentCustomer = null;
  windowVisible = false;
} 

À partir de maintenant, la question de savoir à quel point je veux que le bas de ma page soit compliqué est compliquée. Si je souhaite disposer de plusieurs vues associées de données détaillées, je pourrais ajouter le contrôle TelerikTab à l'intérieur de ma fenêtre pour organiser ces vues. Si différents types de données dans ma grille requièrent différentes vues, je pourrais ajouter plusieurs fenêtres à ma page et choisir celle à rendre visible dans ma méthode DisplayDetails .

La clé à retenir est que, avec cette structure En place, l'extension de ce modèle d'interface utilisateur dépend du contenu que vous souhaitez mettre dans vos fenêtres et du nombre de fenêtres que vous souhaitez inclure dans votre page.

Le téléchargement complet de ce projet est disponible ici .