DreamwaverMX et ASP.NET(4)

Auteur：Eve Cole Date de mise à jour：2009-05-31 21:06:17

4. Utilisez le composant DataList pour afficher l'ensemble de données

Introduction connexe :

DataList est un contrôle Repeater amélioré En plus des fonctions originales de Repeater, il peut également définir le nombre de données affichées sur une seule ligne (RepeatColumn), le modèle sélectionné (SelectedItemTemple) et le modèle d'élément modifié (EditTemplate). Cependant, DataList organisera les données de sortie dans un tableau et les affichera, tandis que Repeater est plus fidèle à la définition du modèle et n'ajoutera aucune balise HTML. (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 !)

ÉTAPE 1Créer une page

La page que nous souhaitons créer est celle indiquée ci-dessous. Lorsque nous cliquons sur le lien hypertexte de Détail, les informations détaillées apparaîtront, comme indiqué dans le premier élément. Lorsque vous cliquez sur Fermer, les détails seront fermés et restaurés à leur apparence d'origine.

[Figure 1-1 Page de démonstration]

Commencez par sélectionner les données que vous souhaitez afficher. Afin d'afficher les données de l'Europe (c'est-à-dire Region_ID=3), nous pouvons choisir de filtrer les données de Region_ID=3 dans les paramètres du Dataset.

[Figure 1-2 Contrôle des données]

Utilisez le contrôle Datalist pour créer une page qui affiche brièvement les données. Créons d'abord une page sans données. Sélectionnez ensuite Comportement du serveur dans le panneau Application. Cliquez sur "+" et sélectionnez DataList.

[Figure 1-3 Page de sélection DataList]

Dans la boîte de dialogue qui apparaît, nous pouvons ajouter des modèles de page si nécessaire.

u En-tête : modèle d'en-tête

u Élément : modèle d'élément de données

u Article en alternance : modèle d'affichage croisé

u Modifier l'élément : modifier le modèle ((non affiché par défaut, il doit être affiché via la réponse à l'événement)

u Élément sélectionné : le modèle affiché après la sélection (il doit également être affiché via la réponse à un événement)

u Séparateur : modèle séparé

u Pied de page : modèle de bas de tableau

[Figure 1-4 Boîte de dialogue Modifier la liste de données]
Nous pouvons créer le modèle requis en ajoutant du code HTML au contenu, et nous pouvons également cliquer sur

bouton pour ajouter des éléments de données. Après avoir cliqué sur le bouton, la boîte de dialogue des éléments de données apparaîtra, vous permettant de sélectionner les données requises. Et ajoutez-le dans la zone de saisie Contenu

< %# DataBinder.Eval(Container.DataItem, "élément de données") % >

Le code est utilisé pour afficher les données.

[Figure 1-5 Ajout d'éléments de données]

Afin d'obtenir l'effet d'aperçu, ajoutez d'abord le code : Nom de l'emplacement à l'en-tête. Utilisé pour afficher le titre. Ajouter du code à l'article :

< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >, utilisez Location_name comme titre de chaque élément.

Ajouter du code à un élément alternatif

< fontcolor="#0000FF" >< %#DataSet1.FieldValue("LOCATION_NAME",Container)% >

Afficher les données dans différentes couleurs de police.

Bien que l'élément sélectionné ne puisse pas être affiché immédiatement, nous devons également noter le code pour un appel ultérieur. comme suit:

Adresse:

< %# DataSet1.FieldValue("ADDRESS", Conteneur) % >

 

Ville:

< %# DataSet1.FieldValue("VILLE", Conteneur) % >

 

Téléphone:

< %# DataSet1.FieldValue("TÉLÉPHONE", Conteneur) % >

 

Cliquez sur OK, puis prévisualisez la page. L'image ci-dessous est l'effet du code ci-dessus. Nous implémenterons l'effet d'affichage de l'élément sélectionné dans un instant.

[Figure 1-6 aperçu initial]
Une différence entre DataList et Repeater est que vous pouvez définir une seule ligne pour afficher plusieurs données, qui peuvent être définies dans la fenêtre d'édition DataList.

[Figure 1-7 Configurer une seule ligne pour afficher plusieurs données]

La sélection de l’option Utiliser les sauts de ligne comporte simplement une balise pour séparer les données. Sélectionnez Utiliser un tableau pour sortir sous forme de tableau et vous pouvez déterminer le nombre de données affichées sur une seule ligne en définissant les colonnes du tableau.

ÉTAPE 2 Écrire le code

L'élément sélectionné doit être affiché via les événements, nous devons donc créer un bouton pour démarrer l'événement.

j Ajoutez LinkButton pour générer des événements. Déplacez le curseur entre <ItemTemplate> et </ItemTemplate> dans la fenêtre du code source, cliquez sur plus de balises

, sélectionnez le contrôle asp:LinkButton dans la boîte de dialogue contextuelle.

[Figure 2-1 Boîte de dialogue Sélecteur de balises]

Dans la boîte de dialogue Modifier le LinkButton, définissez les propriétés du LinkButton. Entrez le nom : Détail dans la zone de saisie ID.

Entrez "Détail" dans le nom de la commande qui génère l'événement, puis entrez Détail dans la boîte de dialogue Texte (s'affichera).

