Nuevo control para relacionar Grillas del tipo Cabecera Detalle en páginas ASP.Net.


No hay aplicación en la que falte una página donde debamos mantener dos o mas tablas relacionadas. Hay veces que uno extraña la facilidad con que se pueden relacionar dos grillas en una aplicación Windows.
Movido por esta añoranza y haciendo uso de los controles ya desarrollados para este Framework, acabo de crear un nuevo control que nos permite relacionar una grilla cabecera con su grilla detalle de manera similar a la usada en aplicaciones de escritorio. !! Muy fácil !!. No te olvides de bajarte el ejemplo.

El control en cuestión se llama Relacion, y es un ScriptControl. Por lo tanto necesita de un ScripManager presente en la página para funcionar.
Sin mas vueltas paso a describir las propiedades:

Propiedad Tipo Descripción Defecto
IdGrillaCabecera String Id del control grilla que muestra la tabla cabecera. String.Empty
IdGrillaDetalle String Id del control grilla que muestra la tabla detalle. String.Empty
ColumnaClave String Nombre de la columna de la tabla cabecera cuyo valor servirá para seleccionar los registros en la tabla detalle. String.Empty
RefrescarEn TipoRefrescarEn Indica cuando debe refrescarse la grilla detalle. Eleccion

Los valores posibles para la propiedad RefrescarEn son:

Seleccion : Se refresca la grilla detalle cuando se selecciona un registro en la cabecera (click o teclas de navegación).
Eleccion : Se refresca la grilla detalle cuando se elige un registro en la cabecera (doble click o enter).
Invocacion : Se refresca la grilla detalle invocando manualmente la función Refrescar() del control Relacion.

El código de ejemplo que muestro a continuación es parte del Demo que pueden bajarse libremente de aquí.
Les recuerdo que si se bajan el proyecto deberán modificar en el web.config la cadena de conexión, de tal forma que quede apuntando al servidor SQL en donde tengan instalada la base de datos Northwind.

<MM2:Grilla runat="server" ID="GrillaOrders" TargetControlID="RegistroOrders" Filas="7" IDDatos="Orders"/>
<MM2:Grilla runat="server" ID="GrillaOrderDetails" TargetControlID="RegistroOrderDetails" Filas="4" IDDatos="OrderDetails" />
<MM2:Relacion ID="Relacion" runat="server" IdGrillaCabecera="GrillaOrders" IdGrillaDetalle="GrillaOrderDetails" ColumnaClave="OrderID"  RefrescarEn ="Seleccion"  />

Aquí vemos las dos grillas con su correspondiente control Relacion. Sí, así de fácil….

Una vez creadas y configuradas la grillas no queda mas que relacionarlas con este nuevo control que nos hace la vida mas fácil.
Al navegar por la grilla cabecera veremos refrescarse automaticamente la grilla detalle. Todo, por supuesto, sin hacer un solo Postpack.

No hay mucho mas que explicar, salvo que en el WebMethod de la grilla detalle deberemos tener en cuenta el filtro de la siguiente manera.


  <WebMethod()> _
Public Shared Function ManejoOrderDetails(ByVal pContrato As MoniMisi2.ProveedorDatosServidor.Contrato) As MoniMisi2.ProveedorDatosServidor.Contrato
    Dim Contrato As MoniMisi2.ProveedorDatosServidor.Contrato = pContrato
    If Contrato.Operacion.Nombre = "Leer" Then
      Dim OrderDetailsTA = New NorthWindTableAdapters.Order_DetailsTableAdapter
      Contrato = ProveedorDatosServidor.LeerFilas(Contrato, OrderDetailsTA.Adaptador(Contrato.Filtro))
    End If
    Return Contrato
End Function

En este caso, para consultar los registros del detalle, estoy usando un TableAdapter que tiene en su SelectCommand un parámetro que permite filtrar solo los registro cuyo OrderID sea el que viene en la propiedad Filtro de nuestro Contrato.

Si caíste en esta página por primera vez y no entendés bien de donde salen todos estos controles, y propiedades, te recuerdo que este es un blog y un manual de usuario al mismo tiempo, asi que te recomiendo leas esta entrada y si te resulta útil repases la otras.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s