Le contrle serveur Web DataList

Tp1 ............................................................................................................................................ 1 Comment : permettre aux utilisateurs de slectionner des lments dans des contrles serveur Web DataList.............................................................................................................................. 3 Comment : permettre aux utilisateurs de modifier des lments dans des contrles serveur Web DataList.............................................................................................................................. 5 Comment : permettre aux utilisateurs de supprimer des lments dans des contrles serveur Web DataList.............................................................................................................................. 9 Le contrle serveur Web DataList affiche les donnes dans un format que vous pouvez dfinir l'aide de modles et de styles. Le contrle DataList est utile pour les donnes contenues dans une structure rptition, par exemple un tableau. Le contrle DataList peut afficher les lignes dans des dispositions diffrentes, par exemple les agencer en colonnes ou lignes.

Tp1 : Ajouter un sqldatasource, pour slectionner les mat, nom des clients Ajouter un datalist et le lier avec le contrle prcdent Modifier les modles du datalist : ajouter label pour le matricule et autre pour le nom dans les ItemTemplate et AlternatingItemTemplate puis les lier aux champs : mat, nom <asp:DataList ID="DataList1" runat="server" Caption="Liste clients" DataSourceID="SqlDataSource1"> <ItemTemplate> mat: <asp:Label ID="idmat" runat="server" Text='<%# Eval("mat") %>'> </asp:Label> <br /> nom: <asp:Label ID="idnom" runat="server" Text='<%# Eval("nom") %>'> </asp:Label> <br /> </ItemTemplate> <AlternatingItemTemplate> mat: <asp:Label ID="idmat" runat="server" Text='<%# Eval("mat") %>'>

Contrle Datalist --

M. TAIS - TDI

</asp:Label> <br /> nom: <asp:Label ID="idnom" runat="server" Text='<%# Eval("nom") %>'> </asp:Label> <br /> </AlternatingItemTemplate> <AlternatingItemStyle BackColor="PaleGreen" /> </asp:DataList> On aura :

Le modle AlternatingItemTemplate est restitu avec un arrire-plan vert parce que la proprit AlternatingItemStyle est dfinie.

***************

DataList.RepeatColumns, proprit Obtient ou dfinit le nombre de colonnes afficher dans le contrle DataList.

Valeur de proprit
Type : System.Int32 Nombre de colonnes afficher dans le contrle DataList. La valeur par dfaut, 0, indique que les lments figurant dans le contrle DataList s'affichent dans une seule ligne ou colonne, en fonction de la valeur de la proprit RepeatDirection. ***************** Pour afficher limage de chaque employ :
Contrle Datalist -M. TAIS - TDI

<ItemTemplate> <img alt="" src="<%# Eval("photo") %>" /> </ItemTemplate> Si les photos sont dans un dossier photos: <ItemTemplate>

<img alt="" src="photos/<%# Eval("photo") %>" style="border:1px solid gray;" />

<br /> <br />

<img id="Img1" alt="image produit" align="top" width="25" border="1" src= '<%# "~/Photos/" & DataBinder.Eval(Container.DataItem, "photo") %>' runat="server"/> On aura: Avec les proprities: photos/ : repeatcolumns=3, repeatlayout=table, itemstyme: borderstyle=groove

Comment : permettre aux utilisateurs de slectionner des lments dans des contrles serveur Web DataList

Contrle Datalist --

M. TAIS - TDI

