Procedura dettagliata: visualizzazione, paging e ordinamento di dati tramite il controllo server Web ListView

Aggiornamento: novembre 2007

In questa procedura dettagliata verrà utilizzato il controllo ListView, il quale consente di visualizzare dati da un'origine dati in un formato definito mediante modelli. Grazie ai modelli è possibile avere un controllo completo sul layout e sull'aspetto dei dati all'interno del controllo. Il controllo ListView supporta automaticamente le operazioni di modifica, inserimento ed eliminazione, nonché le funzionalità di ordinamento e spostamento.

Nella procedura dettagliata vengono illustrate le seguenti attività:

• Utilizzo del controllo ListView per visualizzare i dati da un database.

• Aggiunta della funzionalità di spostamento al controllo ListView.

• Aggiunta della funzionalità di ordinamento al controllo ListView.

Prerequisiti

Per completare questa procedura dettagliata è necessario disporre dei seguenti elementi:

• Visual Studio 2008 o Visual Web Developer 2008 Express Edition.

• SQL Server Express Edition. È anche possibile utilizzare SQL Server, se già installato, ma sarà necessario apportare piccole modifiche ad alcune procedure.

• Il database AdventureWorks installato nel computer. Per informazioni sul download e l'installazione del database di esempio AdventureWorks di SQL Server, vedere Installazione di database di esempio per Express Edition nel sito Web di Microsoft SQL Server.

• Un nome utente e una password per l'account di SQL Server che dispone dell'accesso al database AdventureWorks.

Creazione del sito Web

Se è già stato creato un sito Web, ad esempio completando la Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer, è possibile utilizzare quel sito e passare alla sezione successiva. In caso contrario, creare un sito Web e una pagina nuovi attenendosi alla procedura riportata di seguito.

Per creare un sito Web di file system

1. Aprire Visual Studio 2008 o Visual Web Developer 2008 Express Edition.

2. Scegliere Nuovo dal menu File, quindi fare clic su Sito Web. In caso di utilizzo di Visual Web Developer Express Edition, scegliere Nuovosito Web dal menu File.

   Viene visualizzata la finestra di dialogo Nuovo sito Web.

3. In Modelli Visual Studio installati scegliere Sito Web ASP.NET.

4. Nella prima casella Percorso, selezionare File system; nella seconda casella, immettere il nome della cartella in cui salvare le pagine del sito Web.

   Ad esempio, immettere il nome C:\WebSites\DisplayData.

5. Nell'elenco Linguaggio scegliere il linguaggio di programmazione da utilizzare.

6. Scegliere OK.

   In Visual Studio°vengono create la cartella e una nuova pagina denominata Default.aspx.

Visualizzazione e spostamento di dati nel controllo ListView

Per visualizzare i dati in una pagina Web ASP.NET, è necessario disporre degli elementi riportati di seguito.

• Una connessione a un'origine dati (ad esempio, un database). Nella procedura riportata di seguito verrà creata una connessione al database AdventureWorks di SQL Server.

• Un controllo origine dati nella pagina, il quale interagisce con l'origine dati (il database) per leggere e scrivere i dati. In questa procedura dettagliata verrà utilizzato un controllo SqlDataSource che interagisce con il database AdventureWorks di SQL Server.

• Un controllo nella pagina per visualizzare i dati. Nella procedura riportata di seguito i dati verranno visualizzati in un controllo ListView, il quale ottiene i propri dati dal controllo SqlDataSource.

Per visualizzare e spostare i dati nel controllo ListView

1. Se il sito Web non dispone di una cartella App_Data, in Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto, scegliere Aggiungi cartella ASP.NET, quindi App_Data.

2. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella App_Data, quindi scegliere Aggiungi elemento esistente.

   Verrà visualizzata la finestra di dialogo Aggiungi elemento esistente.

