Procedura dettagliata: pagine Web con associazione ai dati a un componente dati di Visual Studio

Aggiornamento: novembre 2007

Molte applicazioni Web vengono generate utilizzando più livelli, con uno o più componenti di livello intermedio che combinano l'accesso ai dati con la logica business. In questa procedura dettagliata viene illustrato come creare un componente di accesso ai dati in sito un Web e associare un controllo server Web (un controllo GridView) ai dati gestiti dal componente. Il componente di dati interagisce con un database Microsoft SQL Server e può sia scrivere, sia leggere i dati.

Di seguito sono elencate alcune delle attività illustrate nella procedura dettagliata:

• Creazione di un componente che può leggere e scrivere dati.

• Riferimento al componente di dati come origine dati in una pagina Web.

• Associazione di un controllo ai dati restituiti dal componente di dati.

• Lettura e scrittura dei dati mediante l'utilizzo del componente di dati.

Prerequisiti

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

• Accesso al database Northwind di SQL Server.

  È possibile utilizzare Microsoft SQL Server Desktop Engine (MSDE) oppure SQL Server Express (SSE) come server di dati fino a quando viene configurato come database Northwind semplice.

• Se il database Northwind non si trova nello stesso computer del server Web, è necessario disporre di un nome utente e di una password per un account 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 un sito Web è già stato creato in Visual Web Developer completando 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. Scegliere File System nell'elenco Percorso più a sinistra e, successivamente, nella casella di testo Percorso, posizionata più a destra, immettere il nome della cartella in cui si desidera salvare le pagine del sito Web.

   Ad esempio, digitare il nome della cartella C:\WebSites\ComponentSample.

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.

Creazione di un componente di accesso ai dati

In questa procedura dettagliata sarà utilizzata una configurazione guidata per generare un componente che consente di leggere e scrivere sul database Northwind i dati desiderati. Nel componente è incluso un file di schema (xsd) in cui sono descritti i dati e i metodi che saranno utilizzati per leggere e scrivere dati. Non sarà necessario scrivere alcun codice. In fase di esecuzione, il file xsd viene compilato in un assembly che consente di eseguire le attività specificate nella procedura guidata.

Per creare un componente di accesso ai dati

1. Se il sito Web non dispone già di una cartella App_Code, eseguire la procedura riportata di seguito:

   1. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web.

   2. Puntare su Aggiungi cartella, quindi fare clic su App_Code Folder.

2. Fare clic con il pulsante destro del mouse sulla cartella App_Code, quindi scegliere Aggiungi nuovo elemento.

   Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.

3. In Modelli Visual Studio installati fare clic su DataSet.

4. Digitare EmployeesObject, nella casella Nome, quindi fare clic su Aggiungi.

   Viene visualizzata la procedura guidata TableAdapter Configuration.

5. Fare clic su Nuova connessione.

6. Se viene visualizzata la finestra di dialogo Scegli origine dati, fare clic su Microsoft SQL Server, quindi scegliere Continua.

7. Nella casella Nome server, immettere il nome del computer che sta elaborando SQL Server.

8. 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.

   • Se si specificano credenziali esplicite, selezionare la casella di controllo Salva password.

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

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

    La procedura guidata TableAdapter Configuration viene visualizzata con le informazioni relative alla connessione inserite.

11. Scegliere Avanti.

    Viene visualizzata una pagina in cui è possibile scegliere di memorizzare la stringa di connessione nel file di configurazione.

12. Selezionare la casella di controllo Sì, salva la connessione con nome, quindi scegliere Avanti.

    È possibile lasciare il nome della stringa di connessione predefinito.

    Viene visualizzata una pagina in cui è possibile scegliere di utilizzare le istruzioni SQL oppure le stored procedure.

13. Fare clic su Usa istruzioni SQL, quindi scegliere Avanti.

    L'utilizzo delle stored procedure presenta alcuni vantaggi, tra cui prestazioni e protezione. Tuttavia, per semplificare le operazioni, in questa procedura dettagliata, sarà utilizzata un'istruzione SQL.

    Viene visualizzata una pagina in cui è possibile definire la istruzioni SQL.

14. In Specificare i dati che devono essere caricati nella tabella, digitare l'istruzione SQL riportata di seguito:

    SELECT EmployeeID, LastName, FirstName, HireDate FROM Employees
    

    Nota:
    È possibile selezionare Generatore di query per utilizzare, se lo si desidera, uno strumento di generazione.

15. Scegliere Avanti.

    Viene visualizzata una pagina in cui è possibile definire i metodi che saranno esposti tramite il componente.

16. Per deselezionare fare clic sulla casella di controllo Riempi un DataTable, quindi selezionare le caselle di controllo Restituisci un DataTable e Aggiorna o modifica il database.

    Per riempire una tabella dati per questa procedura dettagliata non è necessario alcun metodo. Tuttavia, sarà necessario disporre di un metodo che restituisca i dati e del componente in cui contenere i metodi che consentono l'aggiornamento del database.

17. Digitare GetEmployees nella casella Nome metodo.

    Si sta eseguendo la denominazione del metodo che sarà successivamente utilizzato per ottenere dati.

18. Fare clic su Fine.

    La procedura guidata consente di confìgurare il componente e di visualizzarlo nella finestra di progettazione dei componenti, visualizzando i dati gestiti e i metodi esposti dal componente.

19. Salvare il componente di dati e chiudere la finestra di progettazione dei componenti.

20. Scegliere Genera sito Web dal menu Genera per accertare la corretta compilazione del componente.

Utilizzo del componente di dati in una pagina

