Procedura dettagliata: modifica e inserimento di dati nelle pagine Web con il controllo server Web DetailsView

Aggiornamento: novembre 2007

Microsoft Visual Web Developer consente di creare, con poche righe di codice, form di immissione dati per aggiornare i record e per inserire nuovi record in un database. Utilizzando un controllo origine dati, che consente di incapsulare l'accesso ai dati, in combinazione con i controlli DetailsView e GridView, che consentono di visualizzare i record in formato modificabile, è possibile creare una pagina di immissione dati per permettere agli utenti di modificare i record esistenti oppure di inserire nuovi record senza ricorrere al codice.

In particolare, vengono illustrate le seguenti operazioni:

• Creazione di una pagina di immissione dati.

• Configurazione di un controllo origine dati con le informazioni richieste per l'esecuzione di aggiornamenti e inserimenti nel database.

• Utilizzo del controllo DetailsView per visualizzare singoli record, modificarli e inserire nuovi record.

• Utilizzo di un controllo GridView per consentire la modifica di database da una pagina di immissione dati.

Prerequisiti

Per completare questa procedura dettagliata è necessario:

• Visual Web Developer

• 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, può essere necessario aggiornare la versione di MDAC già installata nel computer. Per scaricare la versione MDAC corrente, visitare il sito Web Data Access and Storage Developer CenterData Access and Storage Developer Center.

• Accesso a un computer in cui è installato Microsoft SQL Server con il database Northwind.

• Autorizzazione per la modifica dei dati del database Northwind.

Creazione del sito e della pagina Web

Creazione di un sito e di una pagina Web nuovi mediante la procedura indicata di seguito.

Per creare un nuovo sito Web di file system

1. Aprire Visual Web Developer.

2. Scegliere Nuovo dal menu File, quindi fare clic su Sito Web. Se si utilizza Visual Web Developer Express 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, selezionare File system e immettere il nome della cartella in cui salvare le pagine del sito Web.

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

5. Nell'elenco Linguaggio scegliere il linguaggio di programmazione con lui lavorare.

   Il linguaggio di programmazione scelto sarà il predefinito per il sito Web, ma è possibile impostare i linguaggi di programmazione per ogni singola pagina.

6. Scegliere OK.

   In Visual Web Developer viene creata la cartella e aggiunta una nuova pagina denominata Default.aspx.

Connessione a SQL Server

Il passaggio successivo consiste nello stabilire una connessione al database SQL Server.

Per creare una connessione a un database di SQL Server

1. In Esplora server fare clic con il pulsante destro del mouse sul nodo Connessioni dati e scegliere Aggiungi connessione. Se si utilizza Visual Web Developer Express, utilizzare Esplora database.

   Verrà visualizzata la finestra di dialogo Aggiungi connessione.

   • Se nell'elenco Origine dati non è visualizzato Microsoft SQL Server (SqlClient), fare clic su Cambia e nella finestra di dialogo Modifica origine dati selezionare Microsoft SQL Server.

   • Se viene visualizzata la pagina Scegli origine dati, selezionare il tipo di origine dati da utilizzare nell'elenco Origine dati. Per questa procedura dettagliata il tipo di origine dati è Microsoft SQL Server. Nell'elenco Provider di dati, fare clic su Provider di dati .NET Framework per SQL Server, quindi scegliere Continua.

   Nota:
   Se la scheda Esplora server non è visibile in Visual Web Developer, scegliere Esplora server dal menu Visualizza. Se la scheda Esplora database non è visibile in Visual Web Developer Express Edition, scegliere Esplora database dal menu Visualizza.

2. Nella casella Aggiungi connessione, immettere il nome del server in uso in Nome server.

3. Per la sezione Accesso al server, selezionare l'opzione appropriata per accedere al database di SQL Server in esecuzione (protezione integrata oppure password e ID specifici) e, se richiesto, inserire un nome utente e una password. Se è stata immessa una password, selezionare la casella di controllo Salva password.

4. Scegliere Northwind in Seleziona o immetti nome di database.

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

   La nuova connessione è stata creata in Connessioni dati all'interno di Esplora server.

Creazione della pagina di immissione dati

In questa sezione verrà creata una pagina di immissione dati e configurato un controllo DetailsView in modo da visualizzare i dati relativi ai dipendenti che sono memorizzati nella tabella Employees del database Northwind. Per gestire l'accesso ai dati per la pagina, sarà configurato un controllo origine dati SQL.

Per creare una pagina di immissione dati e configurare un controllo DetailsView

1. Scegliere Aggiungi nuovo elemento dal menu Sito Web.

   Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.

2. In Modelli diVisual Studio installati, fare clic su Web Form e nella casella Nome digitare EditEmployees.aspx.

3. Scegliere Aggiungi.

4. Aprire la pagina EditEmployees.aspx.

5. Passare alla visualizzazione Progettazione.

6. Digitare Edit Employees, selezionare il testo e formattarlo come intestazione.

