3. Utilisez le composant Répéteur pour afficher l'ensemble de données
Introduction connexe
Il existe différentes manières d'afficher des données dans ASP.NET, parmi lesquelles Repeater est un autre composant existant. DataGrid affichera toujours les données dans un "tableau". Lorsque nous souhaitons afficher les données de manière plus libre, nous utiliserons certainement le contrôle Repeater.
Il définit le format de sortie des données sous forme de modèle.
ÉTAPE 1. Créez une page Nous pouvons créer un composant Répéteur pour afficher les données en modifiant la page d'origine. Renommez Location1.htm en Location1.aspx. Supprimez la partie originale de la page et créez un Dataset comme dans le chapitre précédent, en filtrant Region_IDEnterValue=1. Utilisons le contrôle Repeater pour créer des pages dynamiques.
jPour utiliser des modèles pour définir le format de sortie, créez d'abord un tableau. On peut le voir à travers la page ApplicationàDatabases
La structure de la base de données.
[Figure 3-1 Structure de la base de données]
En fonction de la structure de la base de données, concevez les tableaux suivants.
[Figure 3-2 Diagramme du modèle]
kLes données doivent être liées au tableau ci-dessous. Faites glisser l'élément de données depuis Liaisons dans le panneau Application vers sa position.
[Figure 3-3 Boîte de dialogue Liaison]
Après la liaison des données, vous obtenez la page suivante :
[Figure 3-4 Page après la liaison des données]
Cela ressemble un peu à du déjà vu, car Dreamwaver MX perpétue la tradition UltraDev de mise en évidence des données. ③ Le formulaire de représentation des données peut également être sélectionné dans la boîte de dialogue Liaison. Après avoir cliqué sur l'élément de données sur la page, le formulaire de représentation des données peut être sélectionné pour les données correspondantes dans la liaison.
[Figure 3-5 Formulaire de représentation des données]
Si vous souhaitez utiliser ce tableau comme modèle pour afficher tous les éléments de données, vous devez sélectionner l'intégralité de ce tableau. Cliquez sur le "+" dans l'élément Comportements du serveur dans le panneau Application et sélectionnez l'élément Répéter la région. 
[Figure 3-6 Sélectionnez la région de répétition] [Figure 3-7 Sélectionnez la méthode de répétition]
Déterminez la méthode que vous souhaitez répéter dans Répéter la région et cliquez sur OK. Vous pouvez maintenant appuyer sur "F12" pour prévisualiser la page.
ÉTAPE 2 Analysez le code (Remarque : afin d'afficher le code, tous les codes suivants comportent des espaces après "<" et avant ">". Nous nous excusons pour la gêne occasionnée !)
< ASP:Repeater runat="server" DataSource='< %# DataSet1.DefaultView % >' >
<Modèle d'élément>
< largeur du tableau="75%" border="0" >
<tr>
< td width="18%" >Nom de l'emplacement< /td >
< td colspan="3" > < %# DataSet1.FieldValue("LOCATION_NAME", Conteneur) % > </ /td >
< /tr >
<tr>
< td >Ville< /td >
< td width="35%" > < %# DataSet1.FieldValue("CITY", Conteneur) % > </ /td >
< td width="19%" >Adresse< /td >
< td width="28%" > < %# DataSet1.FieldValue("ADDRESS", Conteneur) % > </ /td >
< /tr >
<tr>
< td >État</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", Conteneur) % > < /td >
< td >Code< /td >
< td > < %# DataSet1.FieldValue("CODE", Conteneur) % > < /td >
< /tr >
<tr>
< td >Téléphone< /td >
< td > < %# DataSet1.FieldValue("TELEPHONE", Conteneur) % > < /td >
< td >Fax< /td >
< td > < %# DataSet1.FieldValue("FAX", Conteneur) % > < /td >
< /tr >
< /table >
< /ItemTemplate>
< /ASP:Répéteur >
ASP.net affiche toutes les données de manière répétée en créant un modèle ItemTemple. Par conséquent, si vous souhaitez définir le style Répéteur, vous pouvez le faire en définissant le modèle.
Nous pouvons également ajouter d’autres modèles pour obtenir l’effet souhaité.
AlternatingItemTemplate : implémente les données multi-affichages. Données d'affichage croisé avec le modèle de l'ItemTemplate d'origine
SepartorTemplate : modèle de séparateur. Peut être utilisé pour séparer des lignes de données.
HeaderTemplate : modèle d’en-tête. Affiché en haut avec toutes les données.
FooterTemplate : modèle de pied de page. Affiché en bas avec toutes les données.
Sa forme de conception est la même que celle d'ItemTemplate. Entourez simplement la partie que vous souhaitez modéliser avec des marqueurs.
Il existe des raccourcis pour insérer du code via Dreamwaver MX. Cliquez sur l'onglet ASP.NET du panneau Insertion, puis cliquez sur
marque, la boîte de dialogue d’ajout de marque apparaîtra. Sélectionnez le projet Modèles dans les balises ASP.NET. Vous pouvez ensuite sélectionner le code que vous souhaitez ajouter. Dreamwaver MX ajoutera le code à la position où se trouvait votre curseur de saisie d'origine.
[Figure 2-1 Boîte de dialogue Ajouter un marqueur]
Voici le code pour AlternatingItemTemplate, SepartorTemplate, HeaderTemplate et FooterTemplate, qui peut être inséré dans < ASP:Repeater > < /ASP:Repeater >.
< headertemplate >< font color="#666666" size="4" >Tous
Emplacement< /font >< /headertemplate >
<AlternatingItemTemplate>
< largeur du tableau="75%" border="0" bgcolor="#CCCCCC" >
<tr>
< td width="17%" >Nom de l'emplacement< /td >
< td colspan="3" bgcolor="#CCCCCC" >
< %# DataSet1.FieldValue("LOCATION_NAME", Conteneur) % >
</ /td >
< /tr >
<tr>
< td >Ville< /td >
< td width="34%" > < %# DataSet1.FieldValue("CITY", Conteneur) % > </ /td >
< td width="24%" >Adresse< /td >
< td width="25%" > < %# DataSet1.FieldValue("ADDRESS", Conteneur) % > </ /td >
< /tr >
<tr>
< td >État</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", Conteneur) % > < /td >
< td >Code< /td >
< td > < %# DataSet1.FieldValue("CODE", Conteneur) % > < /td >
< /tr >
<tr>
< td >Téléphone< /td >
< td > < %# DataSet1.FieldValue("TELEPHONE", Conteneur) % > < /td >
< td >Fax< /td >
< td > < %# DataSet1.FieldValue("FAX", Conteneur) % > < /td >
< /tr >
< /table >
< /AlternatingItemTemplate >
< modèle de séparateur >< hr width="70%" align="left" >
< /modèle de séparateur >
< footertemplate >< font color="#666666" size="4" >Fin< /font >< /footertemplate >
Lorsque IIS analyse le code, il place le modèle dans la position relative en fonction des mots-clés et obtient la page initialement demandée.
La page générée par le programme ci-dessus est la suivante :
[Figure 2-1 Dernière page]
Le composant Repeater peut créer une page plus libre, mais chaque ligne ne peut afficher qu'un seul ensemble de données. Si vous souhaitez créer une page plus libre, passons à la section suivante et utilisons le contrôle DataList pour afficher les données.