Cómo: Crear una página principal/detalle con controles de formulario Web

Para obtener información adicional acerca de cómo realizar esta tarea mediante páginas Active Server de Microsoft, haga clic en el número de artículo siguiente para verlo en Microsoft Knowledge Base:

194018 Cómo: crear una página principal/detalle (.asp) mediante controles de tiempo de diseño (DTC)

EN ESTA TAREA

Resumen

Este artículo describe cómo utilizar los controles de formulario Web para mostrar una lista de elementos o registros que están asociados con un determinado elemento o registro seleccionado por un usuario.

Si el objeto DataSet contiene una serie de tablas relacionadas, puede utilizar dos controles DataGrid para mostrar los datos en formato principal-detalle. Un conjunto de datos se designa como cuadrícula principal y la segunda se designa como cuadrícula de detalles. Cuando un usuario selecciona una entrada en la lista maestra, todas las entradas secundarias relacionadas se muestran en la lista de detalles.

Por ejemplo, si el DataSet contiene una tabla customers y una tabla pedidos relacionados, especifique la tabla customers como cuadrícula principal y la tabla orders como cuadrícula de detalles. Cuando se selecciona un cliente en la cuadrícula principal, todos los pedidos asociados al cliente de la tabla orders se muestran en la cuadrícula de detalles.

Crear un proyecto de ejemplo

  1. Inicie Microsoft Visual Studio. NET. Se muestra el IDE de .NET de Visual Studio.
  2. En el menú archivo, elija nuevo y, a continuación, haga clic en proyecto.
  3. En el cuadro de diálogo Nuevo proyecto , haga clic en Proyectos de Visual Basic en Tipos de proyectoy, a continuación, en plantillas, haga clic en Aplicación Web de ASP.NET .
  4. En el cuadro de diálogo Nuevo proyecto , busque los cuadros de texto nombre y ubicación . Observe que el cuadro nombre no está disponible (aparece atenuada). El cuadro de texto ubicación contiene el texto siguiente (o similar):
    http://localhost/WebApplication1
    Cambie "http://localhost/WebApplication1" a http://localhost/MasterDetailTesty, a continuación, haga clic en Aceptar. Se crea un nuevo proyecto, que incluye un Web Form denominado WebForm1.aspx.

Agregar una conexión de datos

  1. En el menú Ver , haga clic en Explorador de servidores.
  2. Haga clic en Conexiones de datosy, a continuación, haga clic en Agregar conexión.
  3. En la ficha proveedor , haga clic en Proveedor Microsoft OLE DB para SQL Server.
  4. En la ficha conexión , escriba el nombre del servidor que está ejecutando Microsoft SQL Server, el nombre de usuario y la contraseña para tener acceso al servidor que está ejecutando SQL Server y, a continuación, seleccione la base de datos NorthWind .
  5. Haga clic en Probar conexión para comprobar que funciona la conexión y, a continuación, haga clic en Aceptar.

Preparar el formulario Web

  1. En el Explorador de proyectos, haga clic en la página WebForm1.aspx .
  2. Haga clic derecho en la página WebForm1.aspx y, a continuación, haga clic en Propiedades.
  3. En la ficha General , haga clic en FlowLayout en Diseño de páginay, a continuación, haga clic en Aceptar.
  4. Compruebe que la página WebForm1.aspx está en la vista Diseño haciendo clic en la ficha Diseño , en el formulario Web.
  5. Arrastre un control Button desde el cuadro de herramientas a la página y, a continuación, escriba el texto del botón Load .

Preparar los controles DataGrid

  1. Arrastre dos controles DataGrid desde el cuadro de herramientas al formulario Web.
  2. Haga clic en el primer control DataGrid que agregó al formulario Web, que se denomina DataGrid1y, a continuación, haga clic en Generador de propiedades.
  3. En la sección columnas disponibles, haga clic en columnasy, a continuación, agregar una Columna de botones a las Columnas seleccionadas.
  4. Haga clic en la columna de botón, escriba Mostrar detalles como el texto, escriba select como el nombre del comando y, a continuación, compruebe que el Botón de vínculo está seleccionado para el Tipo de botón. Haga clic en Aceptar.
  5. En la sección de paginación, haga clic para activar la casilla de verificación Permitir paginación y, a continuación, establezca el tamaño de página en 5. Haga clic en Aceptar.
  6. Haga clic en el segundo DataGrid que agregó al formulario Web, que se denomina Datagrid2 y, a continuación, haga clic en Generador de propiedades.
  7. En la sección de paginación, haga clic para activar la casilla de verificación Permitir paginación y, a continuación, establezca el tamaño de página en 5.