Vous pouvez permettre aux utilisateurs de slectionner des lments individuels dans le contrle serveur Web DataList. En rgle gnrale, la slection d'un lment met celui-ci en surbrillance. En outre, vous avez la possibilit d'afficher des informations supplmentaires pour un lment slectionn. Pour permettre aux utilisateurs de slectionner des lments dans un contrle DataList 1. Crez un SelectedItemTemplate pour dfinir la disposition du balisage et des contrles pour un lment slectionn. Pour plus d'informations, consultez Modles de contrles serveur Web ASP.NET. 2. Dfinissez les proprits SelectedItemStyle du contrle. Pour plus d'informations, consultez Contrles serveur Web ASP.NET et styles CSS. 3. Dans le ItemTemplate (et AlternatingItemTemplate, si vous l'utilisez), ajoutez un contrle serveur Web Button ou LinkButton. 4. Affectez la proprit CommandName du bouton de l'tape 3 la valeur select (la casse doit tre respecte). 5. Crez un gestionnaire d'vnements pour l'vnement SelectedIndexChanged du contrle DataList. Dans le gestionnaire d'vnements, appelez la mthode DataBind du contrle pour actualiser les informations qu'il contient. Le code complet peut ressembler ceci : VB Protected Sub DataList1_SelectedIndexChanged(ByVal sender As _ System.Object, ByVal e As System.EventArgs) _ Handles DataList1.SelectedIndexChanged DataList1.DataBind() End Sub Pour annuler la slection, affectez la valeur -1 la proprit SelectedIndex du contrle. Pour cela, vous pourriez ajouter un contrle serveur Web Button au modle SelectedItem et affecter la valeur "unselect" sa proprit CommandName. L'vnement Click pour ce bouton est galement transfr l'vnement ItemCommand du contrle DataGrid. Le code complet peut ressembler ceci :

Protected Sub DataList1_ItemCommand(ByVal source As Object, _ ByVal e As DataListCommandEventArgs) _ Handles DataList1.ItemCommand If e.CommandName = "unselect" Then DataList1.SelectedIndex = -1 End If DataList1.DataBind() End Sub

Contrle Datalist --

M. TAIS - TDI

Comment : permettre aux utilisateurs de modifier des lments dans des contrles serveur Web DataList

Vous pouvez offrir aux utilisateurs la possibilit de modifier des lments individuels dans le contrle serveur Web DataList. Lorsqu'un lment individuel est dfini en mode dition, les valeurs qui peuvent tre modifies sont affiches habituellement dans les zones de texte ou d'autres contrles dans lesquels les utilisateurs peuvent apporter leurs modifications. Pour permettre aux utilisateurs de modifier des lments dans un contrle DataList 1. Affectez la proprit DataKeyField du contrle DataList le nom du champ dans les donnes qui contiennent la cl primaire. 2. Crez une proprit ItemTemplate (et, si vous l'utilisez, une proprit AlternatingItemTemplate), puis ajoutez-y un contrle serveur Web Button. Affectez la valeur edit la proprit CommandName pour ce bouton. Remarque Vous pouvez utiliser un contrle LinkButton ou ImageButton dans toute tape qui demande un contrle serveur Web Button. 3. Crez, pour le contrle DataList, une proprit EditItemTemplate qui comprend les lments suivants : o Des contrles pour toutes les valeurs que les utilisateurs peuvent modifier. Incluez, par exemple, des contrles TextBox pour toutes les donnes numriques ou de caractres. Utilisez la mthode Eval dclarative pour spcifier quel champ chaque contrle est li, comme dans l'exemple suivant : Remarque de scurit Cet exemple a une zone de texte qui accepte l'entre d'utilisateur, ce qui constitue une menace ventuelle pour la scurit. Par dfaut, les pages Web ASP.NET vrifient que les entres d'utilisateur n'incluent pas de script ou d'lments HTML. Pour plus d'informations, consultez Vue d'ensemble des attaques de script. <asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("ProductName") %>' /> Un contrle Button dont la proprit Text a la valeur "Update" et la proprit CommandName la valeur update (respecte la casse). Un contrle Button dont la proprit Text a la valeur "Cancel" et la proprit CommandName la valeur cancel. Le bouton Mettre jour doit permettre aux utilisateurs d'indiquer qu'ils ont termin leurs modifications et qu'ils vont les enregistrer. Le bouton Annuler

o o o o o

Contrle Datalist --

M. TAIS - TDI

leur permet de terminer la procdure d'dition sans enregistrer les modifications. 4. crivez le code permettant d'excuter les tches suivantes : o Grez l'vnement EditCommand du contrle DataList qui affecte la proprit EditItemIndex du contrle DataList la valeur d'index de l'lment mettre en mode dition. L'index de l'lment sur lequel l'utilisateur a cliqu est disponible dans la proprit ItemIndex de l'objet Item. Appelez ensuite la mthode DataBind du contrle. o Grez l'vnement CancelCommand du contrle DataList qui affecte la proprit EditItemIndex du contrle DataList la valeur -1 puis appelle la mthode DataBind du contrle. o Grez l'vnement UpdateCommand du contrle DataList. Dans le code, extrayez les valeurs des contrles de l'lment actuel et passez-les au contrle de source de donnes pour une opration de mise jour. Le code exact que vous utilisez dpend du type de contrle de source de donnes avec lequel vous travaillez. Exemple L'exemple de code suivant prsente une page ASP.NET qui utilise un contrle DataList et un contrle SqlDataSource pour afficher des informations de la table Catgories dans la base de donnes Northwind. Les utilisateurs peuvent modifier les lments. Remarque de scurit Cet exemple a une zone de texte qui accepte l'entre d'utilisateur, ce qui constitue une menace ventuelle pour la scurit. Par dfaut, les pages Web ASP.NET vrifient que les entres d'utilisateur n'incluent pas de script ou d'lments HTML. Pour plus d'informations, consultez Vue d'ensemble des attaques de script. VB <%@ Page Language="VB" %> <script runat="server"> Protected Sub DataList1_EditCommand(ByVal source As Object, _ ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs) DataList1.EditItemIndex = e.Item.ItemIndex DataList1.DataBind() End Sub Protected Sub DataList1_CancelCommand(ByVal source As Object, _ ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs) DataList1.EditItemIndex = -1 DataList1.DataBind() End Sub

Contrle Datalist --

M. TAIS - TDI

Protected Sub DataList1_UpdateCommand(ByVal source As Object, _ ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs) Dim categoryID As String = _ DataList1.DataKeys(e.Item.ItemIndex).ToString() Dim categoryName As TextBox = _ CType(e.Item.FindControl("textCategoryName"), TextBox) Dim description As TextBox = _ CType(e.Item.FindControl("textDescription"), TextBox) SqlDataSource1.UpdateParameters("original_CategoryID"). _ DefaultValue = categoryID SqlDataSource1.UpdateParameters("categoryName"). _ DefaultValue = categoryName.Text SqlDataSource1.UpdateParameters("Description"). _ DefaultValue = description.Text SqlDataSource1.Update() DataList1.EditItemIndex = -1 DataList1.DataBind() End Sub </script> <html> <head runat="server"></head> <body> <form id="form1" runat="server"> <div> <br /> <asp:DataList runat="server" DataKeyField="CategoryID" DataSourceID="SqlDataSource1" ID="DataList1" OnEditCommand="DataList1_EditCommand" OnCancelCommand="DataList1_CancelCommand" OnUpdateCommand="DataList1_UpdateCommand"> <EditItemTemplate> ID: <asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryID") %>'> </asp:Label> <br /> Name: <asp:TextBox ID="textCategoryName" runat="server" Text='<%# Eval("CategoryName") %>'> </asp:TextBox> <br /> Description: <asp:TextBox ID="textDescription" runat="server" Text='<%# Eval("Description") %>'> </asp:TextBox> <br />

Contrle Datalist --

M. TAIS - TDI

<asp:LinkButton ID="LinkButton1" runat="server" CommandName="update" > Save </asp:LinkButton> &nbsp; <asp:LinkButton ID="LinkButton2" runat="server"> CommandName="cancel" Cancel </asp:LinkButton> </EditItemTemplate> <ItemTemplate> CategoryID: <asp:Label ID="CategoryIDLabel" runat="server" Text='<%# Eval("CategoryID") %>'> </asp:Label> <br /> CategoryName: <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>'> </asp:Label> <br /> Description: <asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("Description") %>'> </asp:Label> <br /> <asp:LinkButton runat="server" ID="LinkButton1" CommandName="edit" > Edit </asp:LinkButton><br /> </ItemTemplate> </asp:DataList> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString= "<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]" UpdateCommand="UPDATE [Categories] SET [CategoryName] = @CategoryName, [Description] = @Description WHERE [CategoryID] = @original_CategoryID"> <UpdateParameters>

Contrle Datalist --

M. TAIS - TDI

<asp:Parameter Name="CategoryName" Type="String" /> <asp:Parameter Name="Description" Type="String" /> <asp:Parameter Name="original_CategoryID" Type="Int32" /> </UpdateParameters> </asp:SqlDataSource> </div> </form> </body> </html> Pour mettre jour des donnes, vous avez besoin de la cl primaire de l'enregistrement qui est mis jour. Vous pouvez obtenir cette valeur par la proprit DataKeyField, qui contient un tableau de cls. Pour obtenir la valeur d'un contrle spcifique dans l'lment, utilisez la mthode FindControl de l'objet vnement-argument Item. Les valeurs que vous dfinissez dans le dictionnaire SqlDataSource1.UpdateParameters doivent correspondre aux noms que vous dfinissez dans l'lment UpdateParameters. Compilation du code Le code exige que vous ayez une chane de connexion appele NorthwindConnectionString. La base de donnes laquelle vous vous connectez est suppose contenir une table nomme Catgories avec les champs CategoryID, CategoryName et Description. Le compte sous lequel la page se connecte la base de donnes doit avoir l'autorisation de mettre jour la table Catgories. Programmation fiable Le code dans l'exemple n'excute pas les tches suivantes que vous effectueriez normalement dans un environnement de production :

Le code ne comprend pas de vrification des erreurs pour s'assurer que la mthode FindControl retourne un contrle valide. Pour code plus fiable, assurez-vous que la valeur retourne par la mthode FindControl n'est pas une rfrence nulle (Nothing en Visual Basic). Le code ne vrifie pas si la mise jour a abouti.

Comment : permettre aux utilisateurs de supprimer des lments dans des contrles serveur Web DataList

Contrle Datalist --

M. TAIS - TDI

Vous pouvez permettre aux utilisateurs de supprimer des lments dans un contrle DataList de plusieurs faons. Pour ce faire, vous pouvez notamment inclure un bouton Supprimer dans un lment et supprimer directement cet lment lorsque l'utilisateur clique sur celui-ci. Une autre solution consiste inclure une case cocher dans des lments individuels. Les utilisateurs peuvent ensuite activer les cases cocher de tous les lments supprimer avant de cliquer sur un bouton Supprimer distinct afin de les supprimer par lot. Cette mthode est utilise dans des programmes tels que MSN Hotmail. Pour permettre aux utilisateurs de supprimer des lments individuels 1. Ajoutez un contrle de source de donnes la page. 2. Dfinissez la commande ou la mthode de suppression pour le contrle de source de donnes. Par exemple, si vous utilisez un contrle SqlDataSource, affectez une instruction SQL Delete de la proprit DeleteCommand du contrle de source de donnes qui inclut un espace rserv pour l'ID, comme dans l'exemple suivant : DELETE FROM Categories WHERE CategoryID = @CategoryID Si vous utilisez un contrle ObjectDataSource, attribuez la proprit DeleteMethod le nom d'une mthode excutant la suppression. 3. Dans le contrle de source de donnes, crez une entre pour la proprit DeleteParameters qui inclut un paramtre unique de l'ID de l'enregistrement supprimer. Par exemple, un lment SqlDataSource peut se prsenter de la manire suivante : <asp:SqlDataSource ID="SqlDataSource1" Runat="server" ConnectionString= "<%$ ConnectionStrings:NorthwindConnectionString %>" DeleteCommand="DELETE FROM [Categories] WHERE [CategoryID] = @CategoryID"> <DeleteParameters> <asp:Parameter Type="Int32" Name="CategoryID"> </asp:Parameter> </DeleteParameters> </asp:SqlDataSource> Remarque D'autres commandes telles que SelectCommand et UpdateCommand ne s'affichent pas dans l'exemple. Un lment ObjectDataSource peut se prsenter de la manire suivante :

Contrle Datalist --

M. TAIS - TDI

10

<asp:ObjectDataSource ID="ObjectDataSource1" Runat="server" DeleteMethod="DeleteCategory()"> <DeleteParameters> <asp:Parameter Name="example"></asp:Parameter> </DeleteParameters> </asp:ObjectDataSource> 4. Dans le contrle DataList, affectez la proprit DataKeyField la cl primaire de la table dans laquelle vous souhaitez supprimer des enregistrements. 5. Dans le contrle ItemTemplate (et AlternatingItemTemplate, si vous l'utilisez), ajoutez un contrle serveur Web Button ou LinkButton. 6. Affectez la valeur delete la proprit CommandName du bouton. La balise de l'lment du contrle DataList peut se prsenter de la manire suivante : <asp:DataList ID="DataList1" Runat="server" DataSourceID="SqlDataSource1" DataKeyField="CategoryID" OnDeleteCommand="DataList1_DeleteCommand"> <ItemTemplate> CategoryName: <asp:Label ID="CategoryNameLabel" Runat="server" Text='<%# Eval("CategoryName") %>'> </asp:Label> <br /> Description: <asp:Label ID="DescriptionLabel" Runat="server" Text='<%# Eval("Description") %>'> </asp:Label> <br /> <asp:Button ID="Delete" Runat="server" Text="Delete" CommandName="delete" /> </ItemTemplate> </asp:DataList> 7. Crez un gestionnaire d'vnements pour l'vnement DeleteCommand du contrle DataList. Dans la mthode : 1. Obtenez l'ID de l'enregistrement supprimer de la collection DataKeys du contrle DataList. Vous pouvez obtenir la cl de l'enregistrement actuel l'aide de l'index retourn par la proprit ItemIndex de l'lment actuel. 2. Dfinissez la proprit DefaultValue du paramtre que vous avez cr l'tape 3. 3. Appelez la mthode Delete du contrle de source de donnes. Le code suivant dcrit ces tches, l'aide d'un contrle SqlDataSource nomm SqlDataSource1, comme tant la source de donnes :

Contrle Datalist --

M. TAIS - TDI

11

VB

Protected Sub DataList1_DeleteCommand(ByVal source As Object, ByVal e As DataListCommandEventArgs) Dim id As Integer = _ CInt(DataList1.DataKeys(e.Item.ItemIndex)) SqlDataSource1.DeleteParameters("CategoryID").DefaultValu e _ = id SqlDataSource1.Delete() End Sub

Pour permettre aux utilisateurs de supprimer plusieurs lments la fois 1. Ajoutez un contrle de source de donnes la page, configurez sa commande ou mthode de suppression et crez un paramtre en suivant la procdure prcdente. 2. Dans l'lment ItemTemplate du contrle DataList (et AlternatingItemTemplate, si vous l'utilisez), ajoutez un contrle serveur Web CheckBox et attribuez sa proprit ID un nom spcifique, par exemple "Supprimer." Vrifiez que la valeur false est affecte la proprit AutoPostBack du contrle CheckBox. 3. Ajoutez un contrle serveur Web Button la page. Affectez l'option "Supprimer tout" la proprit Text et la valeur DeleteAll la proprit ID. Ce bouton n'est pas ajout un des modles DataList. 4. Crez une mthode pour l'vnement Click du bouton Supprimer tout. Dans la mthode : 1. Parcourez la collection Items du contrle DataList en extrayant chaque lment tour de rle. 2. Dans l'lment, utilisez la mthode FindControl pour obtenir le contrle CheckBox de l'tape 1 et tester sa proprit Checked. 3. Si la case cocher est active, supprimez l'lment correspondant de la source de donnes. Dans l'exemple suivant, un gestionnaire d'vnements du bouton DeleteAll supprime les lments par lot l'aide de la procdure dcrite ci-dessus. [Visual Basic] Private Sub DeleteAll_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles DeleteAll.Click Dim isDeleted As Boolean Dim itemIndex As Integer = 0 Dim id As String

Contrle Datalist --

M. TAIS - TDI

12

' Check each box and see if the item should be deleted. For Each dlItem As DataListItem In DataList1.Items isDeleted = CType(dlItem.FindControl("Delete"), _ CheckBox).Checked If isDeleted Then id = DataList1.DataKeys(itemIndex).ToString() SqlDataSource1.DeleteParameters(0).DefaultValue = id SqlDataSource1.Delete() End If itemIndex += 1 Next End Sub

Contrle Datalist --

M. TAIS - TDI

13