7. Trascinare un controllo DetailsView dal gruppo Dati della Casella degli strumenti alla pagina.

8. Fare clic con il pulsante destro del mouse sul controllo DetailsView, scegliere Proprietà e impostare AllowPaging su true.

   In tal modo sarà possibile spostarsi tra le singole voci relative ai dipendenti nel momento in cui vengono visualizzate.

Il passaggio successivo consiste nel creare e configurare un controllo origine dati che possa essere utilizzato per eseguire query al database. Esistono diversi modi per creare un controllo origine dati, tra cui il trascinamento degli elementi dei dati da Esplora server o Esplora database alla pagina. In questa procedura dettagliata verrà avviato il controllo DetailsView, che sarà utilizzato per configurare il controllo origine dati.

Per configurare un controllo origine dati

1. Fare clic con il pulsante destro del mouse sul controllo DetailsView e scegliere Mostra smart tag.

2. Nella casella Scegli origine dati del menu Attività DetailsView, fare clic su <Nuova origine dati>.

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

3. In elenco di origini dati, fare clic su Database.

4. Lasciare il nome predefinito SqlDataSource1 e scegliere OK.

   Nella procedura guidata Configura origine dati verrà visualizzata la pagina Scegliere una connessione dati.

5. Nella casella Specificare la connessione dati che deve essere utilizzata dall'applicazione per connettersi al database, immettere la connessione creata nella sezione "Per creare una connessione a SQL Server" e scegliere Avanti.

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

   • Maggiore sicurezza rispetto alla memorizzazione nella pagina.

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

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

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

7. Nella pagina Configura istruzione Select, selezionare Specificare le colonne di una tabella o vista e nella casella Nome, scegliere Employees.

8. In Colonne, selezionare le caselle di controllo EmployeeID, LastName, FirstName e HireDate e scegliere Avanti.

9. Fare clic su Test query per visualizzare l'anteprima dei dati e scegliere Fine.

È ora possibile eseguire il test della pagina di visualizzazione dei record relativi ai dipendenti.

Per eseguire il test della visualizzazione dei record relativi ai dipendenti

1. Premere CTRL+F5 per eseguire la pagina.

   Il record relativo al primo dipendente viene visualizzato nel controllo DetailsView.

2. Fare clic sui collegamenti dei numeri di pagina per visualizzare ulteriori record relativi ai dipendenti.

3. Chiudere il browser.

Consentire la modifica in un controllo GridView

A questo punto, è possibile visualizzare i record relativi ai dipendenti; tuttavia, non è possibile modificarli. In questa sezione, sarà aggiunto un controllo GridView che verrà configurato in modo da rendere possibile la modifica dei singoli record.

Nota:
Il controllo GridView contiene un elenco dei record e consente di modificarli. Tuttavia, non consente l'inserimento di record. Più avanti nella procedura dettagliata, sarà utilizzato il controllo DetailsView, che consente di aggiungere nuovi record.

Per supportare la modifica, è necessario configurare il controllo origine dati creato in precedenza (SqlDataSource1), con le istruzioni SQL che eseguono gli aggiornamenti.

Per aggiungere un controllo GridView che consenta la modifica

1. Trascinare un controllo GridView dal gruppo Dati della Casella degli strumenti nella pagina.

2. Fare clic con il pulsante destro del mouse sul controllo GridView, selezionare Mostra smart tag, quindi fare clic su SqlDataSource1 nella casella Scegli origine dati del menu Attività GridView.

3. Dal menu Attività GridView, scegliere Configura origine dati.

4. Scegliere Avanti per passare alla pagina Configura istruzione Select della procedura guidata.

5. Nella pagina Configura istruzione Select, fare clic su Avanzate, selezionare la casella di controllo Genera istruzioni INSERT, UPDATE e DELETE e scegliere OK.

   In tal modo vengono generate le istruzioni Insert, Update, e Delete per il controllo SqlDataSource1 in base all'istruzione Select configurata in precedenza.

   Nota:
   In alternativa, è possibile creare manualmente le istruzioni selezionando Specificare una stored procedure o un'istruzione SQL personalizzata e immettendo le query SQL.

6. Fare clic su Avanti e quindi su Fine.

   A questo punto il controllo SqlDataSource è configurato con istruzioni SQL aggiuntive.

   Nota:
   È possibile esaminare le istruzioni generate tramite la procedura guidata selezionando il controllo SqlDataSource e visualizzando le proprietà DeleteQuery, InsertQuery e UpdateQuery. È anche possibile visualizzare le proprietà aggiornate del controllo passando alla visualizzazione Origine ed esaminando il codice del controllo.

7. Nel menu Attività GridView, selezionare le caselle di controllo Attiva paging e Attiva modifica.

   Nota sulla sicurezza:

   L'input dell'utente in una pagina Web ASP.NET può includere script client potenzialmente dannoso. Per impostazione predefinita, nelle pagine Web ASP.NET viene eseguita la convalida dell'input dell'utente per accertarsi che non includa script o elementi HTML. Se questa convalida è attivata, non occorrerà effettuare un controllo esplicito per escludere che l'input utente contenga script o elementi HTML. Per ulteriori informazioni, vedere Cenni preliminari sugli attacchi tramite script.

