Modification des données à l'aide d'un contrôle serveur Web DetailsView

Mise à jour : novembre 2007

Le contrôle DetailsView présente des fonctionnalités intégrées qui permettent aux utilisateurs de modifier ou de supprimer des enregistrements sans aucune programmation. Vous pouvez personnaliser la fonctionnalité d'édition du contrôle DetailsView à l'aide d'événements et de modèles.

Activation de la fonctionnalité d'édition intégrée

Vous pouvez activer la fonctionnalité d'édition intégrée du contrôle DetailsView en affectant la valeur true à une ou plusieurs des propriétés suivantes AutoGenerateEditButton, AutoGenerateInsertButton et AutoGenerateDeleteButton. Le contrôle DetailsView ajoute automatiquement la fonctionnalité pour que les utilisateurs puissent modifier ou supprimer l'enregistrement lié actuel et insérer un nouvel enregistrement, à condition que la source de données du contrôle DetailsView prenne en charge les modifications.

Modification des données dépendantes par le contrôle DetailsView

Le contrôle DetailsView fournit une interface utilisateur qui permet aux utilisateurs de modifier le contenu d'un enregistrement lié. En général, une vue modifiable affiche une ligne supplémentaire qui contient des boutons de commande avec le texte Modifier, Insérer et Supprimer. Par défaut, la ligne est ajoutée au bas du contrôle DetailsView.

Lorsque l'utilisateur clique sur un bouton de commande, le contrôle DetailsView affiche à nouveau la ligne contenant les contrôles qui permettent aux utilisateurs de modifier le contenu de la ligne. Le bouton Modifier est remplacé par des boutons qui permettent à l'utilisateur d'enregistrer les modifications ou d'annuler la modification d'une ligne. Le contrôle DetailsView utilise des zones de texte pour afficher les données dans un contrôle BoundField et pour les données affichées automatiquement lorsque la propriété AutoGenerateRows a la valeur true. Les données booléennes sont affichées à l'aide de cases à cocher. Vous pouvez personnaliser le contrôle d'entrée affiché en mode édition en utilisant un contrôle TemplateField. Pour plus d'informations, consultez Création d'une ligne personnalisée dans un contrôle serveur Web DetailsView.

Lorsque le contrôle DetailsView exécute une opération d'insertion, il transmet les valeurs à insérer à la source de données à l'aide de la collection de dictionnaire Values.

Pour une opération de mise à jour ou de suppression, le contrôle DetailsView transmet les valeurs à la source de données dans trois collections de dictionnaires : le dictionnaire Keys, le dictionnaire NewValues et le dictionnaire OldValues. Vous pouvez accéder à chaque dictionnaire à l'aide des arguments d'événement transmis aux événements d'insertion, de mise à jour ou de suppression déclenchés par le contrôle DetailsView.

Le dictionnaire Keys contient les noms et les valeurs des champs qui identifient uniquement l'enregistrement à mettre à jour ou à supprimer, et contient toujours les valeurs initiales des champs clés avant que l'enregistrement ait été modifié. Pour spécifier les champs qui sont placés dans le dictionnaire Keys, affectez à la propriété DataKeyNames une liste avec la virgule comme séparateur des noms de champs qui représentent la clé primaire de vos données. La collection Keys est remplie automatiquement avec les valeurs associées aux champs spécifiés pour la propriété DataKeyNames.

Remarque :
Les valeurs de clés primaires d'origine pour les champs spécifiés dans la propriété DataKeyNames sont stockées dans l'état d'affichage. Si vos valeurs de clés primaires contiennent des informations sensibles, vous devez chiffrer le contenu de l'état d'affichage en affectant à la propriété ViewStateEncryptionMode de la page la valeur Always.

Les dictionnaires Values et NewValues contiennent les valeurs actuelles des contrôles d'entrée de l'enregistrement inséré ou modifié, respectivement. Le dictionnaire OldValues contient les valeurs d'origine des champs, à l'exception des champs clés qui sont inclus dans le dictionnaire Keys . Les nouvelles valeurs des champs clés sont incluses dans le dictionnaire NewValues.

Le contrôle de source de données utilise les valeurs des dictionnaires Keys, Values, NewValues et OldValues comme paramètres pour sa commande d'insertion, de mise à jour ou de suppression. Pour plus d'informations sur la création des paramètres de contrôle de source de données en fonction des dictionnaires créés pour les valeurs liées, consultez Comment un contrôle de source de données crée des paramètres pour des champs liés aux données.

Après une mise à jour, le contrôle DetailsView déclenche son événement ItemUpdated. Cet événement vous permet d'exécuter la logique de mise à jour ultérieure, par exemple les contrôles d'intégrité. De la même façon, le contrôle DetailsView déclenche son événement ItemInserted après une insertion et son événement ItemDeleted après une suppression.

