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

Article
10/22/2014

Mise à jour : novembre 2007

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

Affectez à la propriété DataKeyField du contrôle DataList le nom du champ dans les données qui contiennent la clé primaire.
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.

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

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

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 :

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

<asp:TextBox ID="TextBox1" 

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

Un contrôle Button dont la propriété Text a la valeur "Update" et la propriété CommandName la valeur update (respecte la casse).
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 leur permet de terminer la procédure d'édition sans enregistrer les modifications.

Écrivez le code permettant d'exécuter les tâches suivantes :
- 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.
- 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.
- 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.

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

<%@ Page Language="VB" %>

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

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 ></head>
<body>
  <form id="form1" >
    <div>
        <br />
        <asp:DataList  
            DataKeyField="CategoryID" 
            DataSourceID="SqlDataSource1" ID="DataList1"
            OnEditCommand="DataList1_EditCommand" 
            OnCancelCommand="DataList1_CancelCommand" 
            OnUpdateCommand="DataList1_UpdateCommand">
            <EditItemTemplate>
                ID: <asp:Label ID="Label1"  
                         Text='<%# Eval("CategoryID") %>'>
                    </asp:Label>
                <br />
                Name: <asp:TextBox ID="textCategoryName"  
                         Text='<%# Eval("CategoryName") %>'>
                      </asp:TextBox>
                <br />
                Description: <asp:TextBox ID="textDescription" 
                                  
                        Text='<%# Eval("Description") %>'>
                     </asp:TextBox>
                <br />
                <asp:LinkButton ID="LinkButton1"  
                    CommandName="update" >
                    Save
                </asp:LinkButton>
                &nbsp;
                <asp:LinkButton ID="LinkButton2" >
                    CommandName="cancel" 
                    Cancel
                </asp:LinkButton>
            </EditItemTemplate>
            <ItemTemplate>
                CategoryID:
                <asp:Label ID="CategoryIDLabel"  
                    Text='<%# Eval("CategoryID") %>'>
                </asp:Label>
                <br />
                CategoryName:
                <asp:Label ID="CategoryNameLabel" 
                     Text='<%# Eval("CategoryName") %>'>
                </asp:Label>
                <br />
                Description:
                <asp:Label ID="DescriptionLabel"  
                    Text='<%# Eval("Description") %>'>
                </asp:Label>
                <br />
                <asp:LinkButton  ID="LinkButton1" 
                    CommandName="edit" >
                    Edit
                </asp:LinkButton><br />
            </ItemTemplate>
        </asp:DataList>

        <asp:SqlDataSource ID="SqlDataSource1"  
              ConnectionString=
                  "<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CategoryID], [CategoryName], 
                 [Description] FROM [Categories]"
            UpdateCommand="UPDATE [Categories] SET [CategoryName] = 
                 @CategoryName, [Description] = @Description 
                 WHERE [CategoryID] = @original_CategoryID">
            <UpdateParameters>
              <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>

<%@ Page Language="C#" %>
<script >
protected void DataList1_EditCommand(object source, 
    DataListCommandEventArgs e)
{
    DataList1.EditItemIndex = e.Item.ItemIndex;
    DataList1.DataBind();
}

protected void DataList1_CancelCommand(object source, 
    DataListCommandEventArgs e)
{
    DataList1.EditItemIndex = -1;
    DataList1.DataBind();
}

protected void DataList1_UpdateCommand(object source, 
    DataListCommandEventArgs e)
{
    String categoryID = 
         DataList1.DataKeys[e.Item.ItemIndex].ToString();
    String categoryName = 
         ((TextBox)e.Item.FindControl("textCategoryName")).Text;
    String description = 
         ((TextBox) e.Item.FindControl("textDescription")).Text;

    SqlDataSource1.UpdateParameters["original_CategoryID"].DefaultValue 
        = categoryID;
    SqlDataSource1.UpdateParameters["categoryName"].DefaultValue 
        = categoryName;
    SqlDataSource1.UpdateParameters["Description"].DefaultValue 
        = description;
    SqlDataSource1.Update();

    DataList1.EditItemIndex = -1;
    DataList1.DataBind();
}
</script>
<html>
<head ></head>
<body>
  <form id="form1" >
    <div>
        <br />
        <asp:DataList  
            DataKeyField="CategoryID" 
            DataSourceID="SqlDataSource1" ID="DataList1"
            OnEditCommand="DataList1_EditCommand" 
            OnCancelCommand="DataList1_CancelCommand" 
            OnUpdateCommand="DataList1_UpdateCommand">
            <EditItemTemplate>
                ID: <asp:Label ID="Label1"  
                         Text='<%# Eval("CategoryID") %>'>
                    </asp:Label>
                <br />
                Name: <asp:TextBox ID="textCategoryName"  
                         Text='<%# Eval("CategoryName") %>'>
                      </asp:TextBox>
                <br />
                Description: <asp:TextBox ID="textDescription" 
                                  
                        Text='<%# Eval("Description") %>'>
                     </asp:TextBox>
                <br />
                <asp:LinkButton ID="LinkButton1"  
                    CommandName="update" >
                    Save
                </asp:LinkButton>
                &nbsp;
                <asp:LinkButton ID="LinkButton2" >
                    CommandName="cancel" 
                    Cancel
                </asp:LinkButton>
            </EditItemTemplate>
            <ItemTemplate>
                CategoryID:
                <asp:Label ID="CategoryIDLabel"  
                    Text='<%# Eval("CategoryID") %>'>
                </asp:Label>
                <br />
                CategoryName:
                <asp:Label ID="CategoryNameLabel" 
                     Text='<%# Eval("CategoryName") %>'>
                </asp:Label>
                <br />
                Description:
                <asp:Label ID="DescriptionLabel"  
                    Text='<%# Eval("Description") %>'>
                </asp:Label>
                <br />
                <asp:LinkButton  ID="LinkButton1" 
                    CommandName="edit" >
                    Edit
                </asp:LinkButton><br />
            </ItemTemplate>
        </asp:DataList>

        <asp:SqlDataSource ID="SqlDataSource1"  
              ConnectionString=
                 "<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CategoryID], [CategoryName], 
                 [Description] FROM [Categories]"
            UpdateCommand="UPDATE [Categories] SET [CategoryName] = 
                 @CategoryName, [Description] = @Description 
                 WHERE [CategoryID] = @original_CategoryID">
            <UpdateParameters>
               <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.

Sécurité

Les entrées d'utilisateur dans une page Web Forms peuvent inclure un script client nuisible. Par défaut, la page Web Forms valide les entrées d'utilisateur qui n'incluent pas de script ou d'éléments HTML. Pour plus d'informations, consultez Vue d'ensemble des attaques de script.

Voir aussi

Concepts

Modification de données à l'aide du contrôle SqlDataSource

Utilisation de paramètres avec le contrôle SqlDataSource

Référence

Vue d'ensemble du contrôle serveur Web DataList