Procedura dettagliata: accesso ai dati di base nelle pagine Web

Aggiornamento: novembre 2007

In questa procedura dettagliata viene illustrato come creare una pagina associata a dati semplice utilizzando i controlli progettati appositamente per l'accesso ai dati.

In particolare, vengono illustrate le seguenti operazioni:

• Connessione a un database Microsoft SQL Server nello strumento di sviluppo Web di Microsoft Visual Web Developer.

• Utilizzo della modifica del trascinamento per creare elementi di accesso ai dati che possano essere utilizzati nella pagina senza il codice.

• Utilizzo del controllo SqlDataSource per gestire l'accesso e l'associazione ai dati.

• Visualizzazione dei dati con il controllo GridView.

• Configurazione del controllo GridView per consentire l'ordinamento e il paging.

• Creazione di una query filtrata in cui si visualizzano soltanto i record selezionati.

Prerequisiti

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

• Accesso al database Northwind di SQL Server.

• Se il database Northwind non è nello stesso computer del server Web, è necessario disporre di un nome utente e di una password per un account utente SQL Server che dispone di un accesso al database Northwind.

  Nota:
  Per ulteriori informazioni sulle modalità di accesso a SQL Server, contattare l'amministratore del server.

• Microsoft Data Access Components (MDAC) 2.7 o versione successiva.

  Se si utilizza Microsoft Windows XP o Windows Server 2003, si dispone già di MDAC 2.7. Tuttavia, se si utilizza Microsoft Windows 2000, potrebbe essere necessario aggiornare la versione MDAC già installata nel computer. Per scaricare la versione MDAC corrente, visitare il sito Web Data Access and Storage Developer Center.

Creazione del sito Web

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

Per creare un sito Web di file system

1. Aprire Visual Web Developer.

2. Scegliere Nuovosito Web dal menu File.

   Verrà visualizzata la finestra di dialogo Nuovo sito Web.

3. In Modelli Visual Studio installati fare clic su Sito Web ASP.NET.

4. Nella casella Percorso situata più a destra, immettere il nome della cartella in cui salvare le pagine del sito Web.

   Digitare, ad esempio, il nome cartella C:\WebSites.

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

6. Scegliere OK.

   In Visual Web Developer vengono create la cartella e una nuova pagina denominata Default.aspx.

Aggiunta di un controllo GridView per la visualizzazione dei dati

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

• Connessione a un'origine dati quale un database.

  Nella procedura riportata di seguito, verrà creata una connessione al database SQL Server Northwind.

• Controllo origine dati nella pagina per eseguire le query e gestirne i risultati.

• Controllo nella pagina per una visualizzazione effettiva dei dati.

  Nella procedura riportata di seguito, verranno visualizzati i dati in un controllo GridView. Il controllo GridView ottiene i relativi dati dal controllo SqlDataSource.

È possibile aggiungere questi elementi al sito Web in modo separato. Tuttavia, un metodo più semplice consiste nell'avviare la visualizzazione dei dati utilizzando il controllo GridView e, quindi, utilizzando le configurazioni guidate per la creazione della connessione e del controllo origine dati. Nella procedura riportata di seguito, viene illustrato come creare tutte le strutture degli elementi necessari per la visualizzazione dei dati nella pagina.

Per aggiungere e configurare un controllo GridView per la visualizzazione dei dati

1. Visual Web Developer viene passato alla visualizzazione Progettazione.

2. Dalla cartella Dati della Casella degli strumenti, trascinare un controllo GridView nella pagina.

3. Se non viene visualizzato il menu di scelta rapida Attività GridView, fare clic con il pulsante destro del mouse sul controllo GridView, quindi scegliere Mostra smart tag.

4. Dal menu GridView Tasks, in Choose Data Source list, fare clic su <New data source>.

   Verrà visualizzata la finestra di dialogo Configurazione guidata origine dati.

   

5. Fare clic su Database.

   Viene specificata la richiesta di ottenere dati da un database che supporti le istruzioni SQL, inclusi SQL Server e altri database compatibili in OLE-DB.

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

6. Scegliere OK.

   Nella configurazione guidata Configure Data Source viene visualizzata una pagina in cui è possibile scegliere una connessione.

   

7. Fare clic su Nuova connessione.

8. Nella finestra di dialogo Scegli origine dati, in Origine dati, fare clic su Microsoft SQL Server e, successivamente, su Continua.

   Verrà visualizzata la finestra di dialogo Aggiungi connessione.

