[PDF] Tutoriel sur contrôles ASP.Net : ListView, LinqDataSource et DataPager | Cours informatique

(1)

Les nouveaux contrôles

que propose ASP.Net 3.5

Z

(2)

Sommaire

1 Introduction ... 3 2 ListView ... 4 3 EntityDataSource ... 13 4 LinqDataSource ... 17 5 DataPager ... 19 6 Conclusion ... 20

(3)

1 Introduction

Le Framework 3.5 inclut dans ses améliorations, pour l’ASP.net, de nouveaux contrôles. Certains de ces contrôles remplacent des anciens et d’autres sont entièrement nouveaux. Nous allons voir dans ce support de cour quels sont ces nouveaux contrôles et comment les utiliser.

(4)

2 ListView

Le ListView est un nouveau contrôle de data binding. ASP.NET compte déjà un certain nombre de contrôle de data binding (environ 10), mais la bonne nouvelle est que ListView combine toutes les fonctionnalités des autres contrôles. En effet, ListView permet de faire du data binding plus facilement que les précédents contrôles. Ce contrôle permet aux utilisateurs de sélectionner, trier, supprimer, modifier et insérer des enregistrements comme le GridView , mais , à la différence de celui-ci, il fournit le contrôle complet de la page HTML généré. L’utilisation des contrôles basiques est très similaire à l’utilisation de Repeater.

Le ListView contient une panoplie de Templates qu’il est possible d’appliquer :

Propriétés description

LayoutTemplate _{C’est le Template de tout le}_ListView_{sauf les items.}

ItemTemplate _{C’est le Template des items et donc correspond à la manière dont}

seront affichées les données.

AlternatingItemTemplate_{C’est le Template est utilisé alternativement avec le} ItemTemplate en prenant une apparence différentes de ce dernier. Ce qui permet une meilleure visualisation de la page. Ce Template prend les mêmes contrôles que le ItemTemplate.

SelectedItemTemplate _{C’est le template des éléments ou des données sélectionnés.} EmptyItemTemplate _{Ce Template est utilisé lorsque l’on groupe des Items et qu’il en}

manque. Par exemple, on groupe par 10 et on a 6 items, il manquerait 4 items. C’est 4 derniers sont remplacés par

EmptyItemTemplate.

EmptyDataTemplate _{Ce template sera appliqué lors que les données liées au}_ListView

ne contiennent aucune valeur (donc aucun item). Il empêche que le ListView soit vide en affichant un Template alternatif.

ItemSeparatorTemplate _{C’est le Template utilisé pour spécifier ce qui séparera chaque}

élément unique du ItemTemplate.

GroupTemplate _{Ce Template permet de gérer la disposition pour les données du} ListView

GroupSeparatorTemplate _{Ce Template permet de séparer chaque groupe par des éléments}

personnalisés.

EditItemTemplate _{C’est le Template du mode Edition.} InsertItemTemplate _{C’est le Template du mode Insertion.}

Pour passer d’un mode à l’autre on utilise des Button ou LinkButton qui possèdent la propriété

(5)

Un petit exemple utilisant certaines de ces propriétés :

Tout d’abord créez un nouveau projet, ensuite importer des images dans votre projet, puis créer une base(ou prenez en une déjà existante). Voici la base que nous allons utiliser dans cet exemple :

Attention de ne pas mettre ID en Int sinon une exception ce lèvera lors de la compilation de notre projet

Venons en maintenant à notre ListView : //Page.aspx

<asp:ListView runat="server" ID="ListImage">

<asp:PlaceHolder runat="server" ID="itemPlaceHolder"/>

<%--- En utilisant <asp:PlaceHolder>, l'ID doit determiner pour qui le

PlaceHolder doit etre attribué,dans notre cas celui de l'item.

---%> </LayoutTemplate> <ItemTemplate> <%--- Le <%#Eval() %> nous sert à bind les données de la Table 3(dans notre

cas)

---%>

</ItemTemplate>

Sorry - Image not found </EmptyDataTemplate>

(6)

Il existe plusieurs façons de lier des données à un ListView. Nous allons en voir deux ici.

La Première consiste à créer une classe LinqToSQL et à y insérer la table à lier afin que le

DataContext soit reconnu :

Créons tout d’abord notre classe LinqToSQL :

Ensuite ouvrez votre .dbml et mettez la Table que vous souhaitez lier a votre ListView dans le .dbml avec un simple drag and drop.

(7)

Ensuite allez dans le Default.aspx.cs :

Ainsi notre Data Model est crée et est reconnu dans notre page default.