[Figure 2-2 Zone d'édition LinkButton]

Sélectionnez ensuite la couleur souhaitée dans Mise en page et cliquez sur OK pour générer le code.

< asp:LinkButton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:LinkButton >

Afin d'avoir cet effet dans l'affichage croisé, nous devons insérer le même code dans <AlternatingItemTemplate> et </AlternatingItemTemplate>.
Dans le même temps, afin de fermer le modèle de sélection contextuelle, une commande doit également être générée, donc un Linkbutton supplémentaire doit être ajouté. Cela nécessite l'insertion de code dans <SelectedItemTemplate></SelectedItemTemplate> :

< asp:LinkButton BackColor="#FFFFFF" CommandName="Fermer" ForeColor="#000000" ID="Fermer" runat="server" Text="Fermer" >< /asp:LinkButton >

kAvec la commande, nous devons également utiliser un programme pour interpréter la commande. En fait, le processus n’est pas compliqué et seule une petite quantité de code doit être ajoutée. Ajoutez le code suivant dans < head ></ /head > :

< langage de script="VB" runat="serveur" >

Sub DataList_ItemCommand (expéditeur en tant qu'objet, e en tant que DataListCommandEventArgs)

Si e.CommandSource.CommandName="Détail" Alors

DataList1.SelectedIndex=e.Item.ItemIndex

ElseIf e.CommandSource.CommandName="Close" Alors

DataList1.SelectedIndex=-1

Fin si

DataList1.DataBind()

Fin du sous-marin

</ /script >

Le programme peut obtenir la commande (CommandName) lorsque vous cliquez sur le LinkButton pour déterminer le programme à exécuter. Lorsque la propriété SelectedIndex de DataList est définie sur e.Item.ItemIndex, la page SelectedItemTemplate sera ouverte. Si la commande est Close et que la propriété SelectedIndex de DataList est définie sur -1 (c'est-à-dire qu'aucun élément de données n'est sélectionné), la DataList utilisera le modèle d'élément ItemTemplate pour afficher cet élément de données.

Ajoutez également l'extrait de code dans < asp:DataList >

OnItemCommand="DataList_ItemCommand"

Pour déclarer la relation avec le segment de programme DataList_ItemCommand.

Appuyez sur "F12" pour prévisualiser et la page affichera l'effet attendu.

[Figure 2-3 Version d'aperçu finale]
Ci-joint le code source du segment principal du programme :

Sub DataList_ItemCommand (expéditeur en tant qu'objet, e en tant que DataListCommandEventArgs)

Si e.CommandSource.CommandName="Détail" Alors

DataList1.SelectedIndex=e.Item.ItemIndex

ElseIf e.CommandSource.CommandName="Close" Alors

DataList1.SelectedIndex=-1

Fin si

DataList1.DataBind()

Fin du sous-marin

< formulaire runat="serveur" >

< asp:DataList id="DataList1"

runat="serveur"

RépéterColonnes="1"

RépéterDirection="Verticale"

RepeatLayout="Flux"

DataSource="< %# DataSet1.DefaultView % >"

OnItemCommand="DataList_ItemCommand" >

<Modèle d'en-tête>

Nom de l'emplacement < /HeaderTemplate >

<Modèle d'élément>

< %# DataSet1.FieldValue("LOCATION_NAME", Conteneur) % >

< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >

< /ItemTemplate>

< AlternatingItemTemplate >

< %# DataSet1.FieldValue("LOCATION_NAME", Conteneur) % >

< /fonte >

< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >< /AlternatingItemTemplate >

<SelectedItemTemplate>Adresse :

< %# DataSet1.FieldValue("ADDRESS", Conteneur) % >

 

Ville:

< %# DataSet1.FieldValue("VILLE", Conteneur) % >

 

Téléphone:

< %# DataSet1.FieldValue("TÉLÉPHONE", Conteneur) % >

 

< asp:LinkButton BackColor="#FFFFFF" CommandName="Fermer" ForeColor="#000000" ID="Fermer" runat="server" Text="Fermer" >< /asp:LinkButton >

< /SelectedItemTemplate>

< /asp:DataList>

< /form>

DataList dispose également d'un modèle pour Modifier l'élément, qui est principalement utilisé pour les mises à jour des données. Ce livre sera présenté dans une section ultérieure.