Une fois la mise à jour terminée et tous les événements déclenchés, le contrôle DetailsView se reconnecte au contrôle de source de données pour afficher les données mises à jour.

Personnalisation de l'interface utilisateur de modification dans le contrôle DetailsView

Par défaut, le contrôle DetailsView génère automatiquement une ligne pour chaque champ lié de la source de données. Vous pouvez personnaliser les champs liés au contrôle DetailsView en affectant la valeur false à la propriété AutoGenerateRows et en spécifiant un contrôle BoundField pour chaque champ à afficher dans le contrôle DetailsView.

Pour personnaliser l'affichage des boutons de commande, vous pouvez affecter la valeur false à la propriété AutoGenerateEditButton du contrôle DetailsView. Vous pouvez ajouter ensuite des objets CommandField individuels pour une ligne. Par exemple, vous pouvez ajouter un champ CommandField dont la propriété ShowEditButton a la valeur true pour placer la ligne active affichée en mode édition.

Vous pouvez spécifier si un champ dépendant est modifiable à l'aide de la propriété ReadOnly du contrôle BoundField. Lorsque la propriété ReadOnly a la valeur false, le champ sera modifiable lorsque l'utilisateur clique sur le bouton de commande Modifier. Lorsque la propriété ReadOnly a la valeur true, le champ dépendant s'affiche, mais l'utilisateur ne peut pas modifier le champ.

De la même façon, vous pouvez spécifier si une valeur peut être insérée pour un champ dépendant à l'aide de la propriété InsertVisible du contrôle BoundField. Si la propriété InsertVisible a la valeur false, le champ dépendant ne s'affiche pas lorsque l'utilisateur clique sur le bouton de commande Nouveau. Ceci est particulièrement utile lorsque le champ dépendant est généré automatiquement par la source de données, par exemple un tampon de date et heure ou une clé primaire qui s'incrémente automatiquement.

Exemple

L'exemple de code suivant utilise un contrôle GridView et un contrôle DetailsView pour afficher des données. Le contrôle DetailsView est configuré pour prendre en charge la modification des données.

<%@ Page language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >

  Sub EmployeesDropDownList_OnSelectedIndexChanged(sender As Object, e As EventArgs)
    EmployeeDetailsView.DataBind()
  End Sub

  Sub EmployeeDetailsView_ItemUpdated(sender As Object, e As DetailsViewUpdatedEventArgs)
    EmployeesDropDownList.DataBind()
    EmployeesDropDownList.SelectedValue = e.Keys("EmployeeID").ToString()
    EmployeeDetailsView.DataBind()
  End Sub

  Sub EmployeeDetailsView_ItemDeleted(sender As Object, e As DetailsViewDeletedEventArgs)
    EmployeesDropDownList.DataBind()
  End Sub

  Sub EmployeeDetailsSqlDataSource_OnInserted(sender As Object, e As SqlDataSourceStatusEventArgs)
    Dim command As System.Data.Common.DbCommand = e.Command  
    EmployeesDropDownList.DataBind()
    EmployeesDropDownList.SelectedValue = _
      command.Parameters("@EmpID").Value.ToString()
    EmployeeDetailsView.DataBind()
  End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
  <head >
    <title>Northwind Employees</title>
