Partager via

Procédure pas à pas : exécution de mises à jour en bloc de lignes liées à un contrôle serveur Web GridView

  • Article

Mise à jour : novembre 2007

Lorsque la modification est activée pour un contrôle GridView, par défaut, une seule ligne peut être modifiée à la fois. Cette procédure pas à pas vous indique comment étendre les fonctionnalités du contrôle GridView pour permettre aux utilisateurs de modifier plusieurs lignes et d'enregistrer ensuite toutes les modifications en cliquant sur un bouton. Cette procédure pas à pas utilise un contrôle SqlDataSource pour récupérer les résultats de la source de données et gérer les mises à jour. Le contrôle SqlDataSource agit en tant que source de données pour le contrôle GridView.

Au cours de cette procédure pas à pas, vous apprendrez à :

  • vous connecter à une base de données SQL Server dans Microsoft Visual Web Developer ;

  • utiliser le contrôle SqlDataSource pour gérer l'accès aux données ;

  • afficher des données retournées de la base de données dans le contrôle GridView ;

  • configurer le contrôle GridView pour permettre aux utilisateurs de modifier plusieurs lignes à la fois.

Composants requis

Pour exécuter cette procédure pas à pas, vous avez besoin des éléments suivants :

  • Visual Web Developer (Visual Studio).

  • Microsoft Data Access Components (MDAC) version 2.7 ou ultérieure.

    Si vous utilisez Microsoft Windows XP ou Windows Server 2003, MDAC 2.7 est déjà installé. Toutefois, si vous utilisez Microsoft Windows 2000, vous devrez peut-être mettre à niveau les composants MDAC déjà installés sur votre ordinateur. Pour plus d'informations, consultez Microsoft Data Access Components (MDAC) Installation.

  • Accéder à la base de données Northwind SQL Server. Si vous avez besoin d'une copie de la base de données Northwind pour SQL Server, consultez Installation d'exemples de bases de données dans la documentation en ligne de SQL Server 2005.

    Remarque :

    Si vous avez besoin d'informations sur la façon de se connecter à un ordinateur qui exécute SQL Server, contactez l'administrateur du serveur.

Création du site Web

Si vous avez déjà créé un site Web dans Visual Web Developer en effectuant les étapes décrites dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer, vous pouvez utiliser ce site Web et passer à la section suivante. Sinon, créez un site et une page Web en suivant ces étapes.

Pour créer un site Web de système de fichiers

  1. Ouvrez Visual Web Developer.

  2. Dans le menu Fichier, cliquez sur Nouveau, puis sur Site Web. Si vous utilisez Visual Web Developer Express, dans le menu Fichier, cliquez sur Nouveausite Web.

    La boîte de dialogue Nouveau site Web s'affiche.

  3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.

  4. Dans la liste Emplacement, cliquez sur Système de fichiers et entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.

    Par exemple, entrez le nom de dossier C:\SitesWeb\MiseÀJourEnBloc.

  5. Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.

  6. Cliquez sur OK.

    Visual Web Developer crée le dossier et une page nommée Default.aspx.

Ajout d'une source de données pour le contrôle GridView

