2. Utilisez le composant ASP.NET DataGrid pour afficher les données
Introduction au contenu connexe :
ASP.NET est livré avec de nombreux composants Web pour accélérer le processus de modification des pages Web. Utilisons l'exemple de global, un didacticiel fourni avec Dreamwaver MX, pour montrer comment utiliser ce composant pour afficher des données dans la base de données.
1. Lien avec la base de données et affichage des données avec DataGrid
Il y a la base de données global.mdb de cette instance dans les actifs du répertoire des pages Web. Notre objectif est de générer les données de différentes régions en fonction de la valeur de Region_id dans la table d'emplacement de cette base de données. (Vous pouvez utiliser Access pour ouvrir cette base de données)
Nous pouvons renommer le fichier location3.htm en location3.aspx (le suffixe du fichier de fenêtre Web d'ASP.NET est aspx), puis le modifier.
[Figure 2-1 Pages qui doivent être modifiées]
Supprimons la partie statique simple au milieu et utilisons le DataGrid d'ASP.NET pour implémenter ses fonctionnalités.
[Figure 2-2 Supprimer la partie statique de la page]
L'étape suivante consiste à créer un lien vers la base de données. Cliquez sur le panneau Application à droite, sélectionnez Base de données et cliquez sur le signe +.
Sélectionnez la connexion OLE DB.
[Figure 2-3 Panneau d'application]
Entrez ensuite dans la boîte de dialogue Connexion OLE DB. Ici, vous pouvez écrire manuellement le code de la base de données de liens ou générer automatiquement le code. Nommez l'emplacement du nom de connexion, cliquez sur Créer et le code sera automatiquement généré via l'assistant.
[Figure 2-4 Boîte de dialogue Connexion OLE DB]
Après avoir accédé à la page Propriétés de liaison de données, sélectionnez Fournisseur pour définir le moteur de base de données.
Ce qui est étonnant ci-dessous, c'est qu'il prend en charge 21 méthodes de connexion à la base de données, notamment SQL Server, Oracle, etc.
[Figure 2-5 Page fournie par le moteur de base de données]
C'est l'un des avantages de .NET, car il prend en charge plusieurs bases de données. Il utilise ADO.NET. Après un certain temps, la chaîne de connexion que nous générons à l'aide de cet assistant est écrite conformément à ADO.NET.
Étant donné que la base de données à laquelle nous allons créer un lien est une base de données Access2000, nous sélectionnons le fournisseur OLE DB Microsoft Jet 4.0 et cliquons sur Suivant.
Cliquez sur le bouton à côté de 1.Sélectionnez ou entrez un nom de base de données pour sélectionner la base de données à laquelle vous souhaitez créer un lien.
Annulez le nom d'utilisateur et le mot de passe dans 2. Entrez les informations pour vous connecter à la base de données
[Figure 2-6 Lien de configuration]
Définissez les autorisations de lecture dans Avancé. Sélectionnez Lire, ReadWrite, Write et cliquez sur OK.
[Figure 2-7 Définition des autorisations]
Ajoutez un nom de connexion et cliquez sur Test pour tester le lien de base de données. Si le lien de base de données réussit, cliquez sur OK. Félicitations,
Vous avez lié la base de données à votre site. La prochaine étape devrait être de l'afficher à l'aide de DataGrid
Également dans le panneau Application, sélectionnez Comportements du serveur.
Complétez d'abord les paramètres, cliquez sur déployer et le programme déploiera automatiquement le site et copiera les dossiers DreamweaverCtrls.dll, web.config et _mmServerScripts dans le répertoire du site, qui sont des fichiers nécessaires pour utiliser Dreamweaver MX pour créer des pages Web ASP.net.
[Figure 2-8 Site de déploiement]
Dans le même temps, vous devez d'abord créer un dossier bin dans le répertoire racine du site Web et copier le fichier DreamweaverCtrls.dll dans ce dossier.
Cliquez sur le signe + pour créer d'abord un nouveau DataSet.
[Figure 2-9 Ajouter un ensemble de données]
La connexion consiste à sélectionner la source de données, la table consiste à sélectionner la table, la colonne consiste à sélectionner l'élément et le filtre est utilisé pour filtrer les données. Étant donné que cette page affiche les données de l'Europe, la valeur saisie = 3 est définie. En cas d'échec, Go To est utilisé pour gérer la page à laquelle accéder en cas d'erreur de lecture des données.
[Figure 2-10 Création d'un ensemble de données]
Après avoir créé avec succès le DataSet, vous pouvez créer le DataGrid. Cliquez sur le signe + et sélectionnez DataGrid
[Figure 2-11 Ajouter un DataGrid]
Sélectionnez l'ensemble d'enregistrements requis dans Dataset, définissez s'il faut utiliser l'affichage de pagination et le nombre d'enregistrements par page affichés dans la pagination, définissez la méthode de la barre de navigation dans Navigation et ajoutez ou supprimez les éléments affichés dans les colonnes.
[Figure 2-12 Configuration de DataGrid]
Cliquez sur Modifier pour définir le titre de l'en-tête. Après avoir saisi le titre, cliquez sur OK pour confirmer.
[Figure 2-13 Titre du paramètre]
Cliquez sur OK pour ajouter le DataGrid.
[Figure 2-14 Page d'aperçu]
Dans la page d'aperçu, vous pouvez voir une zone dans laquelle un DataGrid a été ajouté. Appuyez sur F12 pour prévisualiser la page.
Ci-dessous se trouve la page après l'exécution.
[Figure 2-15 Page après l'exécution]
2.Modifiez les propriétés de DataGrid
Introduction au contenu connexe :
Lorsque vous voyez ce composant, pensez-vous que la couleur n'est pas trop jolie ? Alors changeons-la. Le composant DataGrid possède de nombreuses propriétés grâce auxquelles vous pouvez modifier le style du DataGrid.
Analyser le code
Il s'agit du code généré par Dreamwaver MX et peut être modifié en fonction de ses propriétés.
Mode PagerStyle
Vous pouvez définir le format d'affichage de la pagination. NumericPages est affiché en pagination numérique et NextPrev est affiché dans les balises "<" ">".
Style d'en-tête
Définissez le style d'en-tête. Vous pouvez définir HorizontalAlign (alignement horizontal), BackColor (couleur d'arrière-plan), ForeColor (couleur de premier plan), Font-Name (police), Font-Bold (si elle est en gras), Font-Size (taille de la police)
Style d'élément
Définissez le style de chaque élément de données, où les propriétés sont les mêmes que ci-dessus
AlternanceItemStyle
Si vous devez alterner la couleur des éléments de données, vous pouvez ajouter cet élément. Les propriétés sont les mêmes que ci-dessus.
Style de pied de page
Définir le style du pied de page
Style de téléavertisseur
Style du bas
Dreamwaver MX dispose également d'une boîte de dialogue qui peut modifier le style du DataGrid.
Sélectionnez le DataGrid généré et cliquez sur Modifier les colonnes dans son panneau de propriétés.
[Figure 2-16 Panneau de propriétés de DataGrid]
En entrant dans la page de modification des attributs, nous pouvons utiliser "+" et "-" pour augmenter ou diminuer les colonnes souhaitées. En même temps, nous pouvons cliquer sur Modifier pour définir les éléments de données correspondant à chaque élément, ainsi que le nom de l'élément. Titre. Cliquez sur Modifier la colonne pour définir le type de chaque élément, y compris la forme libre (définissez librement les données contenues dans chaque colonne et vous pouvez ajouter votre propre contenu), le lien hypertexte (défini comme un lien hypertexte), les boutons Modifier, Mettre à jour les données, Annuler (peuvent être utilisé pour créer rapidement des pages de gestion), bouton Supprimer (supprimer les enregistrements)
[Figure 2-17 Propriété de colonne DataGrid]
[Figure 2-18, attribut Modifier le type de colonne]
Je crois que grâce à ces propriétés, vous pouvez définir le DataGrid souhaité.