Procedura dettagliata: visualizzazione di un elenco a discesa durante la modifica nel controllo server Web GridView
Aggiornamento: novembre 2007
Per impostazione predefinita, il controllo GridView consente di visualizzare le caselle di testo per la modifica. È possibile utilizzare la funzionalità avanzata integrata del controllo GridView ASP.NET per aggiungere un elenco a discesa alla visualizzazione della modifica. Questa operazione può essere eseguita in un Web Form senza dover scrivere alcun codice associato al modulo. Di seguito sono elencate le attività illustrate nella procedura dettagliata:
Configurazione di un controllo GridView per visualizzare dati SQL.
Visualizzazione dei dati con il controllo GridView.
Visualizzazione di un elenco a discesa durante la modifica nel controllo GridView.
Prerequisiti
Per completare questa procedura dettagliata è necessario:
Microsoft Visual Web Developer (Visual Studio).
SQL Server Express Edition. Se è stato installato SQL Server, è possibile utilizzare questo programma, ma sarà necessario apportare piccole modifiche ad alcune procedure.
Installazione del database di esempio Northwind nel computer. Per informazioni su come scaricare e installare il database di esempio Northwind di SQL Server, vedere Installazione dei database di esempio nel sito Web di Microsoft SQL Server.
.gif "Nota")
Nota:Esistono molti metodi alternativi per connettersi al database Northwind.
Creazione del sito e della pagina Web
Creare un sito e una pagina Web nuovi mediante la procedura indicata di seguito.
Per creare un sito Web di file system
Aprire Visual Web Developer.
Scegliere Nuovo dal menu File, quindi fare clic su Sito Web. Se si utilizza Visual Web Developer Express scegliere Nuovosito Web dal menu File.
Viene visualizzata la finestra di dialogo Nuovo sito Web.
In Modelli Visual Studio installati fare clic su Sito Web ASP.NET.
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\DropDownEdit.
Nell'elenco Linguaggio scegliere il linguaggio di programmazione con cui lavorare.
Scegliere OK.
La cartella viene creata insieme a una nuova pagina chiamata Default.aspx.
Creazione di una connessione dati a un'origine dati SQL
Occorre innanzitutto creare una connessione al database Northwind.
Per creare una connessione a SQL Server
In Esplora server fare clic con il pulsante destro del mouse su 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 la voce File di database Microsoft SQL Server (SqlClient) non è riportata nell'elenco Origine dati, fare clic su Modifica e, nella finestra di dialogo Modifica origine dati, fare clic su File di database 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 su 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, scegliere Esplora database dal menu Visualizza.
Nel campo Nome file di database, immettere o individuare il percorso dove è stato installato il database di esempio Northwind.
Selezionare il file di database Northwnd.mdf e fare clic su Apri.
Selezionare la casella di controllo Salva password.
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.
Configurazione di un controllo GridView per visualizzare i dati del database
In questa sezione della procedura dettagliata verranno inseriti in modo dinamico i dati nella griglia.
Per consentire un ordinamento semplice
Passare al file Default.aspx. o aprirlo
Passare alla visualizzazione Progettazione.
Trascinare un controllo GridView dal gruppo Dati della Casella degli strumenti nella pagina.
Dal menu Attività GridView, scegliere Nuova origine dati nell'elenco a discesa Scegliorigine dati.
Viene visualizzata la Configurazione guidata origine dati.
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.
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.
Scegliere OK.
Viene visualizzata la procedura guidata Configura origine dati.
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 memorizzare 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.
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.
Scegliere Employees nella casella Nome in Specificare le colonne di una tabella o visualizzazione.
In Colonne, selezionare le caselle di controllo EmployeeId, LastName, FirstName e HireDate e scegliere Avanti.
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 (clausole WHERE) e altre opzioni query SQL. Per questa procedura dettagliata, verrà creata un'istruzione semplice senza opzioni di selezione o ordinamento.
Scegliere Avanzate, selezionare la casella di controllo Genera istruzioni INSERT, UPDATE e DELETE, quindi scegliere OK.
In tal modo vengono generate le istruzioni Insert, Update, e Delete per il controllo SqlDataSource1 basato sull'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.
Fare clic su Avanti.
Fare clic su Test query per accertarsi di recuperare i dati desiderati.
Fare clic su Fine.
Fare clic con il pulsante destro del mouse sul controllo GridView e selezionare Mostra smart tag. Dal menu GridView Tasks selezionare la casella Attiva modifica.
È ora possibile eseguire il test della pagina.
Per eseguire il test della pagina
Premere CTRL+F5 per eseguire la pagina.
Il controllo GridView viene visualizzato con le colonne EmployeeId, LastName, FirstName, HireDate e City.
Fare clic sul collegamento Modifica accanto a una riga.
La riga selezionata per la modifica viene visualizzata con le colonne LastName, FirstName, HireDate e City come casella di testo modificabile. La colonna EmployeeId non viene visualizzata in una casella di testo in quanto è un campo chiave e non è modificabile.
Modificare un campo, ad esempio LastName, quindi fare clic su Aggiorna.
Il controllo GridView viene visualizzato con le colonne EmployeeId, LastName, FirstName, HireDate e City, dove LastName è stata aggiornata con il nuovo valore.
Chiudere il browser.
Visualizzazione di un elenco a discesa durante la modifica nel controllo GridView
In questa parte della procedura dettagliata, è possibile aggiungere un elenco a discesa in cui selezionare durante la modifica delle righe della griglia.
Per visualizzare un elenco durante la modifica
Trascinare un controllo SqlDataSource nella pagina dal nodo Datidella Casella degli strumenti.
Viene creato un nuovo controllo origine dati denominato SqlDataSource2.
Dal menu Attività SqlDataSource, scegliere Configura origine dati.
Nella casella Specificare la connessione dati che deve essere utilizzata dall'applicazione per connettersi al database, immettere la connessione creata in precedenza.
Fare clic su Avanti.
Nella pagina Configura istruzione Select, selezionare Specificare le colonne di una tabella o visualizzazione e nella casella Nome, scegliere Employees.
Selezionare solo la colonna City, quindi la casella di controllo Restituisci solo righe univoche. Fare clic su Avanti.
Fare clic su Test query per visualizzare l'anteprima dei dati e scegliere Fine.
Fare clic con il pulsante destro del mouse sul controllo GridView e selezionare Mostra smart tag. Selezionare Modifica colonne dal menu Attività GridView.
Selezionare City dall'elenco Campi selezionati nella finestra di dialogo Campi.
Fare clic sul collegamento Converti il campo in un TemplateField.
Scegliere OK per chiudere la finestra di dialogo Campi.
Fare clic con il pulsante destro del mouse sul controllo GridView e selezionare Mostra smart tag. Selezionare Modifica modelli dal menu Attività GridView.
Selezionare EditItemTemplate nell'elenco a discesa Visualizza.
Fare clic con il pulsante destro del mouse sul controllo predefinito TextBox nel modello e selezionare Elimina per rimuoverlo.
Dalla scheda Standard della Casella degli strumenti, trascinare un controllo DropDownList nel modello.
Fare clic con il pulsante destro del mouse sul controllo DropDownList e selezionare Mostra smart tag. Selezionare Scegliorigine dati dal menu Attività DropDownList.
Selezionare SqlDataSource2.
Scegliere OK.
Scegliere Modifica DataBindings dal menu Attività DropDownList. La proprietà SelectedValue del controlloDropDownList viene selezionato nella finestra di dialogo DataBindings.
Fare clic sul pulsante di opzione Associazione campo e selezionare City per Associato a.
Selezionare la casella di controllo Associazione dati bidirezionale.
Scegliere OK.
Fare clic con il pulsante destro del mouse sul controllo GridView e selezionare Mostra smart tag. Selezionare Termina modifica modello dal menu Attività GridView.
.gif "Nota sulla sicurezza")
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.
È ora possibile eseguire il test della pagina.
Per eseguire il test della pagina
Premere CTRL+F5 per eseguire la pagina.
Il controllo GridView viene visualizzato con le colonne EmployeeId, LastName, FirstName, HireDate e City.
Fare clic sul collegamento Modifica accanto a una riga.
Il valore corrente City viene selezionato anticipatamente nell'elenco a discesa.
Selezionare un valore City diverso dall'elenco a discesa, quindi scegliere Aggiorna.
Il campo City viene aggiornato tramite il valore selezionato nell'elenco a discesa.
Passaggi successivi
Anche se questa procedura dettagliata mostra come visualizzare un elenco a discesa popolato con i valori dalla stessa colonna associata al controllo, esistono molti metodi alternativi per popolare un elenco a discesa. Consultare l'esempio relativo a DataItem per vedere come popolare un elenco a discesa con i valori contenuti in una tabella diversa.
Vedere anche
Attività
Procedura dettagliata: accesso ai dati di base nelle pagine Web
Procedura: proteggere le stringhe di connessione durante l'utilizzo dei controlli origine dati