Procedura dettagliata: visualizzazione di dati in un'applicazione aziendale di Silverlight

Articolo
03/11/2011

In questa procedura dettagliata viene creata un'applicazione aziendale di Silverlight che visualizza i dati dal database di esempio AdventureWorks su due pagine Silverlight diverse. Nella prima pagina vengono visualizzati i dati della tabella SalesOrderHeader e viene fornito il supporto per spostarsi tra i record del database. La seconda pagina consente all'utente di eseguire una query basata su una data.

Vengono illustrate le attività seguenti:

Creazione di un'applicazione aziendale di Silverlight costituita da due progetti: un client Silverlight e un'applicazione Web ASP.NET.
Modifica del nome dell'applicazione tramite la modifica di una stringa di risorsa.
Creazione di un modello Entity Data Model basato su un file di database.
Creazione di un servizio del dominio che espone i dati del modello Entity Data Model al client Silverlight. Per ulteriori informazioni, vedere Servizi del dominio.
Modifica e aggiunta di query personalizzate al servizio del dominio.
Creazione di pagine Silverlight aggiuntive per presentare i dati agli utenti.
Aggiunta di pulsanti alla barra di navigazione predefinita per accedere alle pagine Silverlight.
Configurazione delle pagine Silverlight per visualizzare i dati mediante il trascinamento degli elementi dalla finestra Origini dati alla finestra di progettazione Silverlight.
Ordinamento e paging dei dati.
Configurazione di un'interfaccia utente per accettare i parametri di query.

Prerequisiti

Per l'esecuzione di questa e di altre procedure dettagliate descritte nella documentazione di WCF RIA Services è necessario che siano installati e configurati correttamente alcuni programmi prerequisiti quali Visual Studio 2010 e Silverlight Developer Runtime e SDK, oltre a WCF RIA Services e a WCF RIA Services Toolkit. È inoltre richiesta l'installazione e la configurazione di SQL Server 2008 R2 Express with Advanced Services e l'installazione del database AdventureWorks OLTP e LT.

Le istruzioni dettagliate per soddisfare tali prerequisiti vengono fornite negli argomenti all'interno del nodo Prerequisiti per WCF RIA Services. Seguire tali istruzioni prima di continuare con questa procedura dettagliata in modo da assicurarsi che si verifichi il minor numero possibile di problemi durante l'esecuzione della procedura dettagliata di RIA Services .

In questa procedura dettagliata si presuppone che si sappia creare un'applicazione aziendale di Silverlight. La procedura per il completamento di questa attività viene descritta in Procedura dettagliata: utilizzo del modello Applicazione aziendale di Silverlight.

Creazione dell'applicazione aziendale di Silverlight

Le applicazioni aziendali di Silverlight sono soluzioni con due progetti: un'applicazione Silverlight e un'applicazione Web ASP.NET che ospita l'applicazione Silverlight. Le applicazioni aziendali di Silverlight dispongono di funzionalità incorporate. Per impostazione predefinita, dispongono della funzionalità per la registrazione del sito, la barra di navigazione, la pagina Informazioni su e la home page. Viene anche fornito un nome predefinito per l'applicazione come stringa di risorsa che si può modificare nel nome dell'applicazione.

Per creare l'applicazione

In Visual Studio 2010, creare un nuovo progetto applicazione aziendale di Silverlight in Visual Basic o C# denominato AdventureWorksApp. La procedura per il completamento di questa attività viene descritta in Procedura dettagliata: utilizzo del modello Applicazione aziendale di Silverlight.

La soluzione AdventureWorksApp viene creata con due progetti: il progetto di Silverlight AdventureWorksApp e il progetto applicazione Web AdventureWorksApp.Web.
In Esplora soluzioni espandere il progetto AdventureWorksApp.
Espandere la cartella Assets, quindi espandere Resources.
Fare doppio clic su ApplicationStrings.resx per aprire Progettazione risorse.
Modificare la stringa Valore della risorsa ApplicationName su Adventure Works Application.
Salvare le modifiche e chiudere il file ApplicationStrings.resx.
Eseguire l'applicazione.