Pour afficher des données dans une page Web ASP.NET, vous avez besoin des éléments suivants :

  • Une connexion à une source de données (telle qu'une base de données)

    Dans la procédure suivante, vous créerez une connexion à la base de données Northwind SQL Server.

  • Un contrôle de source de données dans la page qui interagit avec la source de données (la base de données) pour lire et écrire des données.

  • Un contrôle sur la page pour afficher les données.

Dans la procédure suivante, vous afficherez des données dans un contrôle GridView. Le contrôle GridView obtiendra ses données d'un contrôle SqlDataSource.

Pour ajouter une source de données au contrôle GridView

  1. Ouvrez ou basculez vers la page Default.aspx.

  2. Basculez en mode Design.

  3. À partir de l'onglet Données de la boîte à outils, faites glisser un contrôle SqlDataSource sur la page.

    Si la balise active Tâches SqlDataSource n'apparaît pas, cliquez avec le bouton droit sur le contrôle SqlDataSource et cliquez sur Afficher la balise active.

  4. Dans le volet Tâches SqlDataSource, cliquez sur Configurer la source de données.

    L'Assistant Configurer la source de données s'affiche.

  5. Cliquez sur Nouvelle connexion.

    La boîte de dialogue Ajouter une connexion s'affiche.

  6. Le cas échéant, effectuez l'une des opérations suivantes. L'interface utilisateur exacte affichée dépend des connexions de données établies précédemment dans Visual Web Developer.

    • Si la liste Source de données n'affiche pas Microsoft SQL Server (SqlClient), cliquez sur Modifier puis, dans la boîte de dialogue Modifier la source de données, sélectionnez Microsoft SQL Server.

    • Si la boîte de dialogue Choisir la source de données apparaît au lieu de la boîte de dialogue Propriétés de connexion, dans la liste Source de données, sélectionnez le type de source de données que vous utiliserez. Pour cette procédure pas à pas, le type de source de données est Microsoft SQL Server. Dans la liste Fournisseur de données, cliquez sur Fournisseur de données .NET Framework pour SQL Server, puis sur Continuer.

  7. Sur la page Ajouter une connexion, dans la zone de texte Nom du serveur, entrez le nom de l'ordinateur exécutant la base de données SQL Server.

  8. Sous Connexion au serveur, sélectionnez l'option appropriée pour accéder à la base de données SQL Server (sécurité intégrée ou identificateur et mot de passe spécifiques). Si nécessaire, entrez un nom d'utilisateur et un mot de passe.

    Remarque :

    Si vous avez besoin d'informations sur la façon de se connecter à un ordinateur qui exécute SQL Server, contactez l'administrateur du serveur.

  9. Si vous avez entré un mot de passe, activez la case à cocher Enregistrer mon mot de passe.

  10. Cliquez sur Sélectionnez ou entrez un nom de base de données, puis entrez Northwind.

  11. Cliquez sur Tester la connexion et, lorsque vous êtes sûr que la connexion fonctionne, cliquez sur OK.

  12. Dans l'Assistant Configurer la source de données, cliquez sur Suivant.

  13. Assurez-vous que la case à cocher Oui, enregistrez cette connexion en tant que est activée.

  14. Nommez la connexion NorthwindConnectionString, puis cliquez sur Suivant.

  15. Dans la page Configurer l'instruction Select, sélectionnez Spécifiez les colonnes d'une table ou d'une vue.

  16. Dans la liste Nom, sélectionnez Employees.

  17. Sous Colonnes, sélectionnez EmployeeID, LastName et FirstName.

  18. Cliquez sur Avancé.

  19. Activez la case à cocher Générer des instructions INSERT, UPDATE et DELETE, puis cliquez sur OK.

  20. Cliquez sur Suivant.

  21. Cliquez sur Terminer.

Ajout d'un contrôle GridView pour afficher les données

Après avoir configuré un contrôle de source de données pour gérer les données, vous avez besoin d'un contrôle dans la page pour afficher ces données.

Dans la procédure suivante, vous afficherez des données dans un contrôle GridView. Le contrôle GridView obtiendra ses données du contrôle SqlDataSource que vous avez ajouté précédemment.

Pour permettre aux utilisateurs de modifier le contenu de tout le contrôle GridView simultanément (et non une ligne à la fois), vous devez personnaliser le contrôle GridView. Vous remplacerez les éléments d'affichage par défaut dans chaque colonne par les éléments modifiables, avant de les lier à la source de données. Pour cela, vous créerez des colonnes TemplateField. Dans le ItemTemplate de chaque colonne TemplateField, vous ajouterez un contrôle TextBox lié dans lequel les utilisateurs pourront modifier les données.

Pour ajouter et configurer un contrôle GridView pour afficher des données

  1. Vérifiez que vous êtes en mode Design pour la page Default.aspx.

  2. À partir de l'onglet Données de la boîte à outils, faites glisser un contrôle GridView sur la page.

    Dans la zone de liste Choisir la source de données du panneau Tâches GridView, sélectionnez le contrôle SqlDataSource que vous avez ajouté précédemment, SqlDataSource1.

  3. Sélectionnez Activer la pagination.

  4. Cliquez sur Modifier les colonnes.

    La boîte de dialogue Champs s'affiche.

  5. Sous Champs sélectionnés, sélectionnez FirstName.

  6. Cliquez sur Convertir ce champ en TemplateField.

  7. Convertissez le champ LastName en un champ de modèle en procédant comme pour le champ FirstName. Ne convertissez pas le champ EmployeeId car il contient la clé primaire et, par conséquent, il n'est pas modifiable.

  8. Cliquez sur OK.

  9. Dans le panneau Tâches GridView, cliquez sur Modifier les modèles.

  10. Dans la liste Afficher, sous FirstName, cliquez sur EditItemTemplate.

    Le contrôle GridView affiche une zone modifiable avec la disposition par défaut de la colonne FirstName en mode Édition.

  11. Cliquez avec le bouton droit sur le contrôle TextBox dans le EditItemTemplate, puis cliquez sur Copier.

  12. Cliquez avec le bouton droit sur le contrôle GridView, puis cliquez sur Afficher la balise active.

  13. Dans la liste Afficher, sous FirstName, cliquez sur ItemTemplate.

    Le contrôle GridView affiche désormais la disposition par défaut de la colonne FirstNameen mode d'affichage.

  14. Supprimez le contrôle Label existant.

  15. Cliquez avec le bouton droit sur la zone modifiable ItemTemplate, puis cliquez sur Coller.

    Vous avez copié le contrôle TextBox, y compris sa configuration de liaison de données, de la disposition EditItemTemplate à la disposition ItemTemplate.

  16. Sélectionnez le contrôle TextBox puis, dans la fenêtre Propriétés, affectez à la propriété (ID) la valeur FirstNameTextBox. Vous vous assurerez ainsi que le contrôle TextBox que vous avez collé a un ID différent de celui que vous avez copié.

  17. Définissez la propriété MaxLength à 10 (la longueur maximale du champ dans la base de données).

    Vous évitez ainsi que les utilisateurs n'entrent davantage d'informations que ne peut en contenir le champ FirstName dans la base de données.

  18. Répétez les neuf étapes précédentes, en modifiant cette fois le champ de modèle LastName. Remplacez le contrôle Label existant par un TextBox copié à partir de la disposition EditItemTemplate et affectez à la propriété ID la valeur LastNameTextBox.

    Pour la propriété MaxLength du contrôle TextBox, spécifiez la valeur 20.

  19. Cliquez avec le bouton droit sur le contrôle GridView, puis cliquez sur Terminer la modification du modèle.

Ajout d'une procédure pour effectuer des mises à jour en bloc

Après avoir configuré le contrôle GridView pour afficher les données modifiables, vous devez ajouter le code pour effectuer la mise à jour en bloc. Dans cette section, vous exécuterez les étapes suivantes :

  • ajouter un contrôle Button et dans son gestionnaire Click, ajouter le code pour mettre à jour les modifications de chaque ligne du contrôle GridView en bloc ;

  • ajouter un objet DataTable qui stocke les valeurs des données d'origine ;

  • ajouter le code pour déterminer si une ligne a été modifiée. Les valeurs actuelles affichées dans le contrôle GridView seront comparées aux valeurs d'origine stockées dans l'objet DataTable. Si une ou plusieurs des valeurs affichées ne correspondent pas à la valeur d'origine, la ligne sera mise à jour dans la base de données. Sinon, la ligne ne sera pas incluse dans la mise à jour en bloc.

Pour créer une procédure pour effectuer la mise à jour en bloc

  1. Basculez en mode Design.

  2. Sélectionnez le contrôle GridView et, dans la fenêtre Propriétés, cliquez sur le bouton Événements () pour afficher les événements du contrôle GridView.

  3. Dans le champ RowDataBound, tapez GridView1_RowDataBound et appuyez sur Entrée.

    Visual Web Developer crée un gestionnaire d'événements pour l'événement RowDataBound du contrôle GridView. Le code ressemblera à l'exemple de code suivant :

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

End Sub

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{

}

  4. Remplacez la procédure générée par le code suivant (y compris les variables privées).

    Private tableCopied As Boolean = False
Private originalDataTable As System.Data.DataTable

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
    If e.Row.RowType = DataControlRowType.DataRow Then
        If Not tableCopied Then
            originalDataTable = CType(e.Row.DataItem, System.Data.DataRowView).Row.Table.Copy()
            ViewState("originalValuesDataTable") = originalDataTable
            tableCopied = True
        End If
    End If
End Sub

    private bool tableCopied = false;
private DataTable originalDataTable;

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
        if (!tableCopied)
        {
            originalDataTable = ((DataRowView)e.Row.DataItem).Row.Table.Copy();
            ViewState["originalValuesDataTable"] = originalDataTable;
            tableCopied = true;
        }
}

    Le code s'exécute chaque fois que le contrôle GridView exécute la liaison de données. Pendant la liaison de la première ligne, le code enregistre une copie des valeurs de base de données d'origine dans un objet DataTable, qui est ensuite stocké dans ViewState.

  5. Basculez en mode Design.

  6. À partir de l'onglet Standard de la boîte à outils, faites glisser un contrôle Button sur la page.

  7. Dans la fenêtre Propriétés, cliquez sur le bouton Propriétés () pour afficher les propriétés du contrôle Button.

  8. Dans le champ (ID), entrez UpdateButton.

  9. Dans le champ Text, entrez Update.

  10. Cliquez sur le bouton Événements () pour afficher les événements du contrôle Button.

  11. Dans le champ Click, tapez UpdateButton_Click et appuyez sur Entrée.

    Visual Web Developer crée un gestionnaire d'événements pour l'événement Click du contrôle Button. Le code ressemblera à l'exemple de code suivant :

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

