Tutorial: Enlazar controles de Silverlight a un servicio de datos de WCF

  • Artículo

En este tutorial, creará una aplicación de Silverlight que contiene controles enlazados a datos. Los controles se enlazan a registros de clientes a los que se tiene acceso a través de Servicio de datos de WCF.

En este tutorial se muestran las tareas siguientes:

  • Crear un Entity Data Model que se genera a partir de los datos de la base de datos de ejemplo AdventureWorksLT.

  • Crear Servicio de datos de WCF que expone los datos del Entity Data Model a una aplicación Silverlight.

  • Ejecutar el Asistente para la configuración de orígenes de datos para conectar con el servicio de datos que rellena la ventana Orígenes de datos.

  • Crear un conjunto de controles enlazados a datos arrastrando elementos desde la ventana Orígenes de datos hasta el Silverlight Designer.

  • Crear botones que permiten navegar hacia delante y hacia atrás por los registros.

    Nota

    Es posible que su equipo muestre nombres o ubicaciones diferentes para algunos de los elementos de la interfaz de usuario de Visual Studio en las siguientes instrucciones. La edición de Visual Studio y la configuración que esté usando determinan estos elementos. Para obtener más información, vea Trabajar con valores de configuración.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

  • Visual Studio 2010.

  • Acceso a una instancia en ejecución de SQL Server o Server Express que tenga adjunta la base de datos de ejemplo AdventureWorksLT. La base de datos AdventureWorksLT se puede descargar desde el sitio web de CodePlex.

Para completar el tutorial, resulta útil, aunque no necesario, tener conocimiento previo de los siguientes conceptos:

Crear el proyecto de servicio

Inicie este tutorial creando un proyecto de aplicación web vacío para hospedar un Servicio de datos de WCF.

Para crear el proyecto de servicio

  1. En el menú Archivo, elija Nuevo y haga clic en Proyecto.

  2. Expanda Visual C# o Visual Basic y, a continuación, seleccione Web.

  3. Seleccione la plantilla de proyecto Aplicación web vacía de ASP.NET.

  4. En el cuadro Nombre, escriba AdventureWorksWebApp y haga clic en Aceptar.

Crear un Entity Data Model para el servicio

Para exponer datos a una aplicación mediante un Servicio de datos de WCF, debe definir un modelo de datos para el servicio. En este tutorial, creará un Entity Data Model.

Para crear un Entity Data Model

  1. En el menú Proyecto, haga clic en Agregar nuevo elemento.

  2. En la categoría Datos, elija el elemento de proyecto Entity Data Model de ADO.NET.

  3. Cambie el nombre por AdventureWorksDataModel.edmx y 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, haga clic en Siguiente.

  5. En la página Elegir la conexión de datos, seleccione una de estas opciones:

    • Si una conexión de datos a la base de datos de ejemplo AdventureWorksLT está disponible en la lista desplegable, selecciónela.

      o bien

    • Haga clic en Nueva conexión y cree una conexión a la base de datos AdventureWorksLT.

  6. Asegúrese de que esté seleccionada la opción Guardar configuración de conexión de la entidad en Web.Config como y, a continuación, haga clic en Siguiente.

  7. En la página Elija los objetos de base de datos, expanda Tablas y, a continuación, seleccione la tabla Customer.

  8. Haga clic en Finalizar.

Crear el servicio web

Cree un Servicio de datos de WCF para exponer los datos en Entity Data Model.

Para crear el servicio

  1. En el menú Proyecto, seleccione Agregar nuevo elemento.

  2. En la categoría Web, elija el elemento de proyecto Servicio de datos de WCF.

  3. En el cuadro Nombre, escriba AdventureWorksDataService.svc y haga clic en Agregar.

Configurar el servicio

Debe configurar el servicio para que funcione con el Entity Data Model creado.

Para configurar el servicio

  1. En el archivo de código AdventureWorksDataService.svc, reemplace la declaración de clase AdventureWorksDataService por el código siguiente:

    Public Class AdventureWorksDataService
    Inherits DataService(Of AdventureWorksLTEntities)

    ' This method is called only once to initialize service-wide policies.
    Public Shared Sub InitializeService(ByVal config As DataServiceConfiguration)
        config.SetEntitySetAccessRule("*", EntitySetRights.All)
        config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2
    End Sub

End Class

    public class AdventureWorksDataService : DataService<AdventureWorksLTEntities>
{
    // This method is called only once to initialize service-wide policies.
    public static void InitializeService(DataServiceConfiguration config)
    {
        config.SetEntitySetAccessRule("*", EntitySetRights.All);
        config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
    }
}

  2. Compile el proyecto y compruebe que no se producen errores.