3. Immettere il percorso del file di database AdventureWorks (AdventureWorks_Data.mdf).

   Per impostazione predefinita, il file MDF viene installato nel percorso C:\Program Files\Microsoft SQL Server\MSSQL.1\MSSQL\Data\AdventureWorks_Data.mdf.

   Nota:
   Verrà creata una copia del file di database nel progetto. Poiché il file è di grandi dimensioni, nel caso risulti poco pratico farne una copia è possibile connettersi ad esso utilizzando un metodo alternativo, ad esempio allegandolo direttamente. La relativa procedura non verrà tuttavia analizzata in questa procedura dettagliata.

4. Aprire o passare al file Default.aspx.

5. Passare alla visualizzazione Progettazione.

6. Dalla scheda Dati della Casella degli strumenti, trascinare un controllo ListView nella pagina.

   

7. Dal menu Attività ListView comuni, scegliere <Nuova origine dati…> nell'elenco a discesa Scegliorigine dati.

   Verrà visualizzata la Configurazione guidata origine dati.

8. Fare clic su Database.

   Con tale procedura si specifica che si desidera ottenere dati da un database che supporta le istruzioni SQL, inclusi SQL Server e altri database compatibili con OLE-DB.

9. Nella casella Specificare l'ID dell'origine dati viene visualizzato un nome di controllo origine dati predefinito, vale a dire SqlDataSource1. È possibile lasciare inalterato il nome.

   

10. Scegliere OK.

    Verrà visualizzata la procedura guidata Configura origine dati.

11. In Specificare la connessione dati che deve essere utilizzata dall'applicazione per connettersi al database, selezionare AdventureWorks_Data.mdf dall'elenco.

12. Scegliere Avanti.

    Nella procedura guidata viene visualizzata una pagina in cui è possibile scegliere di archiviare la stringa di connessione nel file di configurazione. La memorizzazione della stringa di connessione nel file di configurazione comporta due vantaggi:

    • Maggiore sicurezza rispetto all'archiviazione nella pagina.

    • Possibilità di utilizzare la stessa stringa di connessione in più pagine.

13. Accertarsi che sia stata selezionata la casella di controllo Sì, salva la connessione con nome, quindi fare clic su Avanti. È possibile lasciare il nome della stringa di connessione predefinito.

    Nella procedura guidata viene visualizzata una pagina in cui è possibile specificare i dati da recuperare dal database.

14. Selezionare l'opzione Specificare una stored procedure o un'istruzione SQL personalizzata.

    

    Nota:
    Di norma, verrebbe utilizzata l'opzione Specificare le colonne di una tabella o visualizzazione. Tuttavia, poiché il database AdventureWorks dispone di nomi dello schema, in questa procedura dettagliata verrà creata un'istruzione SQL personalizzata.

15. Scegliere Avanti.

16. Nella pagina Definisci stored procedure o istruzioni personalizzate immettere la seguente query SQL, che recupera i dati sui contatti dal database AdventureWorks.

    SELECT  ContactID, FirstName, LastName, EmailAddress
    FROM    Person.Contact
    

    È anche possibile fare clic su Generatore di query e utilizzare la finestra Generatore di query per creare una query e convalidarla tramite il pulsante Esegui query.

    Nota:
    La procedura guidata consente di specificare i criteri di selezione (clausole Where) e altre opzioni delle query SQL. Per questa procedura dettagliata verrà creata un'istruzione semplice senza alcun criterio di ordinamento o selezione.

17. Scegliere Avanti.

18. Fare clic su Test query per accertarsi di recuperare i dati desiderati.

19. Fare clic su Fine.

    Nella procedura guidata viene creato un controllo SqlDataSource e aggiunto alla pagina. Il controllo ListView aggiunto in precedenza è associato al controllo SqlDataSource.

    Se si visualizzano le proprietà per il controllo SqlDataSource, verrà visualizzata la procedura guidata con cui sono stati creati i valori delle proprietà ConnectionString e SelectCommand.

20. Fare clic con il pulsante destro del mouse sul controllo ListView, quindi scegliere Mostra smart tag.

