Partager via

Guide : création d’un formulaire maître/détail en utilisant deux contrôles DataGridView de Windows Forms

  • Article

L’un des scénarios les plus courants d’utilisation du DataGridView contrôle est le formulaire maître/détail dans lequel une relation parent/enfant entre deux tables de base de données est affichée. La sélection de lignes dans la table maître entraîne la mise à jour de la table de détails avec les données enfant correspondantes.

L’implémentation d’un formulaire maître/détail est facile grâce à l'interaction entre le contrôle DataGridView et le composant BindingSource. Dans cette procédure pas à pas, vous allez générer le formulaire à l’aide de deux DataGridView contrôles et deux BindingSource composants. Le formulaire affiche deux tables associées dans l’exemple de base de données Northwind SQL Server : Customers et Orders. Lorsque vous avez terminé, vous aurez un formulaire qui affiche tous les clients de la base de données dans le maître DataGridView et toutes les commandes du client sélectionné en détail DataGridView.

Pour copier le code de cette rubrique en tant que liste unique, consultez Comment : créer un formulaire maître/détail à l’aide de deux contrôles DataGridView Windows Forms.

Conditions préalables

Pour effectuer cette procédure pas à pas, vous aurez besoin des éléments suivants :

  • Accès à un serveur doté de l’exemple de base de données Northwind SQL Server.

Création du formulaire

Pour créer un formulaire principal/détail

  1. Créez une classe qui dérive de Form et contient deux contrôles DataGridView et deux composants BindingSource. Le code suivant fournit une initialisation de formulaire de base et inclut une Main méthode. Si vous utilisez le concepteur Visual Studio pour créer votre formulaire, vous pouvez utiliser le code généré par le concepteur au lieu de ce code, mais veillez à utiliser les noms indiqués dans les déclarations de variables ici.

    using System;
using System.Data;
using System.Data.SqlClient;
using System.Windows.Forms;

public class Form1 : System.Windows.Forms.Form
{
    private DataGridView masterDataGridView = new DataGridView();
    private BindingSource masterBindingSource = new BindingSource();
    private DataGridView detailsDataGridView = new DataGridView();
    private BindingSource detailsBindingSource = new BindingSource();

    [STAThreadAttribute()]
    public static void Main()
    {
        Application.Run(new Form1());
    }

    // Initializes the form.
    public Form1()
    {
        masterDataGridView.Dock = DockStyle.Fill;
        detailsDataGridView.Dock = DockStyle.Fill;

        SplitContainer splitContainer1 = new SplitContainer();
        splitContainer1.Dock = DockStyle.Fill;
        splitContainer1.Orientation = Orientation.Horizontal;
        splitContainer1.Panel1.Controls.Add(masterDataGridView);
        splitContainer1.Panel2.Controls.Add(detailsDataGridView);

        this.Controls.Add(splitContainer1);
        this.Load += new System.EventHandler(Form1_Load);
        this.Text = "DataGridView master/detail demo";
    }

    Imports System.Data
Imports System.Data.SqlClient
Imports System.Windows.Forms

Public Class Form1
    Inherits System.Windows.Forms.Form

    Private masterDataGridView As New DataGridView()
    Private masterBindingSource As New BindingSource()
    Private detailsDataGridView As New DataGridView()
    Private detailsBindingSource As New BindingSource()

    <STAThreadAttribute()> _
    Public Shared Sub Main()
        Application.Run(New Form1())
    End Sub

    ' Initializes the form.
    Public Sub New()

        masterDataGridView.Dock = DockStyle.Fill
        detailsDataGridView.Dock = DockStyle.Fill

        Dim splitContainer1 As New SplitContainer()
        splitContainer1.Dock = DockStyle.Fill
        splitContainer1.Orientation = Orientation.Horizontal
        splitContainer1.Panel1.Controls.Add(masterDataGridView)
        splitContainer1.Panel2.Controls.Add(detailsDataGridView)

        Me.Controls.Add(splitContainer1)
        Me.Text = "DataGridView master/detail demo"