</head>
<body>
    <form id="form1" >

      <h3>Northwind Employees</h3>

        <table cellspacing="10">

          <tr>
            <td valign="top">
              <asp:DropDownList ID="EmployeesDropDownList" 
                DataSourceID="EmployeesSqlDataSource" 
                DataValueField="EmployeeID" 
                DataTextField="FullName"
                AutoPostBack="True"
                OnSelectedIndexChanged="EmployeesDropDownList_OnSelectedIndexChanged"
                RunAt="Server" />            
            </td>

            <td valign="top">                
              <asp:DetailsView ID="EmployeeDetailsView"
                DataSourceID="EmployeeDetailsSqlDataSource"
                AutoGenerateRows="false"
                AutoGenerateInsertbutton="true"
                AutoGenerateEditbutton="true"
                AutoGenerateDeletebutton="true"
                DataKeyNames="EmployeeID"     
                Gridlines="Both"
                OnItemUpdated="EmployeeDetailsView_ItemUpdated"
                OnItemDeleted="EmployeeDetailsView_ItemDeleted"      
                RunAt="server">

                <HeaderStyle backcolor="Navy"
                  forecolor="White"/>

                <RowStyle backcolor="White"/>

                <AlternatingRowStyle backcolor="LightGray"/>

                <EditRowStyle backcolor="LightCyan"/>

                <Fields>                  
                  <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" InsertVisible="False" ReadOnly="true"/>                    
                  <asp:BoundField DataField="FirstName"  HeaderText="First Name"/>
                  <asp:BoundField DataField="LastName"   HeaderText="Last Name"/>                    
                  <asp:BoundField DataField="Address"    HeaderText="Address"/>                    
                  <asp:BoundField DataField="City"       HeaderText="City"/>                        
                  <asp:BoundField DataField="Region"     HeaderText="Region"/>
                  <asp:BoundField DataField="PostalCode" HeaderText="Postal Code"/>                    
                </Fields>                    
              </asp:DetailsView>
            </td>                
          </tr>            
        </table>

        <asp:SqlDataSource ID="EmployeesSqlDataSource"  
          SelectCommand="SELECT EmployeeID, LastName + ', ' + FirstName AS FullName FROM Employees" 
          Connectionstring="<%$ ConnectionStrings:NorthwindConnection %>" 
          RunAt="server">
        </asp:SqlDataSource>


        <asp:SqlDataSource ID="EmployeeDetailsSqlDataSource" 
          SelectCommand="SELECT EmployeeID, LastName, FirstName, Address, City, Region, PostalCode
                         FROM Employees WHERE EmployeeID = @EmpID"

          InsertCommand="INSERT INTO Employees(LastName, FirstName, Address, City, Region, PostalCode)
                         VALUES (@LastName, @FirstName, @Address, @City, @Region, @PostalCode); 
                         SELECT @EmpID = SCOPE_IDENTITY()"

          UpdateCommand="UPDATE Employees SET LastName=@LastName, FirstName=@FirstName, Address=@Address,
                           City=@City, Region=@Region, PostalCode=@PostalCode
                         WHERE EmployeeID=@EmployeeID"

          DeleteCommand="DELETE Employees WHERE EmployeeID=@EmployeeID"

          ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>"
          OnInserted="EmployeeDetailsSqlDataSource_OnInserted"
          RunAt="server">

          <SelectParameters>
            <asp:ControlParameter ControlID="EmployeesDropDownList" PropertyName="SelectedValue"
                                  Name="EmpID" Type="Int32" DefaultValue="0" />
          </SelectParameters>

          <InsertParameters>
            <asp:Parameter Name="LastName"   Type="String" />
            <asp:Parameter Name="FirstName"  Type="String" />
            <asp:Parameter Name="Address"    Type="String" />
            <asp:Parameter Name="City"       Type="String" />
            <asp:Parameter Name="Region"     Type="String" />
            <asp:Parameter Name="PostalCode" Type="String" />
            <asp:Parameter Name="EmpID" Direction="Output" Type="Int32" DefaultValue="0" />
          </InsertParameters>

          <UpdateParameters>
            <asp:Parameter Name="LastName"   Type="String" />
            <asp:Parameter Name="FirstName"  Type="String" />
            <asp:Parameter Name="Address"    Type="String" />
            <asp:Parameter Name="City"       Type="String" />
            <asp:Parameter Name="Region"     Type="String" />
            <asp:Parameter Name="PostalCode" Type="String" />
            <asp:Parameter Name="EmployeeID" Type="Int32" DefaultValue="0" />
          </UpdateParameters>

          <DeleteParameters>
            <asp:Parameter Name="EmployeeID" Type="Int32" DefaultValue="0" />
          </DeleteParameters>

        </asp:SqlDataSource>
      </form>
  </body>
</html>

<%@ Page language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >

  void EmployeesDropDownList_OnSelectedIndexChanged(Object sender, EventArgs e)
  {
    EmployeeDetailsView.DataBind();
  }

  void EmployeeDetailsView_ItemUpdated(Object sender, DetailsViewUpdatedEventArgs e)
  {
    EmployeesDropDownList.DataBind();
    EmployeesDropDownList.SelectedValue = e.Keys["EmployeeID"].ToString();
    EmployeeDetailsView.DataBind();
  }

  void EmployeeDetailsView_ItemDeleted(Object sender, DetailsViewDeletedEventArgs e)
  {
    EmployeesDropDownList.DataBind();
  }

  void EmployeeDetailsSqlDataSource_OnInserted(Object sender, SqlDataSourceStatusEventArgs e)
  {
    System.Data.Common.DbCommand command = e.Command;   
    EmployeesDropDownList.DataBind();
    EmployeesDropDownList.SelectedValue = 
      command.Parameters["@EmpID"].Value.ToString();
    EmployeeDetailsView.DataBind();
  }

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
  <head >
    <title>Northwind Employees</title>
