Vous êtes sur la page 1sur 13

Le contrôle serveur Web DataList

Tp1

 

1

Comment : permettre aux utilisateurs de sélectionner des éléments dans des contrôles serveur

Web DataList

 

3

Comment : permettre aux utilisateurs de modifier des éléments dans des contrôles serveur

 

Web DataList

 

5

Comment : permettre aux utilisateurs de supprimer des éléments dans des contrôles serveur

 

Web DataList

 

9

Le contrôle serveur Web DataList affiche les données dans un format que vous pouvez définir à l'aide de modèles et de styles. Le contrôle DataList est utile pour les données contenues dans une structure à répétition, par exemple un tableau. Le contrôle DataList peut afficher les lignes dans des dispositions différentes, par exemple les agencer en colonnes ou lignes.

Tp1 :
Tp1 :

Ajouter un sqldatasource, pour sélectionner les mat, nom des clients Ajouter un datalist et le lier avec le contrôle précèdent

Modifier les modèles 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='

</asp:Label> <br /> nom:

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

asp : Label ID ="idnom" runat ="server" <%# Eval("mat") %> '> Text ='

<%# Eval("mat")

%>
%>

'>

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

Text=' <%# Eval("nom")

%> '> Text =' <%# Eval("nom") '> </ asp : Label > < br /> </

'>

</asp:Label> <br />

</ItemTemplate>

<AlternatingItemTemplate>

mat:

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

Contrôle Datalist --

Text='

M. TAIS - TDI

runat ="server" Contrôle Datalist -- Text =' M. TAIS - TDI <%# Eval("mat") %> '> 1

<%# Eval("mat")

%>
%>

'>

1

</asp:Label> <br /> nom:

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

Text='

ID ="idnom" runat ="server" Text =' <%# Eval("nom") %> '> </ asp :

<%# Eval("nom")

%>
%>

'>

</asp:Label> <br /> </AlternatingItemTemplate>

<AlternatingItemStyle BackColor="PaleGreen" />

</asp:DataList>

On aura :

/> </ asp : DataList > On aura : Le modèle AlternatingItemTemplate est restitué avec un

Le modèle AlternatingItemTemplate est restitué avec un arrière-plan vert parce que la propriété AlternatingItemStyle est définie.

que la propriété AlternatingItemStyle est définie. *************** DataList.RepeatColumns, propriété Obtient
que la propriété AlternatingItemStyle est définie. *************** DataList.RepeatColumns, propriété Obtient

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

DataList.RepeatColumns, propriété

Obtient ou définit le nombre de colonnes à afficher dans le contrôle DataList.

Valeur de propriété

Type : System.Int32 Nombre de colonnes à afficher dans le contrôle DataList. La valeur par défaut, 0, indique que les éléments figurant dans le contrôle DataList s'affichent dans une seule ligne ou colonne, en fonction de la valeur de la propriété RepeatDirection. *****************

Pour afficher l’image de chaque employé :

Contrôle Datalist --

M. TAIS - TDI

2

<ItemTemplate>

<img alt="" src="

</ItemTemplate>

img alt ="" src =" </ ItemTemplate > <%# Eval("photo") %> " /> Si les

<%# Eval("photo")

%>
%>

" />

Si les photos sont dans un dossier photos:

<ItemTemplate>

<img alt="" src="photos/ gray;" />

<br />

<br />

gray ; " /> < br /> < br /> <%# Eval("photo") %> " style ="

<%# Eval("photo")

%>
%>

" style="border:1px solid

<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 propriéties: photos/ : repeatcolumns=3, repeatlayout=table, itemstyme:

borderstyle=groove

repeatlayout=table, itemstyme: borderstyle=groove Comment : permettre aux utilisateurs de sélectionner des
Comment : permettre aux utilisateurs de sélectionner des éléments dans des contrôles

Comment : permettre aux utilisateurs de sélectionner des éléments dans des contrôles

serveur Web DataList

Comment : permettre aux utilisateurs de sélectionner des éléments dans des contrôles serveur Web DataList

Contrôle Datalist --

M. TAIS - TDI

3