9. Nella casella Nome server, immettere il nome di SQL Server da utilizzare.

   

10. Per le credenziali di accesso, selezionare l'opzione appropriata per accedere al database SQL Server (protezione integrata oppure password e ID specifici) e, se richiesto, immettere un nome utente e una password.

11. Fare clic su Seleziona o immetti nome di database, quindi immettere Northwind.

12. Fare clic su Test connessione e, dopo avere verificato il funzionamento della connessione, scegliere OK.

    Viene visualizzata la configurazione guidata Configure Data Source - <DataSourceName> e vengono inserite le informazioni di connessione.

13. Scegliere Avanti.

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

    1. È più sicura della memorizzazione della stringa di connessione nella pagina.

    2. È possibile riutilizzare la stessa stringa di connessione in più pagine.

14. 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 di NorthwindConnectionString.

    La procedura guidata visualizza una pagina in cui è possibile specificare i dati da recuperare dal database.

15. In Specificare le colonne di una tabella o vista, nell'elenco a discesa Nome fare clic su Customers.

16. In Colonne, selezionare CustomerID, CompanyName e City.

    Nella procedura guidata viene visualizzata l'istruzione SQL in fase di creazione in una casella nella parte inferiore della pagina.

    

    Nota:
    La procedura guidata consente di specificare i criteri di selezione (una clausola WHERE) e altre opzioni query SQL. Per questa parte della procedura dettagliata, sarà creata un'istruzione semplice senza opzioni di selezione o ordinamento.

17. Scegliere Avanti.

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

19. Fare clic su Fine.

    La procedura guidata è terminata ed è restituita la pagina. L'esecuzione della procedura guidata ha consentito l'elaborazione di due attività:

    • È stato creato e configurato un controllo SqlDataSource denominato SqlDataSource1, in cui sono incorporate le informazioni relative alla connessione e alla query specificate.

    • Il controllo GridView è stato associato all'oggetto SqlDataSource. Di conseguenza, il controllo GridView consentirà di visualizzare i dati restituiti dal controllo SqlDataSource.

    Se si visualizzano le proprietà per il controllo SqlDataSource, è possibile visualizzare la procedura guidata con cui sono stati creati i valori delle proprietà ConnectionString e SelectQuery.

    Nota:
    È possibile modificare facilmente l'aspetto del controllo GridView. In visualizzazione Progettazione fare clic con il pulsante destro del mouse sul controllo GridView, quindi su Mostra smart tag. Nel menu GridView Tasks, fare clic su Formattazione automatica, e applicare uno schema.

Test della pagina

È ora possibile eseguire la pagina.

Per eseguire il test della pagina

1. Premere CTRL+F5 per eseguire la pagina.

   La pagina viene visualizzata nel browser. Il controllo GridView consente la visualizzazione di tutte le righe di dati della tabella Customers.

2. Chiudere il browser.

Aggiunta dell'ordinamento e del paging

È ora possibile aggiungere le funzionalità di ordinamento e di paging al controllo GridView senza scrivere alcun codice.

Per aggiungere l'ordinamento e il paging

1. In visualizzazione Progettazione fare clic con il pulsante destro del mouse sul controllo GridView, quindi su Mostra smart tag.

2. Dal menu di scelta rapida GridView Tasks, selezionare Enable Sorting check box.

   Le intestazioni di colonna nel controllo GridView sono modificate in collegamenti.

3. Dal menu GridView Tasks, selezionare Enable Paging check box.

   Viene aggiunto un piè di pagina al controllo GridView con i collegamenti dei numeri di pagina.

4. Facoltativamente, utilizzare Proprietà per modificare il valore della proprietà PageSize da 10 a una dimensione di pagina più piccola.

5. Premere CTRL+F5 per eseguire la pagina.

   È possibile fare clic su una delle intestazioni di colonna per ordinarne il contenuto. Se il numero di record presente nell'origine dati è superiore alle dimensioni della pagina del controllo GridView, sarà possibile utilizzare i collegamenti di spostamento della pagina nella parte inferiore del controllo GridView per spostarsi tra le pagine.

6. Chiudere il browser.

Aggiunta del filtraggio

Può essere necessario visualizzare soltanto i dati selezionati nella pagina. In questa parte della procedura dettagliata, verrà modificata la query per il controllo SqlDataSource per consentire la selezione di record relativi ai clienti di una determinata città.

