Instruções passo a passo: associando controles Silverlight a um WCF Data Services

Em essa explicação passo a passo, você criará um aplicativo do Silverlight que contém controles associados a dados. Os controles são associados aos registros de clientes acessados com WCF Data Services.

Essa explicação passo a passo mostra as seguintes tarefas:

• Criando Modelo de Dados de Entidade que é gerado de dados no banco de dados de exemplo AdventureWorksLT.

• Criando WCF Data Services que expõe os dados em Modelo de Dados de Entidade a um aplicativo Silverlight.

• Executando Assistente para Configuração de Fonte de Dados para se conectar ao serviço de dados que preenche a janela de Fontes de Dados .

• Criando um conjunto de controles associados a dados arrastando itens da janela de Fontes de Dados a Silverlight Designer.

• Criando os botões que navegam registros de módulos dianteiros e compatível.

  Dica

  Seu computador pode mostrar diferentes nomes ou locais para alguns dos elementos de interface do usuário do Visual Studio nas instruções a seguir. A edição do Visual Studio que você possui e as configurações que você usa determinam esses elementos. Para obter mais informações, consulte Customizing Development Settings in Visual Studio.

Pré-requisitos

Para completar este passo-a-passo, são necessários os seguintes componentes:

• Visual Studio

• Acesso a uma instância em execução de SQL Server ou SQL Server Express que tenha o banco de dados de exemplo AdventureWorksLT anexou-lhe. Você pode baixar o banco de dados AdventureWorksLT de site de CodePlex.

O conhecimento prévio dos seguintes conceitos também é útil, mas não necessário para concluir a explicação passo a passo:

• Serviços WCF de dados. Para mais informações, consulte Visão geral do WCF Data Services.

• Modelos de dados de entidade e a estrutura de entidade ADO.NET. Para mais informações, consulte Visão geral do Entity Framework.

• Trabalhar com Silverlight Designer.

• Associação de dados do Silverlight. Para obter mais informações, consulte Associação de Dados.

Criando o projeto de serviço

Iniciar este explicação passo a passo criar um novo projeto de aplicativo web vazio hospedar WCF Data Services.

Para criar o projeto de serviço

1. No menu File, aponte para New, e em seguida, clique em Project.

2. Expanda Visual C# ou Visual Basic, selecione Web.

3. Selecione o modelo de projeto de Vazia aplicativo da Web do ASP.NET .

4. Em a caixa de Nome , o tipo AdventureWorksWebApp e clique em OK.

Criando um modelo de dados de entidade para o serviço

Para expor dados a um aplicativo usando WCF Data Services, um modelo de dados deve ser definido para o serviço. Em essa explicação passo a passo, crie Modelo de Dados de Entidade.

Para criar um modelo de dados de entidade

1. No menu Project, clique em Add New Item.

2. Selecione o item de projeto de Modelo de entidade de dados ADO.NET .

3. Altere o nome para AdventureWorksDataModel.edmx, clique em Adicionar.

   Assistente de modelo de dados de entidade Abre.

4. Em a página de Escolha o conteúdo modelo , clique em Gere de banco de dados, e clique em Avançar.

5. Em a página de Escolha a Conexão de Dados , selecione uma das seguintes opções:

   • Se uma conexão de dados ao banco de dados de exemplo AdventureWorksLT está disponível na lista suspensa, selecione.

     ou

   • Clique Nova conexão e criar uma conexão para o banco de dados AdventureWorksLT.

6. Verifique se a opção de Salvar configurações de conexão de entidade em Web.Config como está selecionada e clique em Avançar.

7. Em a página de Escolher Objetos do Banco de Dados , expanda Tabelas, selecione a tabela de cliente .

8. Clique em Concluir.

Criando o serviço

Crie WCF Data Services para expor os dados em Modelo de Dados de Entidade.

Para criar o serviço

1. No menu Project, selecione Add New Item.

2. Selecione o item de projeto de Serviço de dados WCF .

3. Em a caixa de NomeAdventureWorksDataService.svc , digite e clique em Adicionar.

Configurando o serviço

Você deve configurar o serviço para operar em Modelo de Dados de Entidade que você criou.

Para configurar o serviço

1. Em o arquivo de código de AdventureWorksDataService.svc , substitua a declaração de classe de AdventureWorksDataService com o seguinte código:

   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. Compilar o projeto, e verifique que compila sem erros.

Criando o aplicativo Silverlight

Crie um novo aplicativo do Silverlight, e então adicione uma fonte de dados para acessar o serviço.

Para criar o aplicativo do Silverlight

1. Em Gerenciador de Soluções, clique com o botão direito do mouse no nó da solução, clique Adicionar, e selecione Novo Projeto.

2. Em a caixa de diálogo de Novo Projeto , expanda Visual C# ou Visual Basic, selecione Silverlight.

3. Selecione o modelo de projeto de Silverlight aplicativo .

4. Em a caixa de Nome , o tipo AdventureWorksSilverlightApp e clique em OK.

5. Em a caixa de diálogo de Novo aplicativo do Silverlight , clique OK.

Adicionar uma fonte de dados para o aplicativo do Silverlight