Crear la aplicación de Silverlight

Cree una nueva aplicación de Silverlight y, a continuación, agregue un origen de datos para tener acceso al servicio.

Para crear la aplicación de Silverlight

  1. En el Explorador de soluciones, haga clic con el botón secundario en el nodo de la solución, haga clic en Agregar y seleccione Nuevo proyecto.

    Nota

    En los proyectos de Visual Basic, el nodo de la solución aparece en el Explorador de soluciones solo cuando se activa la casilla Mostrar solución siempre en General, Proyectos y soluciones, Opciones (Cuadro de diálogo).

  2. En el cuadro de diálogo Nuevo proyecto, expanda Visual Basic o Visual C#, y, a continuación, seleccione Silverlight.

  3. Seleccione Aplicación de Silverlight como la plantilla del proyecto.

  4. En el cuadro Nombre, escriba AdventureWorksSilverlightApp y, a continuación, haga clic en Aceptar.

  5. En el cuadro de diálogo Nueva aplicación de Silverlight, haga clic en Aceptar.

Agregar el origen de datos para la aplicación de Silverlight

Cree un origen de datos basado en los datos que devuelve el servicio.

Para crear el origen de datos

  1. En el menú Datos, haga clic en Mostrar orígenes de datos.

  2. En la ventana Orígenes de datos, seleccione Agregar nuevo origen de datos.

    Se abrirá el Asistente para la configuración de orígenes de datos.

  3. En la página Elegir un tipo de origen de datos del asistente, seleccione Servicio y, a continuación, haga clic en Siguiente.

  4. En el cuadro de diálogo Agregar referencia de servicio, haga clic en Detectar.

    Visual Studio busca los servicios disponibles en la solución actual y agrega AdventureWorksService.svc a la lista de servicios disponibles del cuadro Servicios.

  5. En el cuadro Espacio de nombres, escriba AdventureWorksService.

  6. En el cuadro Servicios, haga clic en AdventureWorksDataService.svc y, a continuación, en Aceptar.

  7. En la página Agregar referencia de servicio, haga clic en Finalizar.

    Visual Studio agrega los nodos que representan los datos devueltos por el servicio a la ventana Orígenes de datos.

Definir la interfaz de usuario de la ventana

Agregue botones a la ventana; modifique, para ello, el XAML en Silverlight Designer.

Para crear el diseño de la ventana

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

    La ventana se abre en Silverlight Designer.

  2. En la vista XAML del diseñador, agregue el código siguiente entre las etiquetas <Grid>:

    <Grid.RowDefinitions>
    <RowDefinition Height="75" />
    <RowDefinition Height="525" />
</Grid.RowDefinitions>
<Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75" Content="&lt;"></Button>
<Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75" Content="&gt;"></Button>

  3. Compile el proyecto.

Crear los controles enlazados a datos

Cree controles que muestren los registros del cliente; para ello, arrastre el nodo Customers desde la ventana Orígenes de datos hasta el diseñador.

Para crear los controles enlazados a datos

  1. En la ventana Orígenes de datos, haga clic en el menú desplegable del nodo Customers y seleccione Detalles.

  2. Expanda el nodo Customers.

  3. En este ejemplo, algunos campos no se mostrarán, de modo que haga clic en el menú desplegable situado al lado de los nodos siguientes y seleccione Ninguno:

    • NameStyle

    • PasswordHash

    • PasswordSalt

    • rowguid

    Esto evita que Visual Studio cree controles para estos nodos cuando se colocan en el diseñador. En este tutorial se supone que el usuario final no necesita ver estos datos.

  4. Arrastre el nodo Customers desde la ventana Orígenes de datos hasta el diseñador situado debajo de los botones.

    Visual Studio genera XAML y código que crea un conjunto de controles que se enlazan a los datos del cliente.

Cargar los datos desde el servicio

Utilice el servicio para cargar los datos y, a continuación, asigne los datos devueltos al origen de datos que se enlaza a los controles.

