Compartir por

Tutorial: Crear un formulario maestro/detalle con dos controles DataGridView de formularios Windows Forms

Uno de los escenarios más comunes para usar el DataGridView control es el formulario maestro/detalle , en el que se muestra una relación principal o secundaria entre dos tablas de base de datos. La selección de filas en la tabla maestra hace que la tabla de detalles se actualice con los datos secundarios correspondientes.

La implementación de un formulario maestro/detalle es sencilla usando la interacción entre el control DataGridView y el componente BindingSource. En este recorrido, usted construirá el formulario usando dos DataGridView controladores y dos BindingSource componentes. El formulario mostrará dos tablas relacionadas en la base de datos de ejemplo Northwind SQL Server: Customers y Orders. Cuando haya terminado, tendrá un formulario que mostrará todos los clientes de la base de datos en la parte maestra DataGridView y todos los pedidos del cliente seleccionado en la parte de detalle DataGridView.

Para copiar el código de este tema como una sola lista, ver How to: Create a Master/Detail Form Using Two Windows Forms DataGridView Controls.

Prerrequisitos

Para completar este tutorial, necesitará lo siguiente:

  • Acceso a un servidor que tenga la base de datos de ejemplo Northwind SQL Server.

Creación del formulario

Para crear un formulario maestro/detalle

  1. Cree una clase que derive de Form y contenga dos DataGridView controles y dos BindingSource componentes. El código siguiente proporciona inicialización básica de formulario e incluye un Main método . Si usa el diseñador de Visual Studio para crear el formulario, puede usar el código generado por el diseñador en lugar de este código, pero asegúrese de usar los nombres que se muestran en las declaraciones de variables aquí.

    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. Implemente un método en la definición de clase del formulario para controlar los detalles de la conexión a la base de datos. En este ejemplo se usa un GetData método que rellena un DataSet objeto, se agrega un DataRelation objeto al conjunto de datos y se enlazan los BindingSource componentes. Asegúrese de establecer la connectionString variable en un valor adecuado para la base de datos.

    Importante

    Almacenar información confidencial, como una contraseña, dentro de la cadena de conexión puede afectar a la seguridad de la aplicación. El uso de la autenticación de Windows (también conocido como seguridad integrada) es una manera más segura de controlar el acceso a una base de datos. Para obtener más información, consulte Protección de la información de conexión.

    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. Implemente un controlador para el evento del Load formulario que enlaza los componentes DataGridView a los controles BindingSource y llama al método GetData. En el ejemplo siguiente se incluye código que cambia el tamaño de las columnas para ajustarse a los datos mostrados 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

Probar la aplicación

Ahora puede probar el formulario para asegurarse de que se comporta según lo previsto.

Para probar el formulario

  • Compile y ejecute la aplicación.

    Verá dos DataGridView controles, uno encima del otro. En la parte superior, los clientes de la tabla Northwind Customers y, en la parte inferior, son los Orders correspondientes al cliente seleccionado. A medida que selecciona filas diferentes en la parte superior DataGridView, el contenido del cambio inferior DataGridView en consecuencia.

Pasos siguientes

Esta aplicación te da una comprensión básica de las capacidades del control DataGridView. Puede personalizar la apariencia y el comportamiento del DataGridView control de varias maneras:

Consulte también

  • Last updated on