Tutorial: mostrar datos relacionados en una aplicación de negocios de Silverlight

  • Artículo

En este tutorial, creará una aplicación de negocios de Silverlight que muestra los datos de dos tablas relacionadas de la base de datos de ejemplo AdventureWorks.

En este tutorial se muestran las tareas siguientes:

  • Crear una aplicación de negocios de Silverlight formada por dos proyectos: un cliente de Silverlight y una aplicación web ASP.NET.

  • Cambiar el nombre de la aplicación modificando una cadena de recurso.

  • Crear un Entity Data Model basándose en un archivo de base de datos.

  • Crear un servicio de dominio que exponga los datos del Entity Data Model al cliente de Silverlight. Para obtener más información, vea Servicios de dominio.

  • Modificar una consulta en el servicio de dominio para devolver los datos relacionados.

  • Modificar los metadatos de servicios de dominio para admitir la carga de datos relacionados.

  • Crear páginas de Silverlight adicionales para presentar los datos a los usuarios.

  • Agregar botones a la barra de navegación predeterminada para obtener acceso a las páginas de Silverlight.

  • Configurar las páginas de Silverlight para mostrar datos arrastrando elementos desde la ventana Orígenes de datos hasta Silverlight Designer.

  • Agregar un elemento DataPager para navegar por los registros.

Requisitos previos

Este tutorial y los demás tutoriales presentados en la documentación de WCF RIA Services requieren la instalación y configuración correctas de varios programas de requisitos previos, como Visual Studio 2010 y Silverlight Developer Runtime y SDK, además de WCF RIA Services y el Kit de herramientas de WCF RIA Services. También requieren la instalación y configuración de SQL Server 2008 R2 Express con Advanced Services, así como la instalación de las bases de datos OLTP y LT de AdventureWorks.

Los temas del nodo Requisitos previos para WCF RIA Services proporcionan instrucciones detalladas para el cumplimiento de cada uno de estos requisitos previos. Siga las instrucciones proporcionadas en ellos antes de realizar este tutorial para asegurarse de encontrar el menor número de problemas posibles al trabajar en estos tutoriales de RIA Services .

En este tutorial se supone que puede crear una aplicación de negocios de Silverlight. El procedimiento para completar esta tarea se describe en Tutorial: utilizar la plantilla de aplicación de negocios de Silverlight.

Crear la aplicación de negocios de Silverlight

Las aplicaciones de negocios de Silverlight son soluciones con dos proyectos: una aplicación de Silverlight y una aplicación web ASP.NET que hospeda la aplicación de Silverlight. Las aplicaciones de negocios de Silverlight tienen funcionalidad integrada. De forma predeterminada, tienen una página Inicio, una página Acerca de, una barra de navegación y funcionalidad de registro en el sitio.

Para crear la aplicación

  1. En Visual Studio 2010, cree un nuevo proyecto de aplicación de negocios de Silverlight en Visual Basic o C# denominado AdventureWorksOrders. El procedimiento para completar esta tarea se describe en Tutorial: utilizar la plantilla de aplicación de negocios de Silverlight.

    La solución AdventureWorksOrders se crea con dos proyectos: un proyecto de Silverlight AdventureWorksOrders y un proyecto de aplicación web AdventureWorksOrders.Web.

  2. En el Explorador de soluciones, expanda el proyecto AdventureWorksOrders.

  3. Expanda la carpeta Assets y, a continuación, expanda Resources.

  4. Haga doble clic en ApplicationStrings.resx para abrir el Diseñador de recursos.

  5. Cambie el Valor de la cadena de recurso ApplicationName a Adventure Works Orders.

  6. Guarde los cambios y cierre el archivo ApplicationStrings.resx.

  7. Ejecute la aplicación.

    La página Inicio se abre y muestra el diseño predeterminado, que incluye el nombre de aplicación actualizado.

Crear un modelo de datos para la aplicación

Para administrar los datos en la aplicación, debe utilizar un Entity Data Model.

