Come abbiamo accennato nella precedente lezione, per implementare l'inserimento di record in un database in modo visuale, occorre utilizzare il controllo DetailsView in quanto la GridView non lo permette.
Il controllo DetailsView serve per visualizzare dettagliatamente il contenuto dei campi di un singolo record di una tabella di un database ed eventualmente operare una modifica, un inserimento o la cancellazione del record.
Il DetailsView, che nel VWD si può trovare nell'area Dati della barra degli strumenti, può essere inoltre usato in coppia con il GridView per implementare una visualizzazione Master/Detail.
Realizziamo un esempio di visualizzazione Master/Detail in cui si possono effettuare tutte le usuali operazioni sui dati, cioè visualizzazione, edit, aggiornamento, cancellazione ed inserimento.
A tale scopo, apriamo un nuovo progetto nel VWD ed inseriamo sull'area di lavoro di Default.aspx una tabella 1x2, cioè una riga e due colonne partendo ad esempio dal menu Layout>Inserisci tabella ed impostando le caratteristiche della tabella come in figura
Dalla Data Toolbox, trasciniamo un GridView nella prima cella ed un DetailsView nella seconda:
Dobbiamo poi impostare un SqlDataSource per ognuno di essi. Per fare questo possiamo partire dalle Attività di GridView ed inserire una nuova origine dati, selezionare poi Database, che va bene per tutti i database SQL supportati da ADO.NET, e lasciare l'ID predefinito, andare avanti a creare connessione con il file PUBS.MDF come abbiamo già fatto in precedenza. Scegliamo poi di salvare la connessione PUBSConnectionString nel Web.config.
Specifichiamo i campi id, au_lname e au_fname della tabella "authors".
Verifichiamo che il comando Select sia impostato bene, andiamo avanti, testiamo la query ed abbiamo finito.
Per associare l'origine dati al DetailsView ripetiamo il procedimento usato per la GridView a partire dal menu Attività di DetailsView. Creiamo quindi un nuovo SqlDataSource usando la stessa stringa di connessione. Quando arriviamo a scegliere i campi per la query però, selezioniamo l'asterisco, ovvero tutti i campi.
Impostiamo anche la clausola WHERE. Selezioniamo la colonna au_id, origine "Control" e id del controllo GridView1, in modo che i dettagli mostrino il record scelto nel GridView.
Clicchiamo quindi su Aggiungi ed andiamo avanti senza testare fino alla fine.
Se abbiamo lasciato i nomi predefiniti per i due SqlDataSource, abbiamo la GridView che prende i dati da SqlDataSource1 e il DetailsView che usa SqlDataSource2. La stringa di connessione è comune e condivisa nel Web.config.
Abilitiamo la selezione dal menu delle Attività di GridView.
Nelle Attività di DetailsView, non abbiamo la possibilità di abilitare la modifica, l'aggiornamento, l'inserimento e la cancellazione. Questo perché il DetailsView lavora insieme ad un Data Source. Quindi impostiamo l'SqlDataSource2 in modo da poter svolgere le operazioni volute.
Nelle Attività di SqlDataSource di SqlDataSource2 clicchiamo su "Configura origine dati..." andiamo avanti, clicchiamo su "Avanzate..." e spuntiamo le opzioni nella finestra che si apre, come abbiamo visto nelle lezioni precedenti. Quindi clicchiamo su "Avanti" e "Fine".
Ora nelle Attività di DetailsView abbiamo la possibilità di selezionare le opzioni "Attiva inserimento", "Attiva modifica", "Attiva cancellazione" e "Attiva eliminazione", facciamolo.
Siamo già pronti per testare la nostra applicazione ma se vogliamo possiamo agire per formattare la visualizzazione dei dati a piacimento, scegliendo "Formattazione Automatica..." nelle Attività dei nostri controlli di visualizzazione. Testiamo quindi la nostra applicazione premento F5.
Se le caselle di visualizzazione dei campi dei record sono troppo strette ed i valori contenuti vanno su più righe, possiamo allargare i controlli trascinando il lato destro verso destra fino ad ottenere una larghezza accettabile.
L'esempio realizzato nel corso di questa lezione può essere scaricato da qui.
