Tutoriel 6.3.zip (2.83 mb)
L’objectif de ce tutoriel (troisième du module 6) est d’utiliser les capacités d’ASP.NET afin de connecter directement des contrôles ASP.NET aux bases de données.
Prérequis : Ce tutoriel requiert que la base de données « AdventureWorks » soit installée dans la machine. Cette base peut être téléchargée sur http://sqlserversamples.codeplex.com/ .
Etape 1 – Création des sources de données
L’objectif de cette étape est de montrer comment créer des sources de données utilisées dans des pages web. Nous nous intéresserons en particulier à EntityDataSource qui se connecte à un contexte EntityFramework.
- Créer une nouvelle application ASP.NET vide appelée « TestControlesDB »
- Ajoutez une page appelée « Default.aspx »
- Ajoutez un nouveau modèle EntityFramework et appelez-le « AdventureWorksModel »
- Cliquez ensuite sur « Générer à partir d’une base de données »
- Créez une nouvelle connexion sur « AdventureWorks » ensuite sur « Suivant »
- Dans l’assistant, cochez les tables « Product » et « ProductCategory » et cochez « Pluraliser et Singulariser les entités générées »
- Cliquez sur « Terminer »
- Le modèle est généré comme suit :
- Compilez le projet en appuyant sur « F6 »
- Ouvrez la page « Default.aspx » en mode design
- Faites glisser un composant « EntityDataSource » depuis la barre à outils (onglet données) jusqu’à la page « Default »
- Dans la propriété « ID » de la source, entrez « categorySource »
- Sur la page « Default.aspx », cliquez sur la flèche sur « categorySource » puis sur « Configure la source de données »
- Dans la zone « Connexion Nommées », sélectionnez « AdventureWorksLT2008R2Entities » ou le nom que vous avez choisi pour le contexte
- Cliquez sur « Suivant »
- Dans la zone « Nom de l’ensemble », sélectionnez « ProductCategories »
- Cliquez sur « Terminer »
Etape 2 : Création d’une source de données esclave
L’objectif de cette étape est de créer une source de données filtrée automatiquement. Le but de cette source de données est de n’afficher que les produits appartenant à une certaine catégorie. La récupération du critère de filtrage (ProductCategoryID) s’effectuera via l’URL en utilisant les chaines de connexion.
- Ouvrez « Default.aspx » en mode conception
- Ajoutez un composant « EntityDataSource » à la page et appelez-le « productSource »
- Cliquez sur la flèche puis « Configurer la source de données »
- Dans la connexion « Nommée », sélectionnez « AdventureWorksLT2008R2 » ou le nom du contexte que vous avez choisi
- Cliquez sur « Suivant »
- Dans la zone « Ensemble d’entités », sélectionnez « Product »
- Cochez « Activer les suppressions automatiques » et « Activer les modifications automatiques »
- Cliquez sur « Terminer »
- Dans la fenêtre de propriétés, cliquez sur la propriété « Where » qui permet le filtrage de la source de données, ensuite dans la propriétés, cliquez sur le bouton en forme de pointillés
- Dans la zone « Expression du Where », entrez l’expression suivante :
it.ProductCategoryID == @categorie
- Cliquez sur « Ajouter un paramètre »
- Dans la zone « Nom », entrez « categorie »
- Dans « Source du paramètres », sélectionnez chaine de requête
- Cliquez sur « Afficher les options avancées »
- Dans la propriété « Type », sélectionnez « Int32 »
Etape 3 : Utilisation du contrôle « ListView »
L’objectif de cette étape est d’apprendre à utiliser les templates et de les appliquer au contrôle « ListView ». Le ListView va afficher les enregistrements sous forme de boîtes flottantes avec un maximum de 15 enregistrements par page.
- Ajoutez une feuille de style appelée « Site.css »
- Insérez le code suivant dans le fichier CSS :
body {
font-family: 'Segoe UI' , Tahoma, Geneva, Verdana, sans-serif;
padding : 0;
margin : 0;
}
div.box {
background-color: #9595FF;
border: thin solid #3333CC;
height : 70px;
width : 100px;
float : left;
margin : 2px;
padding : 2px;
}
div.clear {
clear : both;
}
- Ouvrez « Default.aspx » en mode design
- Ajoutez un composant « ListView » à la page
- Cliquez sur la « flèche » à côté du composant
- Dans « Choisir la source de données », sélectionnez « categorySource »
- Ouvrez « Default.aspx » en mode source
- Entre la balise ouvrante <asp :ListView » et sa balise fermante, insérez la balise « ItemTemplate »
- Entre les deux balises ItemTemplate, entrez le code suivant :
<div class="box">
<strong><%
1: # Eval("Name")
%></strong><br />
<a href='Default.aspx?categorie=<%# Eval("ProductCategoryId") %>'>Produits</a>
</div>
- Les balises permettent d’afficher pour chaque enregistrement une « div » dont la classe est « box », une balise « strong » contenant le nom de la catégorie et un lien qui contient une chaîne de requête avec une variable sur le numéro de la catégorie
- Après la balise fermante « ItemTemplate », ajoutez une balise « LayoutTemplate »
- Entrez le code suivant :
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
<div class="clear"></div>
- La balsie <asp :PlaceHolder » va être remplacée par les balises des enregistrements affichés
- Après la balise fermante « div », faites glisser un « DataPager » à partir de la boîte à outils
- Entre la balise ouvrante <asp :DataPager » et sa balise fermante, ajoutez la balise « Fields »
- Ajoutez une balise "asp:NumericPagerField »
- Cliquez sur la balise « dataPager »
- Dans la propriété « PageSize », entrez « 15 »
- Le code sera comme suit :
<asp:ListView ID="ListView1" runat="server" DataSourceID="categorySource">
<ItemTemplate>
<div class="box">
<strong><%
1: # Eval("Name")
%></strong><br />
<a href='Default.aspx?categorie=<%# Eval("ProductCategoryId") %>'>Produits</a>
</div>
</ItemTemplate>
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
<div class="clear"></div>
<asp:DataPager ID="DataPager1" runat="server" PageSize="15">
<Fields>
<asp:NumericPagerField />
</Fields>
</asp:DataPager>
</LayoutTemplate>
</asp:ListView>
- Ouvrez « Default.aspx » en mode design
- Faites glisser « Site.css » sur la page pour appliquer le design
- Exécutez en appuyant sur « F5 »
Etape 4 : Utilisation du contrôle « GridView »
L’objectif de cette étape est d’utiliser le composant « GridView »pour afficher les données de manière tabulaire ainsi que de manipuler les différents types de colonnes.
- Ouvrez « Default.aspx » en mode design
- Ajoutez un contrôle « GridView » sous le « ListView »
- Affectez la source « productSource » au « GridView » que vous venez d’ajouter
- Dans la fenêtre « Propriétés », cliquez sur « Colonnes » puis cliquez sur le bouton en forme de pointillés
- La fenêtre ci-dessous s’affiche,, cliquez sur « Rafraîchir le schéma »
- Cliquez sur « BoundField » puis sur le champ « ProductID » ensuite sur « Ajouter »
- De la même façon, ajoutez le champ « Name » enfant de « BoundField »
- Sélectionnez « TemplateField » puis cliquez sur « Ajouter »
- Dans la propriété « HeaderText », entrez « Numéro, Couleur »
- Sélectionnez « Modifier, Mettre à jour, Annuler », enfant de « CommandField » puis sur « Ajouter »
- Dans la propriété « HeaderText », entrez « Modifier »
- Sélectionnez « Supprimer » enfant de « CommandField » puis sur « Ajouter »
- Entrez « Supprimer » dans la propriété « HeaderText »
- Ouvrez « Default.aspx » en mode source
- Insérez le code suivant entre la balise ouvrante <asp :TemplateField » et sa balise fermante
<ItemTemplate>
<%
1: # Eval("ProductNumber")
%>, <%
1: # Eval("Color")
%>
</ItemTemplate>
<EditItemTemplate>
Couleur : <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Color") %>'></asp:TextBox>
</EditItemTemplate>
- Ouvrez « Default.aspx » en mode conception
- Changez la propriété « AllowPaging » à true
- Développez la propriété « AlternateRowStyle »
- Dans BackColor, « 9DBDFF »
- Appuyez sur « F5 » pour exécuter
Le code est joint à cet article.