La deuxième méthode consiste, elle, à lier directement notre table au ListView en mettant la liaison à la base directement dans le code aspx :

//Page.aspx

<asp:SqlDataSource ID="ImagesDataSource" runat="server"

ConnectionString="Data Source=PC-DE-ANTHO\SQLEXPRESS;Initial Catalog=SQLExpress_test; Integrated Security=True"

SelectCommand="SELECT ID, NomImage, vraiNomImage FROM Table3">

</asp:SqlDataSource>

<asp:ListView ID="DepartmentsListView"

DataSourceID="ImagesDataSource" DataKeyNames="ID" runat="server"> […]

</asp:ListView>

//C#

protected void Page_Load(object sender, EventArgs e) {

// Le DataContext qui suit ne peut exister que si nous creeons une classe LinQ to SQL, c'est la prochaine étape.

MyDataContext Image = new MyDataContext();

// Ici, je veux que le DataContext « MyDataContext » soit reconnu.

// Requete LinQ to SQL pour récupérer les informations des images

var My_image = from i in Image.Table3 select i;

ListImage.DataSource = My_image; ListImage.DataBind();

}

‘VB.NET

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

' Le DataContext qui suit ne peut exister que si nous creeons une

classe LinQ to SQL, c'est la prochaine étape.

Dim Image As New MyDataContext()

' Ici, je veux que le DataContext « MyDataContext » soit reconnu.

' Requete LinQ to SQL pour récupérer les informations des images

Dim My_image = From i In Image.Table3 _ Select i

ListImage.DataSource = My_image ListImage.DataBind()

(8)

Dans la suite de ce cours, j’utiliserais la dernière méthode que je trouve personnellement plus facile à utiliser.

Maintenant que notre table est liée, nous pouvons voir que si on compile notre page, notre

ListView contiendra les données de notre table. Si nous vidons toutes les données de cette Table nous aurons le message d’erreurs que nous avons entré dans les < EmptyDataTemplate > : « Sorry – Image not found »

Nous allons maintenant voir comment interagir avec les données de la table au travers du

ListView.

Pour commencer nous allons faire un tableau afin que les données soit plus lisible.

Pour ce faire il suffit de mettre le début du tableau dans le LayoutTemplate et de remplacer le

(9)

<asp:ListView ID="DepartmentsListView"

DataSourceID="ImagesDataSource" DataKeyNames="ID"

InsertItemPosition="LastItem" runat="server">

<%--Ne pas oblier de rajouter InsetItemPosition afin de choisir

ou se trouvera la ligne qui permet d'inserer des données.--%>

<table cellpadding="2" runat="server" id="tblDepartments"

width="640px" cellspacing="0">

<tr>

<%-- Ici je vais mettre les titre des collones.--%> <th id="Th1" runat="server"> Action </th> <th id="Th2" runat="server"> ID Image </th> <th id="Th3" runat="server"> Nom Image </th> <th id="Th4" runat="server">

vrai Nom Image </th>

</tr>

<%--Et là je crais donc ma ligne qui fera office de

PlaceHolder.--%>

</table>

</LayoutTemplate>

<%--Ensuite je mets mon ItemTemplate qui contiendra les

données de la table.--%>

<td>

<asp:Button ID="SelectButton" runat="server"

Text="Select" CommandName="Select" />

<asp:Button ID="EditButton" runat="server"

Text="Edit" CommandName="Edit" />

<%--Ces deux bouttons nous permettrons de

selectionner ou de modifier les données de la table.Tous les evenements

du ListView seront gerés dans le sqlDataSource.--%>

</td>

<td>

<asp:Label ID="IDLabel" runat="server"

Text='<%#Eval("ID") %>' />

</td>

<td>

<asp:Label ID="NameLabel" runat="server"

Text='<%#Eval("NomImage") %>' />

</td>

<td>

<asp:Label ID="NameImageLabel" runat="server"

Text='<%#Eval("vraiNomImage") %>' />

</td>

</tr>

(10)

<%--Dans ce Template nous allons gerer l'affichage lorsque

l'utilisateur clickera sur le bouton "Select"--%>

<td>

<asp:Button ID="DeleteButton" runat="server"

Text="Delete" CommandName="Delete" />

<asp:Button ID="EditButton" runat="server"

Text="Edit" CommandName="Edit" />

</td>

<td>

Text='<%#Eval("ID") %>' />

</td>

<td>

<asp:Label ID="NameLabel" runat="server"

Text='<%#Eval("NomImage") %>' />

</td>

<td>

<asp:Label ID="NomImageLabel" runat="server"

Text='<%#Eval("vraiNomImage") %>' />