21. Nel menu Attività ListView comuni, fare clic su Configura ListView.

    Verrà visualizzata la finestra di dialogo Configura ListView.

22. Selezionare Attiva paging.

    Nota:
    È possibile inoltre selezionare un stile diverso che semplifichi la visualizzazione dei dati. A tal proposito, in Selezionare uno stile, selezionare un stile quale ad esempio A colori.

    Nella procedura guidata vengono creati i modelli per il controllo ListView, in base alle colonne nella query. È possibile personalizzare il layout modificando i modelli che contengono i relativi elementi, controlli ed espressioni di associazione.

    

23. Scegliere OK.

    

Prima di procedere, è possibile testare il controllo ListView.

Per testare il controllo ListView

1. Premere CTRL+F5 per eseguire la pagina.

   Il controllo ListView viene visualizzato con le colonne IDContatto, Nome, Cognome e IndirizzoPostaElettronica.

2. Fare clic sui pulsanti Primo, Indietro, Avanti e Ultimo nella parte inferiore della pagina per spostarsi tra i dati.

3. Al termine chiudere il browser.

Aggiunta della funzionalità di ordinamento al controllo ListView

Si aggiungerà ora la funzionalità di ordinamento al controllo ListView. Per fornire questa funzionalità, è necessario aggiungere un pulsante al controllo ListView e successivamente configurarlo.

Per aggiungere la funzionalità di ordinamento al controllo ListView

1. Nel file Default.aspx, fare clic con il pulsante destro del mouse sul controllo ListView, quindi scegliere Mostra smart tag.

2. Nel menu Attività ListView comuni, selezionare nell'elenco Visualizzazione corrente una visualizzazione per modificare il modello LayoutTemplate, ad esempio ItemTemplate.

   Nota:
   Non esiste una visualizzazione specifica per modificare il modello LayoutTemplate. Le modifiche possono essere apportate in qualsiasi visualizzazione contenuta nell'elenco Visualizzazione corrente, eccetto Visualizzazione runtime e EmptyDataTemplate.

3. Dalla scheda Standard della Casella degli strumenti, trascinare due controlli Button al fondo del controllo, dove si trovano i controlli di spostamento.

4. Nella finestra Proprietà, modificare le proprietà dei pulsanti come segue:

   • Per il primo pulsante, impostare la proprietà Text su "Ordina per nome", la proprietà CommandName su "Ordina" e CommandArgument su "Nome".

   • Per il secondo pulsante, impostare le proprietà Text su "Ordina per cognome", la proprietà CommandName su "Ordina" e CommandArgument su "Cognome".

   Le proprietà CommandArgument del pulsante sono impostate su un'espressione di ordinamento. Nel caso dei dati di database, si tratta in genere del nome di una colonna.

5. Salvare la pagina.

A questo punto è possibile testare nuovamente la pagina.

Per testare l'ordinamento

1. Premere CTRL+F5 per eseguire la pagina.

2. Fare clic sui pulsanti Ordina per nome e Ordina per cognome per ordinare i dati in diversi modi.

3. Fare ripetutamente clic su un pulsante per passare da ordine crescente a ordine decrescente e viceversa.

Passaggi successivi

In questa procedura dettagliata sono state illustrate le procedure di base per l'utilizzo di un controllo ListView per visualizzare, spostare e ordinare record di dati utilizzando uno dei layout forniti dal controllo. È anche possibile sperimentare funzionalità aggiuntive del controllo ListView ed esplorare scenari diversi. Ad esempio, è possibile modificare, eliminare e inserire record. Per ulteriori informazioni, vedere Procedura dettagliata: modifica di dati tramite il controllo server Web ListView.

Vedere anche

Attività

Procedura: proteggere le stringhe di connessione durante l'utilizzo dei controlli origine dati

Procedura dettagliata: accesso ai dati di base nelle pagine Web

Concetti

Cenni preliminari sul controllo server Web ListView