End Sub

    protected void UpdateButton_Click(object sender, EventArgs e)
{

}

  12. Remplacez la procédure générée par le code suivant :

    Protected Sub UpdateButton_Click(ByVal sender As Object, ByVal e As EventArgs)
    originalDataTable = CType(ViewState("originalValuesDataTable"), System.Data.DataTable)

    For Each r As GridViewRow In GridView1.Rows
        If IsRowModified(r) Then GridView1.UpdateRow(r.RowIndex, False)
    Next

    ' Rebind the Grid to repopulate the original values table.
    tableCopied = False
    GridView1.DataBind()
End Sub

Protected Function IsRowModified(ByVal r As GridViewRow) As Boolean
    Dim currentID As Integer
    Dim currentLastName As String
    Dim currentFirstName As String

    currentID = Convert.ToInt32(GridView1.DataKeys(r.RowIndex).Value)

    currentLastName = CType(r.FindControl("LastNameTextBox"), TextBox).Text
    currentFirstName = CType(r.FindControl("FirstNameTextBox"), TextBox).Text

    Dim row As System.Data.DataRow = _
        originalDataTable.Select(String.Format("EmployeeID = {0}", currentID))(0)

    If Not currentLastName.Equals(row("LastName").ToString()) Then Return True
    If Not currentFirstName.Equals(row("FirstName").ToString()) Then Return True

    Return False