Verrà visualizzata la home page con la finestra di progettazione predefinita che include il nome dell'applicazione aggiornato.

Creazione di un modello di dati per l'applicazione

Per gestire i dati nell'applicazione si utilizza un modello Entity Data Model.

Per creare un modello Entity Data Model

In Esplora soluzioni fare clic con il pulsante destro del mouse su AdventureWorksApp.Web, scegliere Aggiungi, quindi fare clic su Nuovo elemento.

Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.
Nella categoria Dati selezionare il modello ADO.NET Entity Data Model.
Denominarlo AdventureWorksEDM.edmx, quindi fare clic su Aggiungi.

Verrà aperta la procedura guidata Entity Data Model.
Nella pagina Scegli contenuto Model fare clic su Genera da database, quindi su Avanti.
Nella pagina Scegli la connessione dati fare clic su Nuova connessione.

Verrà visualizzata la finestra di dialogo Proprietà connessione.
Selezionare File di database Microsoft SQL Server per l'origine dati e specificare il percorso del file del database AdventureWorksLT.
Fare clic su OK.
Nella pagina Scegli la connessione dati fare clic su Avanti.
Se viene visualizzato un messaggio in cui viene chiesto se si desidera copiare il file di database nel progetto e modificare la connessione, scegliere Sì.
Espandere il nodo Tabelle nella pagina Seleziona oggetti di database.
Aggiungere un segno di spunta accanto alla tabella SalesOrderHeader (Sales LT).
Scegliere Fine.

La tabella SalesOrderHeader viene visualizzata in Entity Designer.
Compilare la soluzione.

È necessario compilare la soluzione prima di aggiungere un servizio del dominio.

Creazione di un servizio del dominio

Un servizio del dominio espone al client le entità di dati e le operazioni nel modello di dati. In questa procedura viene aggiunto un servizio del dominio al progetto server.

Per creare un servizio del dominio

In Esplora soluzioni fare clic con il pulsante destro del mouse su AdventureWorksApp.Web, scegliere Aggiungi, quindi fare clic su Nuovo elemento.

Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.
Nella categoria Web, fare clic sul modello Classe di DomainService.
Assegnare il nome AdventureWorksService alla classe DomainService, quindi fare clic su Aggiungi.

Verrà visualizzata la finestra di dialogo Aggiungi una nuova classe DomainService.
Selezionare le caselle di controllo SalesOrderHeader e Abilita modifica, quindi fare clic su OK.
Compilare la soluzione.

Modifica di una query del servizio del dominio

Una classe di DomainService aggiunta viene fornita con i metodi di query. È possibile decidere di utilizzare questi metodi di query senza apportare modifiche. Tuttavia, in molti casi, è necessario modificarli. In questa procedura si modifica il metodo di query GetSalesOrderHeaders.

Per modificare una query del servizio del dominio

In Esplora soluzioni fare doppio clic sul file AdventureWorksService.vb o AdventureWorksService.cs per aprirlo.

Aggiornare il metodo GetSalesOrderHeaders, come mostrato nel codice seguente.

Public Function GetSalesOrderHeaders() As IQueryable(Of SalesOrderHeader)
    Return Me.ObjectContext.SalesOrderHeaders.OrderBy(Function(e) e.SalesOrderID)
End Function

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

Compilare la soluzione.

Creazione di una pagina Silverlight per la visualizzazione dei dati

In questa procedura viene aggiunta una pagina OrderList per visualizzare i dati dalla tabella SalesOrderHeader.

Per creare una pagina Silverlight

In Esplora soluzioni, fare clic con il pulsante destro del mouse sulla cartella Views del progetto AdventureWorksApp e aggiungere un nuovo elemento.
Nella finestra di dialogo Aggiungi nuovo elemento selezionare la categoria Silverlight, quindi scegliere il modello Pagina Silverlight.
Denominarlo OrderList.xaml e fare clic su Aggiungi.