Vous pouvez permettre aux utilisateurs de sélectionner des éléments individuels dans le contrôle serveur Web DataList. En règle générale, la sélection d'un élément met celui-ci en surbrillance. En outre, vous avez la possibilité d'afficher des informations supplémentaires pour un élément sélectionné.

Pour permettre aux utilisateurs de sélectionner des éléments dans un contrôle DataList

1. Créez un SelectedItemTemplate pour définir la disposition du balisage et des contrôles pour un élément sélectionné. Pour plus d'informations, consultez Modèles de contrôles serveur Web ASP.NET.

2. Définissez les propriétés SelectedItemStyle du contrôle. Pour plus d'informations, consultez Contrôles serveur Web ASP.NET et styles CSS.

3. Dans le ItemTemplate (et AlternatingItemTemplate, si vous l'utilisez), ajoutez un contrôle serveur Web Button ou LinkButton.

4. Affectez à la propriété CommandName du bouton de l'étape 3 la valeur select (la casse doit être respectée).

5. Créez un gestionnaire d'événements pour l'événement SelectedIndexChanged du contrôle DataList. Dans le gestionnaire d'événements, appelez la méthode DataBind du contrôle 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 sélection, affectez la valeur -1 à la propriété SelectedIndex du contrôle. Pour cela, vous pourriez ajouter un contrôle serveur Web Button au modèle SelectedItem et affecter la valeur "unselect" à sa propriété CommandName. L'événement Click pour ce bouton est également transféré à l'événement ItemCommand du contrôle 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

Contrôle Datalist --

M. TAIS - TDI

4

Comment : permettre aux utilisateurs de modifier des éléments dans des contrôles

Comment : permettre aux utilisateurs de modifier des éléments dans des contrôles

serveur Web DataList

Comment : permettre aux utilisateurs de modifier des éléments dans des contrôles serveur Web DataList
des éléments dans des contrôles serveur Web DataList Vous pouvez offrir aux utilisateurs la possibilité de

Vous pouvez offrir aux utilisateurs la possibilité de modifier des éléments individuels dans le contrôle serveur Web DataList. Lorsqu'un élément individuel est défini en mode Édition, les valeurs qui peuvent être modifiées sont affichées habituellement dans les zones de texte ou d'autres contrôles dans lesquels les utilisateurs peuvent apporter leurs modifications.

Pour permettre aux utilisateurs de modifier des éléments dans un contrôle DataList

1. Affectez à la propriété DataKeyField du contrôle DataList le nom du champ dans les données qui contiennent la clé primaire.

2. Créez une propriété ItemTemplate (et, si vous l'utilisez, une propriété AlternatingItemTemplate), puis ajoutez-y un contrôle serveur Web Button. Affectez la valeur edit à la propriété CommandName pour ce bouton.

Remarque Vous pouvez utiliser un contrôle LinkButton ou ImageButton dans toute étape qui demande un contrôle serveur Web Button.

3. Créez, pour le contrôle DataList, une propriété EditItemTemplate qui comprend les éléments suivants :

o

Des contrôles pour toutes les valeurs que les utilisateurs peuvent modifier. Incluez, par exemple, des contrôles TextBox pour toutes les données numériques ou de caractères. Utilisez la méthode Eval déclarative pour spécifier à quel champ chaque contrôle est lié, comme dans l'exemple suivant :

Remarque de sécurité Cet exemple a une zone de texte qui accepte l'entrée d'utilisateur, ce qui constitue une menace éventuelle pour la sécurité. Par défaut, les pages Web ASP.NET vérifient que les entrées d'utilisateur n'incluent pas de script ou d'éléments HTML. Pour plus d'informations, consultez Vue d'ensemble des attaques de script.

o

<asp:TextBox ID="TextBox1"

o

runat="server"

o

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

o

Un contrôle Button dont la propriété Text a la valeur "Update" et la propriété CommandName la valeur update (respecte la casse).

o

Un contrôle Button dont la propriété Text a la valeur "Cancel" et la propriété 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

Contrôle Datalist --

M. TAIS - TDI

5

leur permet de terminer la procédure d'édition sans enregistrer les modifications.

4. Écrivez le code permettant d'exécuter les tâches suivantes :

o

Gérez l'événement EditCommand du contrôle DataList qui affecte à la propriété EditItemIndex du contrôle DataList la valeur d'index de l'élément à mettre en mode Édition. L'index de l'élément sur lequel l'utilisateur a cliqué est disponible dans la propriété ItemIndex de l'objet Item. Appelez ensuite la méthode DataBind du contrôle.

o

Gérez l'événement CancelCommand du contrôle DataList qui affecte à la propriété EditItemIndex du contrôle DataList la valeur -1 puis appelle la méthode DataBind du contrôle.

o

Gérez l'événement UpdateCommand du contrôle DataList. Dans le code, extrayez les valeurs des contrôles de l'élément actuel et passez-les au contrôle de source de données pour une opération de mise à jour. Le code exact que vous utilisez dépend du type de contrôle de source de données avec lequel vous travaillez.

Exemple

L'exemple de code suivant présente une page ASP.NET qui utilise un contrôle DataList et un contrôle SqlDataSource pour afficher des informations de la table Catégories dans la base de données Northwind. Les utilisateurs peuvent modifier les éléments.

Remarque de sécurité Cet exemple a une zone de texte qui accepte l'entrée d'utilisateur, ce qui constitue une menace éventuelle pour la sécurité. Par défaut, les pages Web ASP.NET vérifient que les entrées d'utilisateur n'incluent pas de script ou d'éléments 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 ,

Protected Sub DataList1_CancelCommand(ByVal source As Object,

_

Protected Sub DataList1_CancelCommand( ByVal source As Object , _

ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs) DataList1.EditItemIndex = -1

DataList1.DataBind()

End Sub

Contrôle Datalist --

M. TAIS - TDI

6

Protected Sub DataList1_UpdateCommand( ByVal source As Object ,

Protected Sub DataList1_UpdateCommand(ByVal source As Object,

_

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)

DefaultValue = categoryID

DefaultValue = categoryName.Text

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 />

Contrôle Datalist --

M. TAIS - TDI

7

<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>

Contrôle Datalist --

M. TAIS - TDI

8

<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 données, vous avez besoin de la clé primaire de l'enregistrement qui est mis à jour. Vous pouvez obtenir cette valeur par la propriété DataKeyField, qui contient un tableau de clés.

Pour obtenir la valeur d'un contrôle spécifique dans l'élément, utilisez la méthode FindControl de l'objet événement-argument Item.

Les valeurs que vous définissez dans le dictionnaire SqlDataSource1.UpdateParameters doivent correspondre aux noms que vous définissez dans l'élément UpdateParameters.

Compilation du code

Le code exige que vous ayez une chaîne de connexion appelée NorthwindConnectionString. La base de données à laquelle vous vous connectez est supposée contenir une table nommée Catégories avec les champs CategoryID, CategoryName et Description.

Le compte sous lequel la page se connecte à la base de données doit avoir l'autorisation de mettre à jour la table Catégories.

Programmation fiable

Le code dans l'exemple n'exécute pas les tâches suivantes que vous effectueriez normalement dans un environnement de production :

Le code ne comprend pas de vérification des erreurs pour s'assurer que la méthode FindControl retourne un contrôle valide. Pour code plus fiable, assurez-vous que la valeur retournée par la méthode FindControl n'est pas une référence nulle (Nothing en Visual Basic).

Le code ne vérifie pas si la mise à jour a abouti.

Comment : permettre aux utilisateurs de supprimer des éléments dans des contrôles

Comment : permettre aux utilisateurs de supprimer des éléments dans des contrôles

serveur Web DataList

Comment : permettre aux utilisateurs de supprimer des éléments dans des contrôles serveur Web DataList

Contrôle Datalist --

M. TAIS - TDI

9

Vous pouvez permettre aux utilisateurs de supprimer des éléments dans un contrôle DataList de plusieurs façons. Pour ce faire, vous pouvez notamment inclure un bouton Supprimer dans un élément et supprimer directement cet élément lorsque l'utilisateur clique sur celui-ci.

Une autre solution consiste à inclure une case à cocher dans des éléments individuels. Les utilisateurs peuvent ensuite activer les cases à cocher de tous les éléments à supprimer avant de cliquer sur un bouton Supprimer distinct afin de les supprimer par lot. Cette méthode est utilisée dans des programmes tels que MSN Hotmail.

Pour permettre aux utilisateurs de supprimer des éléments individuels

1. Ajoutez un contrôle de source de données à la page.

2. Définissez la commande ou la méthode de suppression pour le contrôle de source de données.

Par exemple, si vous utilisez un contrôle SqlDataSource, affectez une instruction SQL Delete de la propriété DeleteCommand du contrôle de source de données qui inclut un espace réservé pour l'ID, comme dans l'exemple suivant :

DELETE FROM Categories WHERE CategoryID = @CategoryID

Si vous utilisez un contrôle ObjectDataSource, attribuez à la propriété DeleteMethod le nom d'une méthode exécutant la suppression.

3. Dans le contrôle de source de données, créez une entrée pour la propriété DeleteParameters qui inclut un paramètre unique de l'ID de l'enregistrement à supprimer.

Par exemple, un élément SqlDataSource peut se présenter de la manière 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 élément ObjectDataSource peut se présenter de la manière suivante :

Contrôle 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 contrôle DataList, affectez la propriété DataKeyField à la clé primaire de la table dans laquelle vous souhaitez supprimer des enregistrements.

5. Dans le contrôle ItemTemplate (et AlternatingItemTemplate, si vous l'utilisez), ajoutez un contrôle serveur Web Button ou LinkButton.

6. Affectez la valeur delete à la propriété CommandName du bouton.

La balise de l'élément du contrôle DataList peut se présenter de la manière 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. Créez un gestionnaire d'événements pour l'événement DeleteCommand du contrôle DataList. Dans la méthode :

1. Obtenez l'ID de l'enregistrement à supprimer de la collection DataKeys du contrôle DataList. Vous pouvez obtenir la clé de l'enregistrement actuel à l'aide de l'index retourné par la propriété ItemIndex de l'élément actuel.

2. Définissez la propriété DefaultValue du paramètre que vous avez créé à l'étape 3.

3. Appelez la méthode Delete du contrôle de source de données.

Le code suivant décrit ces tâches, à l'aide d'un contrôle SqlDataSource nommé SqlDataSource1, comme étant la source de données :

Contrôle Datalist --

M. TAIS - TDI

11

VB

Protected Sub Object,

VB Protected Sub Object , DataList1_DeleteCommand( ByVal source As ByVal e As DataListCommandEventArgs) Dim id As

DataList1_DeleteCommand(ByVal source As

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 éléments à la fois

1. Ajoutez un contrôle de source de données à la page, configurez sa commande ou méthode de suppression et créez un paramètre en suivant la procédure précédente.

2. Dans l'élément ItemTemplate du contrôle DataList (et AlternatingItemTemplate, si vous l'utilisez), ajoutez un contrôle serveur Web CheckBox et attribuez à sa propriété

ID un nom spécifique, par exemple "Supprimer." Vérifiez que la

par exemple "Supprimer." Vérifiez que la affectée à la propriété AutoPostBack du contrôle

affectée à la propriété AutoPostBack du contrôle CheckBox.

valeur false est

3. Ajoutez un contrôle serveur Web Button à la page. Affectez l'option "Supprimer tout"

à la propriété Text et la valeur DeleteAll à la propriété ID. Ce bouton n'est pas ajouté à un des modèles DataList.

4. Créez une méthode pour l'événement Click du bouton Supprimer tout. Dans la méthode :

1. Parcourez la collection Items du contrôle DataList en extrayant chaque élément à tour de rôle.

2. Dans l'élément, utilisez la méthode FindControl pour obtenir le contrôle CheckBox de l'étape 1 et tester sa propriété Checked.

3. Si la case à cocher est activée, supprimez l'élément correspondant de la source de données.

Dans l'exemple suivant, un gestionnaire d'événements du bouton

DeleteAll supprime les

éléments par lot à l'aide de la procédure décrite 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

Contrôle 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

Contrôle Datalist --

M. TAIS - TDI

13