</td>

</tr>

</SelectedItemTemplate>

<%--Ici nous gerons l'affichage lorsque l'utilisateur

clickera sur le bouton "Edit".--%>

<td>

<asp:Button ID="UpdateButton" runat="server"

CommandName="Update" Text="Update" />

<asp:Button ID="CancelButton" runat="server"

CommandName="Cancel" Text="Cancel" />

</td>

<td>

Text='<%#Eval("ID") %>' />

</td>

<td>

<asp:Label runat="server" ID="NameLabel"

AssociatedControlID="NameTextBox" Text="Name"

Font-Bold="true" /><br />

<asp:TextBox ID="NameTextBox" runat="server"

Text='<%#Bind("NomImage") %>' />

</td>

<td>

<asp:Label runat="server" ID="NomImageLabel"

AssociatedControlID="NomImageTextBox" Text="vrai Nom"

<asp:TextBox ID="NomImageTextBox" runat="server"

Width="200px" Text='<%#Bind("vraiNomImage") %>' />

<br />

</td>

</tr>

</EditItemTemplate>

(11)

Et enfin un peu de css si vous le souhaitez :

.EditItem { background-color: #add8e6; } .InsertItem { background-color: #FFFACD; }

table{ border : solid 1px black;} tr{ border : solid 1px black;} td{ border : solid 1px black;} th{ border : solid 1px black;} </style>

<%--Et le Template insert qui sera toujours presents afin

d'insere de nouvelles données dans la tables .--%>

<asp:Button ID="InsertButton" runat="server"

CommandName="Insert" Text="Insert" />

<asp:Button ID="CancelButton" runat="server"

CommandName="Cancel" Text="Cancel" />

</td>

<td>

<asp:Label runat="server" ID="NameLabel"

AssociatedControlID="NameTextBox" Text="Name"

<asp:TextBox ID="NameTextBox" runat="server"

Text='<%#Bind("NomImage") %>' /><br />

</td>

<td>

<asp:Label runat="server" ID="NomImageLabel"

AssociatedControlID="NomImageTextBox"

Text="vrai Nom" Font-Bold="true" /><br />

<asp:TextBox ID="NomImageTextBox" runat="server"

Text='<%#Bind("vraiNomImage") %>' />

</td>

</tr>

</InsertItemTemplate>

Sorry - Image not found </EmptyDataTemplate>

</asp:ListView>

<asp:SqlDataSource ID="ImagesDataSource" runat="server"

ConnectionString="Data Source=PC-DE-ANTHO\SQLEXPRESS;Initial Catalog=SQLExpress_test; Integrated Security=True"

SelectCommand="SELECT ID, NomImage, vraiNomImage FROM Table3" UpdateCommand="UPDATE Table3

SET NomImage = @NomImage, vraiNomImage = @vraiNomImage WHERE (ID = @ID)"

DeleteCommand="DELETE FROM Table3 WHERE (ID = @ID)"

InsertCommand="INSERT INTO Table3(NomImage, vraiNomImage) VALUES (@NomImage, @vraiNomImage)">

<%--Enfin, nous rajoutons ici toutes les requetes qui

permettes de gerer tous les evenements.--%>

</asp:SqlDataSource>

</form> </body>

(12)

Si vous exécutez ce code vous vous apercevrez que la commande insert ne marche pas, en effet pour que celle-ci marche il suffit de faire une légère manipulation : Pour cela allez dans l’explorateur de serveur, déployez les nœuds jusqu'à arriver a votre table de données. Faites clique droit dessus et cliquer sur « ouvrir la définition de table ».

Sélectionnez la colonne id, dans la partie propriété des colonnes déployez spécification du compteur et mettez oui dans « Est d’identité ».

(13)

3 EntityDataSource

L’EntityDataSource est un contrôle ADO.NET qui permet la liaison de données dans une application web. Il permet de binder les contrôles web d’une page à un Entity Data Model (qui est une représentation d’une base de données) tout comme le font les contrôles SqlDataSource,

LinqDataSource, XmlDataSource et ObjectDataSource avec leurs sources de données. Voyons comment le mettre en place.

Tout d’abord, il faut créer une application web ASP.NET classique. Ensuite ajoutez un

EntityDataSource et un GridView (afin d’afficher les données). Vous devez avoir ce code :

Ceci fait, nous allons rajouter un nouvel objet ADO .NET Entity Data Model dans la solution.

Une fois le modèle ajouté, une nouvelle fenêtre s’ouvre comme celle-ci-contre. Choisissez « Générer à partir de la base de données ».

//Page.aspx

<asp:EntityDataSource ID="MonEntityDataSource" runat="server"> </asp:EntityDataSource>

<asp:GridView ID="MonGridView" runat="server"> </asp:GridView>

(14)

La fenêtre suivante vous demande de sélectionner une base de données, sélectionnez celle qui vous intéresse et faites suivant :

Ensuite vous allez sélectionner les tables dont vous avez besoin (ou autres comme procédures stockées).

Après quelques secondes, le diagramme de ce que vous avez sélectionné apparait. Si vous allez dans la page Web.config vous pourrez vous apercevoir que du code a été généré :

Attention : N’oubliez pas de générer le projet afin que le model Entity soit mis à jour avec la base de données. Maintenant que notre Entity Data Model est prêt, nous pouvons configurer

l’EntityDataSource.

<add name="SQLExpress_testEntities"

connectionString="metadata=res://*/Model1.csdl|res://*/Model1.ss dl|res://*/Model1.msl; provider=System.Data.SqlClient; provider connection string="Data

Source=PC-DE-ANTHO\SQLEXPRESS;Initial Catalog=SQLExpress_test;Integrated Security=True;Pooling=False;MultipleActiveResultSets=True""

providerName="System.Data.EntityClient" /> </connectionStrings>

(15)

Pour cela, passez en mode graphique et sélectionnez la représentation de l’EntityDataSource. Déployez le menu avec la flèche qui se trouve en haut à droite et choisissez « Configurer la source de données » comme on peut le voir sur l’image ci-dessous.

Configurez ObjectContext avec vos données, puis cliquez sur suivant. Vous arrivez sur la page ci-dessous.

(16)

Vous pouvez encore remarquer que du code a été généré automatiquement :

Il ne vous reste plus qu’a exécuter votre projet et voir le résultat obtenu. //Page.aspx

<asp:EntityDataSource ID="MonEntityDataSource" runat="server"

ConnectionString="name=SQLExpress_testEntities"

DefaultContainerName="SQLExpress_testEntities" EnableDelete="True" EnableInsert="True" EnableUpdate="True" EntitySetName="Table1"> </asp:EntityDataSource>

<asp:GridView ID="MonGridView" runat="server" AllowPaging="True"

AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="MonEntityDataSource">

<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowSelectButton="True" />

<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True"

SortExpression="ID" />

<asp:BoundField DataField="Nom" HeaderText="Nom"

SortExpression="Nom" />

<asp:BoundField DataField="Prenom" HeaderText="Prenom" SortExpression="Prenom" />

<asp:BoundField DataField="Adresse"

HeaderText="Adresse"

SortExpression="Adresse" />

<asp:BoundField DataField="Poste" HeaderText="Poste"

SortExpression="Poste" />

</Columns> </asp:GridView>

(17)

4 LinqDataSource

Le contrôle LinqDataSource est un contrôle qui implémente le DataSourceControl introduit avec l’ASP .Net 2.0. Il peut être utilisé pour lier des données à d’autres commande ASP .NET ce qui le rend similaire au l’ObjectDataSource et au SqlDataSource. Là ou il est différent de ces contrôles, c’est que au lieu de lier directement les données d’une base de données(comme

l’SqlDataSource) ou d’une classe générique (comme l’ObjectDataSource), le

LinqDataSource est conçut pour binder une base de données grâce à une requête LINQ. Grâce à ce contrôle nous n’avons pas à définir les requêtes Insert, Update et Delete.

Propriétés Description

ContextTypeName _{Est le nom du}_DataContext_{auquel vous voulez accéder.}

DeleteParameters _{Permet de donner les paramètres à donner pour l’opérateur} Delete.

GroupBy _{Permet de spécifier les propriétés utilisées pour grouper des}

données.

GroupByParameters _{Permet de donner les paramètres à donner pour l’opérateur} GroupBy.

InsertParameters _{Permet de donner les paramètres à donner pour l’opérateur Insert.} OrderBy _{Permet de spécifier les propriétés utilisées pour ordonner des}

données.

OrderByParameters _{Permet de donner les paramètres à donner pour l’opérateur} OrderBy.

OrderGroupsBy _{Permet de donner des champs utilisés pour ordonner des données}

groupées.

OrderGroupsByParameters_{Permet de donner les paramètres à donner pour l’opérateur} OrderGroupsBy

Select _{Permet de remplir le}_GridView_{avec les données sélectionnées}

par cette commande (s’utilise différemment d’une requête select).

SelectParameters _{Permet de donner les paramètres à donner pour l’opérateur}

Select.

TableName _{Contient le nom de la table sélectionnées pour remplir le} GridView

UpdateParameters _{Permet de donner les paramètres à donner pour l’opérateur}

Update.

Where _{Permet de rajouter une condition pour remplir le}_GridView_avec

les données.

WhereParameters _{Permet de donner les paramètres à donner pour l’opérateur} Where

(18)

Exemple d’utilisation de LinqDataSource :

En premier lieu créez un Data Model en suivant les instructions du premier.

Ici il ne sera pas utile de créer un DataContext dans la page Default.aspx.

Une fois notre .dbml créé, nous allons mettre sur notre page Default.aspx un GridView et un

linqDataSource. Pour ce faire il suffit de faire un simple Drag & Drop de ces deux outils.

Une fois ceci fait, nous allons configurer notre GridView afin qu’il soit lié a notre LinqDataSource

et a notre Data Model :

Puis cliquez sur « Configurer la source de donnée », afin de lier le

LinqDataSource au

DataContext_.

Une fois votre DataContext sélectionnée, faites suivant. Sur la page suivante, vérifiez que « * » soit coché puis cliquez sur terminer.

(19)

5 DataPager

Le contrôle DataPager permet de naviguer de page en page dans les données affichées par un contrôle qui implémente l’interface IPageableItemContainer comme par exemple le ListView. Ce contrôle prend en charge la pagination intégrée, c'est-à-dire qu’il permet de créer des pages afin de naviguer dans les données plus facilement. Il est possible de spécifier l’interface utilisateur de pagination à l’aide de l’objet NumericPagerField, ce qui permet à l’utilisateur de sélectionner une page par son numéro. Il est aussi possible d’utiliser l’objet NextPreviousPageField qui permet aux utilisateurs soit de parcourir les pages une a une soit d’accéder directement à la première ou à la dernière page. Un des moyens qui permet de gère ces objets consiste à créer une interface utilisateur de pagination personnalisée à l’aide de l’objet TemplatePagerField.

Champs description

NextPreviousPagerField _{Permet à l’utilisateur de passer directement à la première ou à le}

dernière page, ou bien de passer d’une page à la précédente ou la suivante.

NumericPagerField _{Permet à l’utilisateur de sélectionner une page par son numéro.} TemplatePagerField _{Permet de personnaliser la pagination. Certaines propriété sont}

utilisée pour binder les données dans ce champs, comme par exemple MaximumRows qui donne le nombre maximal de ligne affiché par page ou encore le StartRowIndex qui est l’index du premier enregistrement affiché dans une page de donnés.

Exemple d’utilisation du DataPager :

On obtient ainsi une pagination classique que vous pouvez placer avant ou après un ListView. //Page.aspx

<asp:DataPager runat="server" ID="BeforeListDataPager"

PagedControlID="DepartmentsListView" PageSize="2">

<%--Le pagedControlID doit etre le même que celui du ListView au quel vous vous voulez ajouter le DataPager.

Vous pouvez personnaliser le nombre des éléments affichés

pour chaque page de données en modifiant la propriété PageSize--%>

<asp:NextPreviousPagerField ButtonType="Button"

ShowFirstPageButton="true"

ShowNextPageButton="false"

ShowPreviousPageButton="false"/>

<%--Il est possible de mettre une image au lieu d'un simple bouton, pour cela il vous suffit de modifier la propriété de buttonType et ensuite de rajouter FirstPageImageUrl ou LastPageImageUrl suivit de

l'URL--%>

<asp:NumericPagerField ButtonCount="10" />

<asp:NextPreviousPagerField ButtonType="Button"

ShowLastPageButton="true"

ShowNextPageButton="false"

ShowPreviousPageButton="false" />

</Fields>

(20)

6 Conclusion

Tous ces nouveaux contrôles facilitent grandement l’accès aux données et permettent une manipulation plus facile et plus rapide de celles-ci. Cependant tous ces contrôles existaient déjà mais étaient plus difficiles à manipuler que ceux-là. En effet, le ListView regroupe les fonctionnalités du

GridView et du Repeater à la fois, l’EntityDataSource est un nouveau contrôle permettant de lier des données à un objet, tout comme le SqlDataSource, ObjectDataSource, …, mais par le biais d’une entité qui est la représentation d’une base de données, ce qui facilite son accès. Le contrôle LinqDataSource a les mêmes fonctionnalités que le SqlDataSource et que le

ObjectDataSource sauf qu’avec ce contrôle il est plus facile de gérer les requêtes Insert, Update, Delete … Enfin le DataPager est un nouveau contrôle qui n’existait pas sur le 2.0, il permet la mise en place de la pagination et ce de façons rapide et simple.