OrderList.xaml viene visualizzato nella finestra di progettazione.
Dalla Casella degli strumenti trascinare un elemento TextBlock nella parte superiore della finestra di progettazione.
Nella finestra Proprietà modificare la proprietà Text in Elenco ordini.
Salvare la pagina OrderList.xaml.

Aggiunta di un pulsante di navigazione alla home page

In questa procedura si aggiunge un pulsante alla home page dell'applicazione che consente di passare alla pagina OrderList.

Per creare un pulsante di navigazione

Fare doppio clic sul file MainPage.xaml in Esplora soluzioni per aprirlo nella finestra di progettazione.

Nella visualizzazione XAML aggiungere il seguente markup dopo la riga <HyperlinkButton x:Name="Link2" ... />.

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

Eseguire l'applicazione.

Il pulsante Elenco ordini viene visualizzato nella barra di navigazione.
Fare clic sul pulsante Elenco ordini.

Viene visualizzata la pagina OrderList.

Visualizzazione dei dati degli ordini nella pagina OrderList

In questa procedura si crea e configura un elemento DataGrid per visualizzare i dati degli ordini trascinando un'entità dell'ordine dalla finestra Origini dati nella finestra di progettazione.

Per creare un elemento DataGrid con associazione a dati

In Esplora soluzioni fare doppio clic su OrderList.xaml.
Fare clic su Dati e scegliere Mostra origini dati.

Verrà visualizzata la finestra Origini dati. Si noti che la finestra Origini dati già contiene le entità disponibili per l'applicazione.
Dalla finestra Origini dati trascinare il nodo SalesOrderHeader nella finestra di progettazione, sotto il blocco di testo Elenco ordini.

Viene visualizzato un elemento DataGrid popolato con le intestazioni di colonna dalla tabella SalesOrderHeader nell'area di progettazione.
Eseguire l'applicazione.
Nella barra di navigazione fare clic sul pulsante Elenco ordini.

Viene visualizzata la pagina Elenco ordini con i dati degli ordini.

Aggiungere query personalizzate al servizio del dominio

È possibile creare query aggiuntive nel servizio del dominio. Con questa procedura si aggiungono due query personalizzate.

Per aggiungere query personalizzate al servizio del dominio

In Esplora soluzioni fare doppio clic sul file AdventureWorksService.vb o AdventureWorksService.cs.

Aggiungere i metodi seguenti alla classe AdventureWorksService.

Public Function GetOrdersWithSmallSubtotals() As IQueryable(Of SalesOrderHeader)
    Return Me.ObjectContext.SalesOrderHeaders.Where(Function(p) p.SubTotal <= 2000).OrderBy(Function(p) p.SubTotal)
End Function

Public Function GetShipDateBefore(ByVal shipDate As DateTime) As IQueryable(Of SalesOrderHeader)
    Return Me.ObjectContext.SalesOrderHeaders.Where(Function(p) p.ShipDate < shipDate).OrderBy(Function(p) p.SalesOrderID)
End Function

public IQueryable<SalesOrderHeader> GetOrdersWithSmallSubtotals()
{
    return this.ObjectContext.SalesOrderHeaders.Where(e => e.SubTotal <= 2000).OrderBy(e => e.SubTotal);
}

public IQueryable<SalesOrderHeader> GetShipDateBefore(DateTime shipDate)
{
    return this.ObjectContext.SalesOrderHeaders.Where(e => e.ShipDate < shipDate).OrderBy(e => e.SalesOrderID);
}

Se si utilizza Visual Basic, impostare l'istruzione Option Strict su Off all'inizio del file AdventureWorksService.vb.
Compilare la soluzione.

Visualizzazione dei dati dalla query personalizzata