    End Sub

    }

    End Class

  2. Implémentez une méthode dans la définition de classe de votre formulaire pour gérer les détails de la connexion à la base de données. Cet exemple utilise une GetData méthode qui remplit un DataSet objet, ajoute un DataRelation objet au jeu de données et lie les BindingSource composants. Veillez à définir la connectionString variable sur une valeur appropriée pour votre base de données.

    Important

    Le stockage d’informations sensibles, telles qu’un mot de passe, dans la chaîne de connexion peut affecter la sécurité de votre application. L’utilisation de l’authentification Windows (également appelée sécurité intégrée) est un moyen plus sécurisé de contrôler l’accès à une base de données. Pour plus d’informations, consultez Protection des informations de connexion.

    private void GetData()
{
    try
    {
        // Specify a connection string. Replace the given value with a
        // valid connection string for a Northwind SQL Server sample
        // database accessible to your system.
        String connectionString =
            "Integrated Security=SSPI;Persist Security Info=False;" +
            "Initial Catalog=Northwind;Data Source=localhost";
        SqlConnection connection = new SqlConnection(connectionString);

        // Create a DataSet.
        DataSet data = new DataSet();
        data.Locale = System.Globalization.CultureInfo.InvariantCulture;

        // Add data from the Customers table to the DataSet.
        SqlDataAdapter masterDataAdapter = new
            SqlDataAdapter("select * from Customers", connection);
        masterDataAdapter.Fill(data, "Customers");

        // Add data from the Orders table to the DataSet.
        SqlDataAdapter detailsDataAdapter = new
            SqlDataAdapter("select * from Orders", connection);
        detailsDataAdapter.Fill(data, "Orders");

        // Establish a relationship between the two tables.
        DataRelation relation = new DataRelation("CustomersOrders",
            data.Tables["Customers"].Columns["CustomerID"],
            data.Tables["Orders"].Columns["CustomerID"]);
        data.Relations.Add(relation);

        // Bind the master data connector to the Customers table.
        masterBindingSource.DataSource = data;
        masterBindingSource.DataMember = "Customers";

        // Bind the details data connector to the master data connector,
        // using the DataRelation name to filter the information in the
        // details table based on the current row in the master table.
        detailsBindingSource.DataSource = masterBindingSource;
        detailsBindingSource.DataMember = "CustomersOrders";
    }
    catch (SqlException)
    {
        MessageBox.Show("To run this example, replace the value of the " +
            "connectionString variable with a connection string that is " +
            "valid for your system.");
    }
}

    Private Sub GetData()

    Try
        ' Specify a connection string. Replace the given value with a 
        ' valid connection string for a Northwind SQL Server sample
        ' database accessible to your system.
        Dim connectionString As String = _
            "Integrated Security=SSPI;Persist Security Info=False;" & _
            "Initial Catalog=Northwind;Data Source=localhost"
        Dim connection As New SqlConnection(connectionString)

        ' Create a DataSet.
        Dim data As New DataSet()
        data.Locale = System.Globalization.CultureInfo.InvariantCulture

        ' Add data from the Customers table to the DataSet.
        Dim masterDataAdapter As _
            New SqlDataAdapter("select * from Customers", connection)
        masterDataAdapter.Fill(data, "Customers")

        ' Add data from the Orders table to the DataSet.
        Dim detailsDataAdapter As _
            New SqlDataAdapter("select * from Orders", connection)
        detailsDataAdapter.Fill(data, "Orders")

        ' Establish a relationship between the two tables.
        Dim relation As New DataRelation("CustomersOrders", _
            data.Tables("Customers").Columns("CustomerID"), _
            data.Tables("Orders").Columns("CustomerID"))
        data.Relations.Add(relation)

        ' Bind the master data connector to the Customers table.
        masterBindingSource.DataSource = data
        masterBindingSource.DataMember = "Customers"

        ' Bind the details data connector to the master data connector,
        ' using the DataRelation name to filter the information in the 
        ' details table based on the current row in the master table. 
        detailsBindingSource.DataSource = masterBindingSource
        detailsBindingSource.DataMember = "CustomersOrders"
    Catch ex As SqlException
        MessageBox.Show("To run this example, replace the value of the " & _
            "connectionString variable with a connection string that is " & _
            "valid for your system.")
    End Try

End Sub

  3. Implémentez un gestionnaire pour l’événement de votre formulaire Load qui lie les contrôles DataGridView aux composants BindingSource et appelle la méthode GetData. L’exemple suivant inclut le code qui redimensionne les colonnes en fonction des données affichées DataGridView .

    private void Form1_Load(object sender, System.EventArgs e)
{
    // Bind the DataGridView controls to the BindingSource
    // components and load the data from the database.
    masterDataGridView.DataSource = masterBindingSource;
    detailsDataGridView.DataSource = detailsBindingSource;
    GetData();

    // Resize the master DataGridView columns to fit the newly loaded data.
    masterDataGridView.AutoResizeColumns();

    // Configure the details DataGridView so that its columns automatically
    // adjust their widths when the data changes.
    detailsDataGridView.AutoSizeColumnsMode =
        DataGridViewAutoSizeColumnsMode.AllCells;
}

    Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
    Handles Me.Load

    ' Bind the DataGridView controls to the BindingSource
    ' components and load the data from the database.
    masterDataGridView.DataSource = masterBindingSource
    detailsDataGridView.DataSource = detailsBindingSource
    GetData()

    ' Resize the master DataGridView columns to fit the newly loaded data.
    masterDataGridView.AutoResizeColumns()

    ' Configure the details DataGridView so that its columns automatically
    ' adjust their widths when the data changes.
    detailsDataGridView.AutoSizeColumnsMode = _
        DataGridViewAutoSizeColumnsMode.AllCells

End Sub

Test de l’application

Vous pouvez maintenant tester le formulaire pour vous assurer qu’il se comporte comme prévu.

Pour tester le formulaire

  • Compilez et exécutez l’application.

    Vous verrez deux DataGridView contrôles, un au-dessus de l’autre. En haut sont les clients de la table Northwind Customers , et en bas sont les Orders correspondants au client sélectionné. Lorsque vous sélectionnez différentes lignes dans la partie supérieure DataGridView, le contenu de la partie inférieure DataGridView change en conséquence.

Étapes suivantes

Cette application vous donne une compréhension de base des fonctionnalités du contrôle DataGridView. Vous pouvez personnaliser l’apparence et le comportement du contrôle DataGridView de plusieurs façons :

Voir aussi