Para crear un Entity Data Model

  1. En el Explorador de soluciones, haga clic con el botón secundario en AdventureWorksOrders.Web, haga clic en Agregar y, a continuación, en Nuevo elemento.

    Aparece el cuadro de diálogo Agregar nuevo elemento.

  2. En la categoría Datos, haga clic en la plantilla Entity Data Model de ADO.NET.

  3. Cambie el nombre a AdventureWorksEDM.edmx y, a continuación, haga clic en Agregar.

    Se abre el Asistente para Entity Data Model.

  4. En la página Elegir contenido de Model, haga clic en Generar desde la base de datos y, a continuación, en Siguiente.

  5. En la página Elegir la conexión de datos, haga clic en Nueva conexión.

    Aparece el cuadro de diálogo Propiedades de la conexión.

  6. Seleccione Archivo de base de datos de Microsoft SQL Server para el origen de datos y especifique la ubicación del archivo de base de datos AdventureWorksLT.

  7. Haga clic en Aceptar.

  8. En la página Elegir la conexión de datos, haga clic en Siguiente.

  9. Si aparece un mensaje preguntando si desea copiar el archivo de base de datos en su proyecto y modificar la conexión, haga clic en Sí.

  10. En la página Elija los objetos de base de datos expanda el nodo Tablas.

  11. Agregue marcas de verificación al lado de las tablas SalesOrderDetail (SalesLT) y SalesOrderHeader (SalesLT).

    RIARelatedData03ChooseDatabaseObjects

  12. Haga clic en Finalizar.

    Aparecen las tablas SalesOrderDetail y SalesOrderHeader en Entity Designer.

  13. Genere la solución.

    Debe generar la solución antes de agregar un servicio de dominio.

Crear un servicio de dominio

Un servicio de dominio expone al cliente las entidades y operaciones de datos en el modelo de datos. En este procedimiento, agregará un servicio de dominio al proyecto de servidor.

Para crear un servicio de dominio

  1. En el Explorador de soluciones, haga clic con el botón secundario en AdventureWorksOrders.Web, haga clic en Agregar y, a continuación, en Nuevo elemento.

    Aparece el cuadro de diálogo Agregar nuevo elemento.

  2. En la categoría Web, haga clic en la plantilla Clase de servicio de dominio.

  3. Asigne el nombre AdventureWorksService a la clase de servicio de dominio y, a continuación, haga clic en Agregar.

    Se abre el cuadro de diálogo Agregar nueva clase de servicio de dominio.

  4. Active la casilla Habilitar edición para las entidades SalesOrderDetail y SalesOrderHeader.

    RIARelatedData04AddDomainServiceEntities

  5. Haga clic en Aceptar.

  6. Genere la solución.

Editar una consulta de servicio de dominio para incluir datos relacionados

El servicio de dominio proporciona operaciones predeterminadas que se deben modificar para una aplicación concreta. En este procedimiento, editará la consulta GetSalesOrderHeaders para que devuelva los registros de SalesOrderDetail relacionados. La acción de agregar un criterio de ordenación a la consulta también se requiere para la ejecución de DataPager.

Para cambiar una consulta de servicio de dominio

  1. En el Explorador de soluciones, haga doble clic en AdventureWorksService.vb o en AdventureWorksService.cs.

  2. Actualice el método GetSalesOrderHeaders tal como se muestra en el código siguiente.

    Public Function GetSalesOrderHeaders() As IQueryable(Of SalesOrderHeader)
    Return Me.ObjectContext.SalesOrderHeaders.Include("SalesOrderDetails").OrderBy(Function(c) c.SalesOrderID)
End Function

    public IQueryable<SalesOrderHeader> GetSalesOrderHeaders()
{
    return this.ObjectContext.SalesOrderHeaders.Include("SalesOrderDetails").OrderBy(e => e.SalesOrderID);
}

  3. En el Explorador de soluciones, haga doble clic en AdventureWorksService.metadata.vb o AdventureWorksService.metadata.cs.

  4. En la clase SalesOrderHeaderMetadata, agregue un atributo Include justo delante de la instrucción de la colección de entidades SalesOrderDetails:

    <Include()>
Public Property SalesOrderDetails As EntityCollection(Of SalesOrderDetail)

    [Include]
public EntityCollection<SalesOrderDetail> SalesOrderDetails { get; set; }

  5. Genere la solución.

Crear una página de Silverlight para mostrar datos

En este procedimiento, agregará una página Pedidos para mostrar los datos de las tablas.

Para crear una página de Silverlight

  1. En el Explorador de soluciones, en AdventureWorksOrders, haga clic con el botón secundario en la carpeta Views y agregue un nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, haga clic en la categoría Silverlight y, a continuación, en la plantilla Página de Silverlight.

  3. Cambie el nombre a Orders.xaml y, a continuación, haga clic en Agregar.