Dapprima, verrà utilizzato un controllo TextBox per creare una casella di testo in cui digitare il nome di una città. Quindi, verrà modificata la query per includere un filtro che dispone di parametri (clausola WHERE). In una parte di quella procedura, verrà creato un elemento di parametro per il controllo SqlDataSource. L'elemento di parametro consente di stabilire la modalità con cui il controllo SqlDataSource otterrà il valore per la relativa query che dispone di parametri, ovvero dalla casella di testo.

Al termine di questa procedura dettagliata, l'aspetto della pagina può essere simile a quello della visualizzazione Progettazione riportata di seguito.

Per aggiungere una casella di testo che consente di specificare la città

1. Trascinare un controllo TextBox e un controllo Button nella pagina dal gruppo Standard della Casella degli strumenti.

   Il controllo Button è utilizzato soltanto per inviare la pagina al server. Non sarà necessario scrivere alcun codice.

2. In Proprietà, per il controllo TextBox, impostare ID su textCity.

3. Se lo si desidera, digitare City o un testo simile prima che la casella di testo funzioni come didascalia.

4. In Proprietà per il controllo Button, impostare Text su Submit.

È ora possibile modificare la query per includere un filtro.

Per modificare la query utilizzando un filtro che dispone di parametri

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

2. Dal menu Attività SqlDataSource, scegliere Configura origine dati.

   Viene visualizzata la configurazione guidata Configura origine dati - <Datasourcename>.

3. Scegliere Avanti.

   Nella procedura configurata viene visualizzato il comando SQL correntemente configurato per il controllo SqlDataSource.

4. Fare clic su WHERE.

   Viene visualizzata la pagina Aggiungi clausola WHERE.

5. Nell'elenco Colonna fare clic su City.

6. Nell'elenco Operatore fare clic su =.

7. Nell'elenco Origine fare clic su Controllo.

8. In Proprietà parametro, nell'elenco ID controllo, fare clic su textCity.

   

   Nei cinque passaggi precedenti è stato specificato che la query otterrà il valore di ricerca per Città dal controllo TextBox aggiunto nella procedura precedente.

9. Fare clic su Aggiungi.

   La clausola WHERE creata viene visualizzata in una casella nella parte inferiore della pagina.

10. Scegliere OK per chiudere la pagina Aggiungi clausola WHERE.

11. Nella procedura guidata Configure Data Source - <DataSourceName> fare clic su Avanti.

12. Nella pagina Test Query, fare clic su Test Query.

    Nella procedura guidata viene visualizzata la pagina Editor valori parametri, in cui si richiede un valore da utilizzare nella clausola WHERE.

13. Nella casella Valore, digitare London, quindi scegliere OK.

    Sono visualizzati i record relativi ai clienti per Londra.

14. Scegliere Fine per uscire dalla procedura guidata.

È ora possibile eseguire il test del filtraggio.

Per eseguire il test del filtraggio

1. Premere CTRL+F5 per eseguire la pagina.

2. Nella casella di testo, digitare London, quindi fare clic su Invia.

   Viene visualizzato un elenco di clienti della città di Londra nel controllo GridView.

3. Provare con altre città, ad esempio Buenos Aires e Berlin.

Passaggi successivi

L'accesso ai dati è una parte fondamentale di molte applicazioni Web. In questa procedura dettagliata sono state illustrate soltanto alcune delle operazioni possibili utilizzando i dati nelle pagine Web. È possibile utilizzare ulteriori funzionalità di accesso ai dati. Ad esempio, è possibile eseguire le operazioni riportate di seguito.

• Utilizzare Microsoft Access invece di SQL Server. Non è possibile utilizzare la dipendenza della cache di SQL in Access.

  Per informazioni dettagliate, vedere Procedura dettagliata: creazione di una pagina Web per visualizzare dati di database di Access.

• Modificare e inserire record.

  Per informazioni dettagliate, vedere Procedura dettagliata: modifica e inserimento di dati nelle pagine Web con il controllo server Web DetailsView.

• Utilizzare i record che dispongono di una relazione Master-Details.

  Per informazioni dettagliate, vedere Procedura dettagliata: creazione di pagine Web Master-Details in Visual Studio.

• Creare un componente (business) di livello intermedio che consenta di eseguire l'accesso ai dati e utilizzarlo come origine dati in una pagina.

  Per informazioni dettagliate, vedere Procedura dettagliata: associazione ai dati a un oggetto business personalizzato.

Vedere anche

Concetti

Cenni preliminari sui controlli origine dati