A questo punto è possibile eseguire il test della modifica dei record relativi ai dipendenti.

Per eseguire il test della modifica nel controllo GridView

1. Premere CTRL+F5 per eseguire la pagina.

   Il controllo GridView viene visualizzato con i dati all'interno delle caselle di testo.

2. Scegliere una riga nel controllo GridView e fare clic su Modifica.

3. Apportare una modifica al record e scegliere Aggiorna.

   I dati aggiornati verranno visualizzati sia nel controllo GridView, sia nel controllo DetailsView.

4. Chiudere il browser.

Consentire la modifica, l'eliminazione e l'inserimento mediante un controllo DetailsView

Il controllo GridView consente di modificare i record; tuttavia, non consente l'inserimento di dati. In questa sezione, verrà modificato il controllo DetailsView in modo che sia possibile visualizzare i record singolarmente nonché eliminare, inserire e aggiornare i record.

Per utilizzare un controllo DetailsView in modo da consentire l'eliminazione, l'inserimento e l'aggiornamento

1. Fare clic con il pulsante destro del mouse sul controllo DetailsView e scegliere Mostra smart tag

2. Nel menu Attività DetailsView, selezionare le caselle di controllo Attiva paging, Attiva modifica e Attiva eliminazione.

   Durante l'utilizzo del controllo DetailsView nella precedente procedura dettagliata, le opzioni per l'attivazione della modifica, dell'inserimento e dell'eliminazione non erano disponibili. Infatti, il controllo SqlDataSource1 associato al controllo DetailsView non disponeva delle istruzioni SQL necessarie. Ora, avendo configurato il controllo origine dati in modo da includere le istruzioni di aggiornamento, le opzioni di aggiornamento sono disponibili nel controllo DetailsView.

A questo punto è possibile eseguire il test dell'eliminazione, dell'inserimento e dell'aggiornamento all'interno del controllo DetailsView.

Per eseguire il test dell'aggiornamento, dell'inserimento e dell'eliminazione nel controllo DetailsView

1. Premere CTRL+F5 per eseguire la pagina.

   Nel controllo DetailsView viene visualizzato un record relativo a un dipendente.

2. Nel controllo DetailsView fare clic su Modifica.

   Nelle caselle di testo del controllo DetailsView vengono ora visualizzato i dati.

3. Apportare una modifica al record e scegliere Aggiorna.

   Il record aggiornato viene visualizzato nel controllo.

4. Nel controllo DetailsView fare clic su Nuovo.

   Nel controllo vengono visualizzate delle caselle di testo vuote per ciascuna colonna.

5. Immettere i valori per ciascuna colonna.

   Nella tabella Employees è presente una colonna di chiave a incremento automatico, per cui, quando si salva il record, il valore relativo a EmployeeID viene assegnato automaticamente.

6. Al termine, scegliere Inserisci.

   Il nuovo record viene aggiunto come ultimo record.

   Nota:
   L'inserimento di un nuovo record nella tabella Employees in questa procedura dettagliata non genererà alcun errore. Tuttavia, quando si gestiscono dati di produzione, è possibile che le tabelle presentino vincoli (ad esempio un vincolo di chiave esterna) di cui è necessario essere a conoscenza quando si configura il controllo DetailsView.

7. Utilizzare il paging per spostarsi sull'ultimo record del controllo DetailsView, quindi fare clic su Elimina.

   Il nuovo record viene rimosso.

   Nota:
   In modo simile a quanto accade per l'inserimento dei dati, quando si configura un controllo DetailsView per consentire l'eliminazione, è necessario essere sempre informati di eventuali vincoli che si applicano alla riga di dati.

Passaggi successivi

In questa procedura dettagliata sono state illustrate le basi della creazione di una pagina Web che consente agli utenti di modificare i record dei dati. È possibile che si desideri esplorare funzionalità aggiuntive delle pagine Web ASP.NET. Ad esempio, è possibile eseguire le operazioni riportate di seguito.

• Utilizzo di record di tabelle correlate. Per informazioni dettagliate, vedere Procedura dettagliata: creazione di pagine Web Master-Details in Visual Studio.

• Utilizzo di un componente di livello intermedio per l'accesso ai dati. Per informazioni dettagliate, vedere Procedura dettagliata: associazione ai dati a un oggetto business personalizzato.

• Utilizzo di altri metodi per configura l'accesso ai dati in una pagina Web. Per informazioni dettagliate, vedere Procedura dettagliata: accesso ai dati di base nelle pagine Web.

Vedere anche

Attività

Procedura dettagliata: creazione di una pagina Web per visualizzare dati di database di Access

Concetti

Cenni preliminari sui controlli origine dati

Associazioni a dati tramite un controllo origine dati