In questa procedura si visualizzano i dati dalla nuova query selezionando la query nella finestra Origini dati e trascinandola nell'elemento DataGrid già visualizzato nella finestra di progettazione. Questa azione riconfigura l'associazione dell'elemento DataGrid per visualizzare i dati dalla query selezionata.

Per visualizzare i dati dalla query personalizzata nell'elemento DataGrid esistente

In Esplora soluzioni fare doppio clic su OrderList.xaml.
Nella finestra Origini dati fare clic su SalesOrderHeader, quindi fare clic sul menu a discesa.

Notare le tre query elencate nella parte inferiore del menu. La query selezionata verrà impostata nell'elemento QueryName dell'origine dati generata, dopo avere trascinato l'entità nella finestra di progettazione.
Selezionare GetOrdersWithSmallSubtotalsQuery dall'elenco di query per impostarla come query dell'entità.
Trascinare il nodo SalesOrderHeader nell'elemento DataGrid esistente nella finestra di progettazione.
Eseguire l'applicazione.
Fare clic sul pulsante Elenco ordini.

Notare che nessun subtotale di ordine elencato nell'elemento DataGrid supera il valore 2000.

Aggiunta di ordinamento

Oltre a ordinare i dati tramite la clausola OrderBy nelle query sottostanti, è possibile configurare l'ordinamento anche nel codice XAML della pagina. L'ordinamento viene configurato aggiungendo SortDescriptors a DomainDataSource. È possibile aggiungere SortDescriptors direttamente nel codice XAML o tramite la finestra Proprietà, come mostrato nella procedura riportata di seguito.

Per aggiungere SortDescriptors utilizzando la finestra Proprietà

In Esplora soluzioni fare doppio clic su OrderList.xaml.

Nella visualizzazione XAML, posizionare il cursore nell'elemento riaControls:DomainDataSource il cui attributo Name è impostato su salesOrderHeaderDomainDataSource1.

Attenzione:
Nel file sono presenti due elementi `riaControls:DomainDataSource`. Assicurarsi di posizionare il mouse nell'elemento il cui attributo `Name` è impostato su `salesOrderHeaderDomainDataSource1`.

Nella finestra Proprietà selezionare la proprietà SortDescriptors, quindi fare clic sul pulsante con i puntini di sospensione (…).

Verrà visualizzato l'editor della raccolta SortDescriptors.
Fare clic su Aggiungi.

Viene aggiunto un elemento SortDescriptors.
In Proprietà, espandere la categoria Altro.
Nella colonna dei valori PropertyPath, digitare CustomerID.

Fare clic su OK.

Osservare come il seguente codice XAML sia stato aggiunto all'elemento riaControls:DomainDataSource.

<riaControls:DomainDataSource.SortDescriptors>
    <riaControls:SortDescriptor PropertyPath="CustomerID" />
</riaControls:DomainDataSource.SortDescriptors>

Eseguire l'applicazione.

Fare clic sul pulsante Elenco ordini.

Notare che i dati vengono ordinati in base all'elenco Customer ID.

RIADisplayingData09SortedByCustomerID

Attenzione:
Quando si implementano operazioni di paging e ordinamento contemporaneamente, includere almeno un oggetto SortDescriptor con il relativo attributo PropertyPath assegnato a una proprietà che contenga valori univoci, ad esempio una chiave primaria, oppure aggiungere una clausola OrderBy basata su una proprietà che contenga valori univoci alla query in DomainDataSource. Se si ordinano i dati solo in base a una proprietà che non contiene valori univoci, i valori restituiti potrebbero contenere dati incoerenti o mancanti tra le pagine.

Quando si implementano operazioni di paging e ordinamento contemporaneamente, includere almeno un oggetto SortDescriptor con il relativo attributo PropertyPath assegnato a una proprietà che contenga valori univoci, ad esempio una chiave primaria, oppure aggiungere una clausola OrderBy basata su una proprietà che contenga valori univoci alla query in DomainDataSource. Se si ordinano i dati solo in base a una proprietà che non contiene valori univoci, i valori restituiti potrebbero contenere dati incoerenti o mancanti tra le pagine.