Para cargar los datos desde el servicio

  1. En el diseñador, haga clic en un área vacía al lado de uno de los botones.

  2. En la ventana Propiedades, compruebe que UserControl está seleccionado y, a continuación, haga clic en la pestaña Eventos.

  3. Busque el evento Loaded y haga doble clic en él.

  4. En el archivo de código que se abre (MainPage.xaml) agregue las siguientes instrucciones using (C#) o Imports (Visual Basic):

    Imports System.Windows.Data
Imports AdventureWorksSilverlightApp.AdventureWorksService

    using System.Windows.Data;
using AdventureWorksSilverlightApp.AdventureWorksService;

  5. Reemplace el controlador de eventos con el código siguiente. Asegúrese de que reemplaza la dirección localhost de este código por la dirección del host local del equipo de desarrollo:

    Private advWorksService As AdventureWorksLTEntities
Private customersViewSource As CollectionViewSource

Private Sub UserControl_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    advWorksService = New AdventureWorksLTEntities(New Uri("https://localhost:6188/AdventureWorksDataService.svc"))
    customersViewSource = Me.Resources("CustomersViewSource")
    advWorksService.Customers.BeginExecute(Sub(result As IAsyncResult)
                                               customersViewSource.Source = advWorksService.Customers.EndExecute(result)
                                           End Sub, Nothing)
End Sub

    private AdventureWorksLTEntities advWorksService;
private System.Windows.Data.CollectionViewSource customersViewSource;

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    advWorksService = new AdventureWorksLTEntities(new Uri("https://localhost:54961/AdventureWorksDataService.svc"));

    customersViewSource = this.Resources["customersViewSource"]
    as System.Windows.Data.CollectionViewSource;
    advWorksService.Customers.BeginExecute(result => customersViewSource.Source = advWorksService.Customers.EndExecute(result), null);
}

Probar la aplicación

Compile y ejecute la aplicación para comprobar que puede ver los registros de clientes.

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. Presione F5.

  3. Compruebe que aparece el primer registro en la tabla Customers.

    Nota importanteImportante

    Si se produce una excepción de seguridad, compruebe que se cumplen las condiciones siguientes:

    • El número de puerto usado en el paso 5 del procedimiento anterior coincide con el número de puerto del servidor de desarrollo de ASP.NET.

    • AdventureWorksWebApp está establecido como proyecto de inicio.

    • AdventureWorksSilverlightAppTestPage.aspx está establecida como página principal.

  4. Cierre la aplicación.

Agregue código que permita desplazarse por los registros mediante los botones < y >.

Para permitir a los usuarios navegar por los registros de ventas

  1. Abra MainPage.xaml en el diseñador y haga doble clic en el botón <.

  2. Reemplace el controlador de eventos backButton_Click generado por el código siguiente:

    Private Sub backButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles backButton.Click
    customersViewSource.View.MoveCurrentToPrevious()
    If customersViewSource.View.IsCurrentBeforeFirst Then
        customersViewSource.View.MoveCurrentToFirst()
    End If
End Sub

    private void backButton_Click(object sender, RoutedEventArgs e)
{
    customersViewSource.View.MoveCurrentToPrevious();
    if (customersViewSource.View.IsCurrentBeforeFirst)
        customersViewSource.View.MoveCurrentToFirst();
}

  3. Vuelva al diseñador y haga doble clic en el botón >.

    Visual Studio abre el archivo de código subyacente y crea un nuevo controlador de eventos nextButton_Click.

  4. Reemplace el controlador de eventos nextButton_Click generado por el código siguiente:

    Private Sub nextButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles nextButton.Click
    customersViewSource.View.MoveCurrentToNext()
    If customersViewSource.View.IsCurrentAfterLast Then
        customersViewSource.View.MoveCurrentToLast()
    End If
End Sub

    private void nextButton_Click(object sender, RoutedEventArgs e)
{
    customersViewSource.View.MoveCurrentToNext();
    if (customersViewSource.View.IsCurrentAfterLast)
        customersViewSource.View.MoveCurrentToLast();
}

Probar la aplicación

Compile y ejecute la aplicación para comprobar que puede ver y navegar por los registros de los clientes.

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. Presione F5.

  3. Compruebe que aparece el primer registro en la tabla Customers.

  4. Haga clic en los botones < y > para navegar hacia delante y hacia atrás por los registros de los clientes.

  5. Cierre la aplicación.

    Nota

    Si ve un error, compruebe que el código contiene el puerto correcto del servidor de desarrollo de ASP.NET.

Pasos siguientes

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

  • Obtenga información sobre cómo guardar los cambios en la base de datos. Para obtener más información, vea Enlace de datos.

  • Obtenga información sobre cómo incorporar más características utilizando Servicios de datos de WCF en aplicaciones de Silverlight. Para obtener más información, vea Servicios de datos de ADO.NET (Silverlight).

Vea también

Otros recursos

Acceso a datos y estructuras de datos

Historial de cambios

Fecha

Historial

Motivo

Mayo de 2011

Se han agregado sugerencias de solución de problemas.

Comentarios de los clientes.