È ora possibile procedere all'utilizzo del componente di dati come origine dati in una pagina Web ASP.NET. Per accedere al componente di dati, sarà necessario utilizzare un controllo ObjectDataSource configurandolo per eseguire la chiamata ai metodi di accesso ai dati esposti dal componente di dati. Quindi, è possibile aggiungere i controlli alla pagina e associarli al controllo origine dati.

Per aggiungere un controllo origine dati alla pagina

1. Aprire la pagina Default.aspx e passare alla visualizzazione Progettazione.

2. Trascinare un controllo ObjectDataSource nella pagina dal gruppo Dati della Casella degli strumenti.

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

3. Scegliere Configura origine dati, dal menu di scelta rapida Attività ObjectDataSource.

   Viene visualizzata la configurazione guidata origine dati.

4. Scegliere EmployeesObjectTableAdapters.EmployeesTableAdapter dall'elenco Selezionare un oggetto business.

   Corrisponde al nome di tipo (spazio dei nomi e nome di classe) del componente creato nella sezione precedente.

5. Scegliere Avanti.

6. Scegliere GetEmployees(), returns EmployeesDataTable, dall'elenco Selezionare un metodo della scheda Seleziona.

   Il metodo GetEmployees è un metodo definito nel componente creato nella sezione precedente. Restituisce i risultati dell'istruzione SQL disponibile in un oggetto DataTable a cui è possibile associare i controlli di dati.

7. Fare clic su Fine.

È infine possibile aggiungere i controlli di dati alla pagina e associarli al controllo ObjectDataSource. In questa procedura dettagliata, sarà utilizzato il controllo GridView.

Per aggiungere un controllo GridView alla pagina e associarlo ai dati

1. Trascinare un controllo GridView nella pagina dal gruppo Datidella Casella degli strumenti,

   • 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.

2. Scegliere ObjectDataSource1 dall'elenco Scegliere l'origine dati nel menu di scelta rapida Attività GridView; l'elemento selezionato rappresenta l'ID del controllo configurato nella sezione precedente.

   Il controllo GridView viene visualizzato di nuovo con una colonna per ciascuna colonna di dati restituita dall'istruzioneSQL.

3. In Proprietà, verificare che la proprietà DataKeyNames sia impostata su EmployeeID.

Test della pagina

Dopo avere inserito tutti i controlli desiderati nella pagina, sarà possibile eseguire il test della pagina.

Per eseguire il test della pagina

1. Premere CTRL+F5 per eseguire la pagina.

2. Confermare che, nella tabella Employees le colonne EmployeeID, LastName, FirstName e HireDate siano visualizzate nella griglia.

3. Chiudere il browser.

Nel controllo GridView sono richiesti i dati del controllo ObjectDataSource. Il controllo ObjectDataSource consente invece di creare un'istanza del componente di dati e di eseguire la chiamata al metodo GetEmployees per il componente di dati. Il metodo GetEmployees restituisce un oggetto DataTable che il controllo ObjectDataSource restituisce al controllo GridView.

Aggiunta di aggiornamenti alla pagina

Nel componente di dati creato sono incluse le istruzioni SQL per aggiornare il database (aggiornare, inserire ed eliminare record). Le funzionalità di aggiornamento del componente di dati sono esposte tramite i metodi generati in modo automatico quando, tramite la procedura guidata, è stato creato il componente. Il controllo GridView e il controllo ObjectDataSource possono interagire per consentire l'avvio automatico dei metodi di aggiornamento.

Nota:
Il controllo GridView non supporta l'operazione di inserimento.

Per attivare le operazioni di aggiornamento e di eliminazione

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

2. Selezionare la casella di controllo Attiva modifica.

3. Selezionare la casella di controllo Attiva eliminazione.

   Nota:
   L'attivazione dell'eliminazione consente di rimuovere in modo permanente i record dal database. Non attivare l'eliminazione se non si utilizzano dati di test espandibili.

Test degli aggiornamenti

È ora possibile eseguire il test per verificare la possibilità di utilizzare il componente per aggiornare il database.

Per eseguire il test degli aggiornamenti

1. Premere CTRL+F5 per eseguire la pagina.

   In questa fase, il controllo GridView consente la visualizzazione dei collegamenti Modifica e Elimina in ciascuna riga.

2. Fare clic sul collegamento Modifica che si trova accanto a una riga.

3. Eseguire una modifica alla riga, quindi fare clic su Aggiorna.

   La griglia viene nuovamente visualizzata con la data aggiornata.

4. Fare clic sul collegamento Elimina che si trova in una riga.

   La riga viene eliminata in modo permanente dal database. La griglia viene nuovamente visualizzata senza quella riga.

5. Chiudere il browser.

Passaggi successivi

In questa procedura dettagliata viene illustrato come utilizzare un componente di dati. È possibile sperimentare ulteriori funzionalità di spostamento. Ad esempio, è possibile eseguire le operazioni riportate di seguito.

• Creazione di un componente di dati personalizzato invece di utilizzare la procedura guidata.

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

• Limitazione degli utenti che possono modificare i dati. Un metodo spesso utilizzato consiste nell'aggiungere appartenenze e ruoli al sito Web e, successivamente, stabilire regole che il componente business può controllare prima di consentire la modifica dei dati.

• Per informazioni dettagliate, vedere Procedura dettagliata: creazione di un sito Web con appartenenza e accesso utente e Procedura dettagliata: gestione degli utenti di siti Web tramite i ruoli.

Vedere anche

Attività

Procedura dettagliata: utilizzo di codice condiviso nei siti Web in Visual Web Developer

Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer

Concetti

Cenni preliminari sui controlli origine dati

Utilizzo di parametri con controlli origine dati