Aggiunta di paging

In questa procedura viene aggiunta la funzionalità di paging aggiungendo un oggetto DataPager all'origine dati. DataPager.Source viene impostato sull'oggetto DomainDataSource che gestisce i dati che devono essere controllati dal pager.

Per configurare il paging dei dati

In Esplora soluzioni fare doppio clic su OrderList.xaml.
Nella Casella degli strumenti individuare il controllo DataPager.
Trascinare DataPager in un'area della finestra di progettazione sotto DataGrid.
Nella finestra Origini dati selezionare il nodo SalesOrderHeader, quindi fare clic sul menu a discesa e verificare che GetOrdersWithSmallSubtotalsQuery sia selezionato.
Trascinare il nodo SalesOrderHeader su DataPager.

In questo modo la proprietà Source del controllo DataPager verrà impostata sull'origine dati corretta.
Selezionare DataPager nella finestra di progettazione.
Nella finestra Proprietà impostare la proprietà PageSize su 5.
Eseguire l'applicazione.
Fare clic sul pulsante Elenco ordini.
Fare clic sui pulsanti di navigazione in DataPager per spostarsi di 5 record per volta in DataGrid.

Creazione di una pagina per la ricerca degli ordini in base alla data

In questa procedura dettagliata è stata precedentemente aggiunta una query personalizzata al servizio del dominio che restituisce gli ordini con una data di spedizione precedente a una data fornita dall'utente. Questa procedura dimostra come la finestra Origini dati può essere utilizzata per creare un'interfaccia utente che accetta i parametri forniti dall'utente che vengono passati a una query del servizio del dominio.

Per creare l'interfaccia utente

Nella cartella Views del progetto AdventureWorksApp, aggiungere una nuova pagina Silverlight denominata OrderSearchByShipDateBefore.xaml.
In Esplora soluzioni fare doppio clic su MainPage.xaml.

Nella visualizzazione XAML aggiungere il codice seguente dopo la riga <HyperlinkButton x:Name="Link3" ... />.

<Rectangle x:Name="Divider4" Style="{StaticResource DividerStyle}"/>
<HyperlinkButton x:Name="Link4" Content="Ship Date" Style="{StaticResource LinkStyle}" NavigateUri="/OrderSearchByShipDateBefore" TargetName="ContentFrame"/>

In Esplora soluzioni fare doppio clic su OrderSearchByShipDateBefore.xaml.
Nella finestra Origini dati fare clic sul nodo SalesOrderHeader, quindi fare clic sul menu a discesa.
Selezionare GetShipDateBeforeQuery per impostarla come query dell'entità.
Trascinare il nodo SalesOrderHeader nella finestra di progettazione.

Oltre a DataGrid, viene creata una casella di testo per accettare il parametro nella query e viene aggiunto un pulsante per eseguire la query e caricare i dati.

Test dell'applicazione

In questa procedura viene compilata ed eseguita l'applicazione per verificare che si comporti come previsto.

Per eseguire il test dell'applicazione

Scegliere Compila soluzione dal menu Compila.

Verificare che la soluzione venga compilata senza errori.
Eseguire l'applicazione.
Fare clic sul pulsante Data spedizione per aprire la pagina con la query della data di spedizione.
Nella casella Data spedizione, digitare una data, ad esempio 1/1/2006.
Fare clic su Carica.

Notare che vengono restituite solo date di spedizione precedenti alla data specificata.
Provare con altre date di spedizione.

Passaggi successivi

Dopo avere completato questa procedura dettagliata, è possibile eseguire le attività correlate seguenti:

Apprendere come modificare i record e salvare le modifiche di nuovo nel database. Per ulteriori informazioni, vedere Procedura dettagliata: modifica dei dati da un servizio del dominio.

Vedere anche

Concetti

Client Silverlight

Condividi tramite