Trabajar con los datos

  1. En el menú Ver , haga clic en Explorador de servidores.
  2. Arrastre la tabla pedidos y la tabla Customers desde Explorador de servidores hasta el formulario. Observe que un objeto SqlConnection y dos objetos de SqlDataAdapter aparecen en el formulario.
  3. En el menú datos , haga clic en Generar conjunto de datos. En el cuadro de diálogo que aparece, asegúrese de que estén seleccionadas todas las tablas que debe tener para la cuadrícula. Asegúrese de que está seleccionada la nueva para el conjunto de datos y que está seleccionado Agregar este conjunto de datos al diseñador . En el cuadro de texto Nueva selección , escriba CustomersOrders para denominar el conjunto de datos. Observe que aparece un control DataSet del formulario Web.
  4. En el Explorador de proyectos, haga doble clic en el archivo CustomersOrders.xsd .
  5. Haga clic en el campo clave de la tabla maestra de clientes, elija Agregary, a continuación, haga clic en Nueva relación.
  6. En el cuadro de diálogo Editar relación , en nombre, escriba la relación.
  7. En el elemento primario, haga clic en clientes. Elemento secundario, haga clic en pedidos.
  8. Compruebe que Los campos clave y los Campos de clave externa se establecen en CustomerIDy, a continuación, haga clic en Aceptar.
  9. Guarde la relación seleccionando Guardar todo en el menú archivo .

Configuraciones de DataGrid final

  1. En el Explorador de proyectos, haga doble clic en la página WebForm1.aspx .
  2. Seleccione el primer DataGrid que agregó a la página, denominada DataGrid1.
  3. En la ventana Propiedades, establezca los siguientes valores:
    1. En el cuadro de propiedad origen de datos , haga clic en CustomersOrders1.
    2. En el cuadro de la propiedad DataMember , haga clic en clientes.
    3. En el cuadro de la propiedad DataKeyField en CustomerID.

Código para completar el ejemplo

  1. (Ratón) en WebForm1.aspxy, a continuación, haga clic en Ver código.
  2. En la página WebForm1.aspx, agregue el código siguiente:
    Public Sub FillDataSet(ByVal dataset As MasterDetailTest.CustomersOrders)        dataset.EnforceConstraints = False
    Me.SqlConnection1.Open()
    Me.SqlDataAdapter1.Fill(dataset)
    Me.SqlDataAdapter2.Fill(dataset)
    dataset.EnforceConstraints = True
    Me.SqlConnection1.Close()

    End Sub

    Private Sub Showdetailgrid()
    If (Me.DataGrid1.SelectedIndex <> -1) Then
    Dim parentrows As System.Data.DataView
    Dim childrows As System.Data.DataView
    Dim currentparentrow As System.Data.DataRowView
    Me.CustomerOrders1 = CType(Application("CustomersOrders1"),
    MasterDetailTest.CustomersOrders)
    parentrows = New DataView()
    parentrows.Table = Me.CustomersOrders1.Tables("Customers")
    currentparentrow = parentrows(Me.DataGrid1.SelectedIndex)
    childrows = currentparentrow.CreateChildView("relation")
    Me.DataGrid2.DataSource = childrows
    Me.DataGrid2.DataBind()
    Me.DataGrid2.Visible = True
    Else
    Me.DataGrid2.Visible = False


    End If
    End Sub

    Private Sub DataGrid1_SelectedIndexChanged(ByVal sender As
    System.Object, ByVal e As System.EventArgs) Handles
    DataGrid1.SelectedIndexChanged
    Me.Showdetailgrid()

    End Sub


    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As
    System.EventArgs) Handles Button1.Click
    Me.LoadDataSet()
    Me.DataGrid1.SelectedIndex = -1
    Me.DataGrid1.DataBind()
    Me.DataGrid2.Visible = False
    Application("CustomersOrders1") = Me.CustomersOrders1

    End Sub

    'Create a new DataSet to hold the records returned from the call to FillDataSet().
    'A temporary dataset is used, because filling the existing DataSet would
    'require the databindings to be rebound.
    Public Sub LoadDataSet()
    Dim objdatasettemp As MasterDetailTest.CustomersOrders
    objdatasettemp = New MasterDetailTest.CustomersOrders()
    Me.FillDataSet(objdatasettemp)
    CustomersOrders1.Clear()
    CustomersOrders1.Merge(objdatasettemp)

    End Sub

Referencias

Para obtener más información acerca del control DataGrid , visite el siguiente sitio Web de Microsoft:

Para obtener información adicional acerca del enlace de datos, haga clic en el número de artículo siguiente para verlo en Microsoft Knowledge Base:

307860 INFO: Introducción al enlace de datos de ASP.NET
Propiedades

Id. de artículo: 308485 - Última revisión: 22 ene. 2017 - Revisión: 1

Comentarios