</head>
<body>
    <form id="form1" >

      <h3>Northwind Employees</h3>

        <table cellspacing="10">

          <tr>
            <td valign="top">
              <asp:DropDownList ID="EmployeesDropDownList" 
                DataSourceID="EmployeesSqlDataSource" 
                DataValueField="EmployeeID" 
                DataTextField="FullName"
                AutoPostBack="True"
                OnSelectedIndexChanged="EmployeesDropDownList_OnSelectedIndexChanged"
                RunAt="Server" />            
            </td>

            <td valign="top">                
              <asp:DetailsView ID="EmployeeDetailsView"
                DataSourceID="EmployeeDetailsSqlDataSource"
                AutoGenerateRows="false"
                AutoGenerateInsertbutton="true"
                AutoGenerateEditbutton="true"
                AutoGenerateDeletebutton="true"
                DataKeyNames="EmployeeID"     
                Gridlines="Both"
                OnItemUpdated="EmployeeDetailsView_ItemUpdated"
                OnItemDeleted="EmployeeDetailsView_ItemDeleted"      
                RunAt="server">

                <HeaderStyle backcolor="Navy"
                  forecolor="White"/>

                <RowStyle backcolor="White"/>

                <AlternatingRowStyle backcolor="LightGray"/>

                <EditRowStyle backcolor="LightCyan"/>

                <Fields>                  
                  <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" InsertVisible="False" ReadOnly="true"/>                    
                  <asp:BoundField DataField="FirstName"  HeaderText="First Name"/>
                  <asp:BoundField DataField="LastName"   HeaderText="Last Name"/>                    
                  <asp:BoundField DataField="Address"    HeaderText="Address"/>                    
                  <asp:BoundField DataField="City"       HeaderText="City"/>                        
                  <asp:BoundField DataField="Region"     HeaderText="Region"/>
                  <asp:BoundField DataField="PostalCode" HeaderText="Postal Code"/>                    
                </Fields>                    
              </asp:DetailsView>
            </td>                
          </tr>            
        </table>

        <asp:SqlDataSource ID="EmployeesSqlDataSource"  
          SelectCommand="SELECT EmployeeID, LastName + ', ' + FirstName AS FullName FROM Employees" 
          Connectionstring="<%$ ConnectionStrings:NorthwindConnection %>" 
          RunAt="server">
        </asp:SqlDataSource>


        <asp:SqlDataSource ID="EmployeeDetailsSqlDataSource" 
          SelectCommand="SELECT EmployeeID, LastName, FirstName, Address, City, Region, PostalCode
                         FROM Employees WHERE EmployeeID = @EmpID"

          InsertCommand="INSERT INTO Employees(LastName, FirstName, Address, City, Region, PostalCode)
                         VALUES (@LastName, @FirstName, @Address, @City, @Region, @PostalCode); 
                         SELECT @EmpID = SCOPE_IDENTITY()"

          UpdateCommand="UPDATE Employees SET LastName=@LastName, FirstName=@FirstName, Address=@Address,
                           City=@City, Region=@Region, PostalCode=@PostalCode
                         WHERE EmployeeID=@EmployeeID"

          DeleteCommand="DELETE Employees WHERE EmployeeID=@EmployeeID"

          ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>"
          OnInserted="EmployeeDetailsSqlDataSource_OnInserted"
          RunAt="server">

          <SelectParameters>
            <asp:ControlParameter ControlID="EmployeesDropDownList" PropertyName="SelectedValue"
                                  Name="EmpID" Type="Int32" DefaultValue="0" />
          </SelectParameters>

          <InsertParameters>
            <asp:Parameter Name="LastName"   Type="String" />
            <asp:Parameter Name="FirstName"  Type="String" />
            <asp:Parameter Name="Address"    Type="String" />
            <asp:Parameter Name="City"       Type="String" />
            <asp:Parameter Name="Region"     Type="String" />
            <asp:Parameter Name="PostalCode" Type="String" />
            <asp:Parameter Name="EmpID" Direction="Output" Type="Int32" DefaultValue="0" />
          </InsertParameters>

          <UpdateParameters>
            <asp:Parameter Name="LastName"   Type="String" />
            <asp:Parameter Name="FirstName"  Type="String" />
            <asp:Parameter Name="Address"    Type="String" />
            <asp:Parameter Name="City"       Type="String" />
            <asp:Parameter Name="Region"     Type="String" />
            <asp:Parameter Name="PostalCode" Type="String" />
            <asp:Parameter Name="EmployeeID" Type="Int32" DefaultValue="0" />
          </UpdateParameters>

          <DeleteParameters>
            <asp:Parameter Name="EmployeeID" Type="Int32" DefaultValue="0" />
          </DeleteParameters>

        </asp:SqlDataSource>
      </form>
  </body>
</html>

Voir aussi

Référence

Vue d'ensemble du contrôle serveur Web DetailsView