Agregar un botón de navegación a la página Inicio

En este procedimiento, agregará un botón a la página principal de la aplicación para navegar a la página Pedidos.

Para crear un botón de navegación

  1. En el Explorador de soluciones haga doble clic en MainPage.xaml.

  2. En la vista XAML, agregue el código siguiente después de la línea <HyperlinkButton x:Name="Link2" ... />.

    <Rectangle x:Name="Divider3" Style="{StaticResource DividerStyle}"/>
<HyperlinkButton x:Name="Link3" Content="Orders" Style="{StaticResource LinkStyle}" NavigateUri="/Orders" TargetName="ContentFrame"/>

  3. Ejecute la aplicación.

    Debe aparecer el botón Pedidos en la barra de navegación.

  4. Haga clic en el botón Pedidos.

    Aparece la página Pedidos en blanco.

Mostrar datos relacionados en la página

En este procedimiento, creará controles enlazados a datos en la página Pedidos arrastrando directamente elementos de la ventana Orígenes de datos hasta el diseñador. Primero creará un control DataGrid que muestre información básica sobre un pedido individual, como número de cuenta, identificador del cliente e importe total a pagar. A continuación, creará un control Grid que enumere los elementos individuales en ese orden.

Para crear los controles enlazados a datos

  1. En el Explorador de soluciones, haga doble clic en Orders.xaml.

  2. Haga clic en el menú Datos y, a continuación, en Mostrar orígenes de datos.

    Se abre la ventana Orígenes de datos. Observe que la ventana Orígenes de datos ya contiene las entidades disponibles para la aplicación.

  3. Haga clic en el nodo SalesOrderHeader y, a continuación, en el menú desplegable.

  4. Haga clic en Detalles.

  5. Desde la ventana Orígenes de datos, arrastre el nodo SalesOrderHeader hasta el diseñador.

    Se crea un control Grid que se rellena con controles para los campos de datos de la tabla SalesOrderHeader.

    RIARelatedData06SalesOrderHeaderGridOnLayout

  6. En la ventana Orígenes de datos, expanda el nodo SalesOrderHeader.

  7. Haga clic en el nodo SalesOrderDetails (nodo secundario del nodo SalesOrderHeader).

    RIARelatedData07SalesOrderHeaderSalesOrderDetails

  8. Arrastre el nodo SalesOrderDetails hasta el diseñador al lado de los controles de pedidos individuales.

    Se crea un control DataGrid que se rellena con los campos de la tabla SalesOrderDetail.

    RIARelatedData08NoPagingYet

Agregar paginación para navegar por los datos de pedidos

En este procedimiento, agregará paginación agregando un elemento DataPager al origen de datos. Establecerá el elemento DataPager.Source en el elemento DomainDataSource que administra los datos que el control de paginación debe controlar.

[!NOTA] El elemento DataPager requiere que su origen de datos esté ordenado de forma explícita. Ese es el motivo por el que se agregó la cláusula OrderBy a la consulta anteriormente en este tutorial.

Para configurar la paginación de los datos

  1. En el Explorador de soluciones, haga doble clic en Orders.xaml.

  2. Busque el control DataPager en el cuadro de herramientas.

  3. Arrastre el control DataPager hasta el diseñador.

  4. En la ventana Orígenes de datos, haga clic en el nodo SalesOrderHeader.

  5. Arrastre el nodo SalesOrderHeader hasta el control DataPager.

    De este modo se establece la propiedad Source del control DataPager en el origen de datos correcto.

  6. Seleccione el control DataPager en el diseñador.

  7. En la ventana Propiedades, establezca la propiedad PageSize en 1.

Probar la aplicación

En este procedimiento, compilará y ejecutará la aplicación para comprobar que esta se comporta conforme a lo esperado.

Para probar la aplicación

  1. En el menú Generar, haga clic en Generar solución.

    Compruebe que la solución se genera sin errores.

  2. Ejecute la aplicación.

  3. Haga clic en el botón Pedidos.

  4. Haga clic en los botones de navegación en los botones DataPager para desplazarse por los registros de pedidos.

    Observe que los detalles de pedidos relacionados aparecen en el control DataGrid cuando se navega por los registros de cabecera de pedido.

Pasos siguientes

Después de completar este tutorial, puede realizar las siguientes tareas relacionadas:

Vea también

Conceptos

WCF RIA Services
Clientes de Silverlight