Crie uma fonte de dados que é baseado nos dados retornados pelo serviço.

Para criar o DataSet

1. No menu Data, clique em Show Data Sources.

2. Na janela Data Sources, clique em Add New Data Source.

   O Data Source Configuration Wizard é aberto.

3. Em a página de Escolher um Tipo de Fonte de Dados do assistente, Serviço selecione e clique em Avançar.

4. Na caixa Adicionar serviço de referência caixa de diálogo, clique em Descubra .

   Visual Studio procura a solução atual por serviços disponíveis, e adiciona AdventureWorksDataService.svc à lista de serviços disponíveis na caixa de Serviços .

5. Em a caixa de Namespace , digite AdventureWorksService.

6. Em a caixa de Serviços , clique em AdventureWorksDataService.svc e clique em OK.

7. Em a página de Adicionar referência de serviço , clique Concluir.

   O Visual Studio adiciona os nós que representam os dados retornados pelo serviço para a janela de Fontes de Dados .

Definindo a interface do usuário da janela

Adicionar botões à janela alterando XAML em Silverlight Designer.

Para criar o layout da janela

1. Em Gerenciador de Soluções, clique duas vezes MainPage.xaml.

   A janela é aberta em Silverlight Designer.

2. Em o modo de XAML o designer, adicione o seguinte código entre as marcas de <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. Crie o projeto.

Criando controles associados a dados

Criar controles que exibem registros de clientes arrastando o nó de clientes da janela de Fontes de Dados para o designer.

Para criar controles associados a dados

1. Em a janela de Fontes de Dados , clique no menu drop-down para o nó de clientes e selecione Detalhes.

2. Expanda o nó de clientes .

3. Para esse exemplo alguns campos não serão exibidos então clique no menu suspenso próximo dos nós e selecione Nenhum:

   • NameStyle

   • PasswordHash

   • PasswordSalt

   • rowguid

   Isso impede que Visual Studio criar controles para esses nós são ignorados quando o designer. Para esta explicação passo a passo, presume-se que o usuário final não deseja ver esses dados.

4. De a janela de Fontes de Dados , arraste o nó de clientes o designer nos botões.

   Visual Studio gera XAML e o código que cria um conjunto de controles associados a dados do cliente.

Carregar os dados de serviço

Use o serviço para carregar dados, e depois atribua os dados retornados para a fonte de dados associada aos controles.

Para carregar os dados de serviço

1. Em o designer, clique em uma área vazia ao lado de um dos botões.

2. Em a janela de Propriedades , verifique UserControl é selecionado e clique na guia de Eventos .

3. Localize o evento de Carregado clique duas vezes em.

4. Em o código que abre o arquivo ()MainPage.xamlseguir adiciona using (C#) ou instruções de Imports (Visual Basic):

   Imports System.Windows.Data
   Imports AdventureWorksSilverlightApp.AdventureWorksService
   

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

5. Substitua o manipulador de eventos pelo código a seguir. Certifique-se de que você substituir o endereço de localhost em esse código com o endereço do host local no seu computador de desenvolvimento:

   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);
   }
   

Testando o aplicativo

Compilar e executar o aplicativo para verificar que você possa exibir registros de clientes.

Para testar o aplicativo

1. Em o menu de Compilar , clique em Compilar solução. Verifique se a solução compile sem erros.

2. Pressione F5.

3. Verifique o primeiro registro na tabela clientes que aparece.

4. Feche o aplicativo.

   Dica

   Se você ver um erro aqui verifique se o código contém o correto move para o servidor de desenvolvimento do ASP.NET.

Navegando em registros

Adicione código que permite rolagem pelos registros usando botões < e >.

Para permitir que os usuários naveguem entre registros de vendas

1. MainPage.xaml abertos no designer e clique duas vezes no botão <.

2. Substitua o manipulador de eventos gerado de backButton_Click com o seguinte código:

   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. Retornar ao designer, clique duas vezes no botão >.

   Visual Studio abre o arquivo code-behind e cria um novo manipulador de eventos de nextButton_Click .

4. Substitua o manipulador de eventos gerado de nextButton_Click com o seguinte código:

   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();
   }
   

Testando o aplicativo

Compilar e executar o aplicativo para verificar que você possa exibir e navegar em registros de clientes.

Para testar o aplicativo

1. Em o menu de Compilar , clique em Compilar solução. Verifique se a solução compile sem erros.

2. Pressione F5.

3. Verifique o primeiro registro na tabela clientes que aparece.

4. Clique nos botões < e > para navegar para trás e encaminhar-la através de registros de cliente.

5. Feche o aplicativo.

   Dica

   Se você ver um erro aqui verifique se o código contém o correto move para o servidor de desenvolvimento do ASP.NET.

Próximas etapas

Após concluir essa explicação passo a passo, você pode executar as seguintes tarefas relacionadas:

• Aprender como salvar alterações de volta para o banco de dados. Para obter mais informações, consulte Associação de Dados.

• Aprender como incorporar mais recursos usando WCF Data Services em aplicativos do Silverlight. Para obter mais informações, consulte Serviços de dados ADO.NET) (Silverlight.

Consulte também

Outros recursos

acesso a dados e estruturas de dados