End Function

    protected void UpdateButton_Click(object sender, EventArgs e)
{
    originalDataTable = (DataTable)ViewState["originalValuesDataTable"];

    foreach (GridViewRow r in GridView1.Rows)
        if (IsRowModified(r)) { GridView1.UpdateRow(r.RowIndex, false); }

    // Rebind the Grid to repopulate the original values table.
    tableCopied = false;
    GridView1.DataBind();
}

protected bool IsRowModified(GridViewRow r)
{
    int currentID;
    string currentLastName;
    string currentFirstName;

    currentID = Convert.ToInt32(GridView1.DataKeys[r.RowIndex].Value);

    currentLastName = ((TextBox)r.FindControl("LastNameTextBox")).Text;
    currentFirstName = ((TextBox)r.FindControl("FirstNameTextBox")).Text;

    DataRow row =
        originalDataTable.Select(String.Format("EmployeeID = {0}", currentID))[0];

    if (!currentLastName.Equals(row["LastName"].ToString())) { return true; }
    if (!currentFirstName.Equals(row["FirstName"].ToString())) { return true; }

    return false;
}
    Remarque :

    La procédure exécute une comparaison de chaînes à l'aide de la valeur de chaque contrôle TextBox modifiable et de la valeur stockée dans l'objet DataTable mis en cache. Si vous avez mis en forme le texte dans le contrôle TextBox, les valeurs pourraient être équivalentes, mais leurs représentations sous forme de chaîne ne correspondront pas. Par exemple, si vous avez mis en forme une valeur DateTime à l'aide du format de date courte ({0:d}), la valeur dans le contrôle TextBox de date pourrait être 3/2/2005. La représentation sous forme de chaîne de la valeur de date de l'objet DataTable serait 3/2/2005 12:00 AM. Dans ce cas, vous devez ajouter une logique de comparaison qui prend en compte les formats et les paramètres de localisation.

    La procédure parcourt les lignes du contrôle GridView et appelle la fonction IsRowModified personnalisée pour chaque ligne. La fonction compare la ligne actuelle à la ligne correspondante dans l'objet DataTable et retourne true si la ligne a changé. Pour toutes les lignes qui ont changé, le code dans le gestionnaire Click du bouton appelle la méthode UpdateRow du contrôle GridView.

Test de la page

Vous pouvez à présent exécuter la page pour tester le code.

Pour tester la page

  1. Appuyez sur CTRL+F5 pour exécuter la page.

    La page s'affiche dans le navigateur. Le contrôle GridView affiche les lignes de données de la table Employees de Northwind dans les pages modifiables de données.

  2. Modifiez certaines valeurs.

  3. Cliquez sur Mettre à jour.

    Les lignes modifiées sont mises à jour dans la base de données.

  4. Fermez le navigateur.

Étapes suivantes

Cette procédure pas à pas a illustré comment vous pouvez étendre les fonctionnalités du contrôle GridView pour activer des mises à jour de plusieurs lignes de données sur une page Web ASP.NET. Vous pouvez également étendre votre application pour permettre aux utilisateurs d'ajouter de nouvelles lignes de données à l'aide d'un contrôle DetailsView ou FormView. Vous pouvez également permettre aux utilisateurs d'employer d'autres contrôles que le contrôle TextBox pour modifier des valeurs, notamment un contrôle DropDownList. Pour plus d'informations, consultez les rubriques suivantes :

Voir aussi

Tâches

Comment : sécuriser des chaînes de connexion lors de l'utilisation de contrôles de source de données

Procédure pas à pas : affichage d'une liste déroulante tout en modifiant le contrôle serveur Web GridView

Procédure pas à pas : accès aux données de base dans les pages Web