Procedura dettagliata: esecuzione di aggiornamenti di massa di righe associate a un controllo server Web GridView

Aggiornamento: novembre 2007

Quando la modifica è abilitata per un controllo GridView, per impostazione predefinita è possibile modificare solo una riga alla volta. In questa procedura dettagliata viene illustrato come estendere la funzionalità del controllo GridView, affinché gli utenti possano modificare più righe e salvare tutte le modifiche facendo clic su un pulsante. Verrà utilizzato un controllo SqlDataSource per recuperare i risultati dall'origine dati e gestire gli aggiornamenti. Tale controllo funge da origine dati per GridView.

In particolare, vengono illustrate le seguenti operazioni:

• Connessione a un database SQL Server in Microsoft Visual Web Developer.

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

• Visualizzazione dei dati restituiti dal database nel controllo GridView.

• Configurazione del controllo GridView per consentire agli utenti di modificare più righe contemporaneamente.

Prerequisiti

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

• Visual Web Developer (Visual Studio).

• 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 ulteriori informazioni, vedere l'articolo Microsoft Data Access Components (MDAC) Installation in MSDN Library.

• Accesso al database Northwind di SQL Server. Qualora fosse necessaria una copia del database Northwind per SQL Server, vedere Installazione dei database di esempio nella documentazione in linea di SQL Server 2005.

  Nota:
  Per ulteriori informazioni sulle modalità di accesso a un computer sul quale è in esecuzione SQL Server, contattare l'amministratore del server.

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 seguente procedura.

Per creare un 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.

   Viene visualizzata la finestra di dialogo Nuovo sito Web.

3. Scegliere Sito Web ASP.NET in Modelli Visual Studio installati.

4. Nell'elenco Percorso, selezionare File system e immettere il nome della cartella in cui salvare le pagine del sito Web.

   Ad esempio, immettere il nome della cartella C:\WebSites\BulkUpdate.

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

6. Scegliere OK.

   La cartella viene creata insieme a una nuova pagina chiamata Default.aspx.

Aggiunta di un'origine dati per il controllo GridView

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

• Una connessione a un'origine dati (ad esempio, un database).

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

• Un controllo origine dati nella pagina, il quale interagisce con l'origine dati (il database) per leggere e scrivere i dati.

• Un controllo nella pagina per visualizzare i dati.

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

Per aggiungere un'origine dati per il controllo GridView

1. Aprire oppure passare alla pagina Default.aspx.

2. Passare alla visualizzazione Progettazione.

3. Dalla scheda Dati della Casella degli strumenti trascinare un controllo SqlDataSource nella pagina.

   Se lo smart tag Attività SqlDataSource non viene visualizzato, fare clic con il pulsante destro del mouse sul controllo SqlDataSource, quindi scegliere Mostra smart tag.

4. Scegliere Configura origine dati dal pannello Attività SqlDataSource.

   Viene visualizzata la procedura guidata Configura origine dati.

5. Fare clic su Nuova connessione.

   Verrà visualizzata la finestra di dialogo Aggiungi connessione.

6. Se necessario, eseguire una delle seguenti operazioni: L'interfaccia utente effettivamente visualizzata dipende dalle connessioni dati effettuate in precedenza in Visual Web Developer.

   • 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 finestra di dialogo Scegli origine dati invece della finestra di dialogo Proprietà di connessione, 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.

7. Nella casella di testo Nome server della pagina Aggiungi connessione immettere il nome del computer su cui è in esecuzione il database Northwind di SQL Server.

8. In Accesso al server selezionare l'opzione appropriata per accedere al database di SQL Server (sicurezza integrata oppure password e ID specifici). Se necessario, immettere un nome utente e una password.

   Nota:
   Per ulteriori informazioni sulle modalità di accesso a un computer sul quale è in esecuzione SQL Server, contattare l'amministratore del server.

9. Se è stata immessa una password, selezionare la casella di controllo Salva password.

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

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

12. Nella procedura guidata Configura origine dati fare clic su Avanti.

13. Verificare che la casella di controllo Sì, salva la connessione con nome sia selezionata.

14. Assegnare alla connessione il nome StringaConnessioneNorthwind, quindi fare clic su Avanti.

15. Nella pagina Configura istruzione Select selezionare Specificare le colonne di una tabella o visualizzazione.

16. Selezionare Employees dall'elenco Nome.

17. In Colonne, selezionare EmployeeID, LastName e FirstName.

18. Scegliere Avanzate.

19. Selezionare la casella di controllo Genera istruzioni INSERT, UPDATE e DELETE, quindi scegliere OK.

20. Scegliere Avanti.

21. Scegliere Fine.

Aggiunta di un controllo GridView per la visualizzazione dei dati

Dopo aver configurato un controllo origine dati per la gestione dei dati, è necessario inserire un controllo nella pagina per visualizzare i dati.

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

Per consentire agli utenti di modificare tutto il contenuto del controllo GridView contemporaneamente (invece di modificare solo una riga alla volta), è necessario personalizzare il controllo stesso. È necessario sostituire gli elementi predefiniti da visualizzare in ogni colonna con elementi modificabili, quindi associarli all'origine dati. A tale scopo verranno create le colonne TemplateField. Nella proprietà ItemTemplate di ciascuna colonna TemplateField sarà necessario aggiungere un controllo associato TextBox nel quale gli utenti potranno modificare i dati.

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

1. Verificare di essere in visualizzazione Progettazione nella pagina Default.aspx.

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

   Nel pannello GridView Tasks, nella casella di riepilogo Scegli origine dati, selezionare il controllo SqlDataSource aggiunto precedentemente, ovvero SqlDataSource1.

3. Selezionare Attiva paging.

4. Fare clic su Modifica colonne.

   Viene visualizzata la finestra di dialogo Campi.

5. Selezionare FirstName in Campi selezionati.

6. Fare clic su Converti il campo in un TemplateField.

7. Convertire il campo LastName in un campo modello utilizzando la stessa procedura seguita per il campo FirstName. Non convertire il campo EmployeeId, poiché contiene la chiave primaria e quindi non può essere modificato.

8. Scegliere OK.

9. Selezionare Modifica modelli nel pannello GridView Tasks.

10. Nell'elenco Visualizzazione, sotto FirstName, fare clic su EditItemTemplate.

    Nel controllo GridView viene visualizzata un'area modificabile con il layout predefinito per la colonna FirstName in modalità di modifica.

11. Fare clic con il pulsante destro del mouse sul controllo TextBox nella proprietà EditItemTemplate, quindi scegliere Copia.

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

13. Nell'elenco Visualizzazione, sotto FirstName, fare clic su ItemTemplate.

    Nel controllo GridView è ora visualizzato il layout predefinito per la colonna FirstNamein modalità di visualizzazione.

14. Eliminare il controllo Label esistente.

15. Fare clic con il pulsante destro del mouse sull'area modificabile ItemTemplate, quindi su Incolla.

    Il controllo TextBox, inclusa la configurazione dell'associazione dati, è stato copiato dal layout EditItemTemplate al layout ItemTemplate.

16. Selezionare il controllo TextBox e, nella finestra Proprietà, impostare la proprietà (ID) su FirstNameTextBox. Ciò garantisce che il controllo TextBox incollato e quello copiato presentino ID distinti.

17. Impostare la proprietà MaxLength su 10 (la lunghezza massima del campo nel database).

    In questo modo si impedisce agli utenti di immettere una quantità di informazioni maggiore rispetto al limite previsto nella configurazione del campo FirstName del database.

18. Ripetere i nove passaggi precedenti, questa volta modificando il campo modello LastName. Sostituire il controllo Label esistente con un controllo TextBox copiato dal layout EditItemTemplate e impostare la proprietà ID su LastNameTextBox.

    Specificare il valore 20 per la proprietà MaxLength del controllo TextBox.

19. Fare clic con il pulsante destro del mouse sul controllo GridView, quindi scegliere Termina modifica modello.

Aggiunta di una procedura per eseguire aggiornamenti di massa

Dopo aver configurato il controllo GridView per visualizzare i dati modificabili, è necessario aggiungere il codice per eseguire l'aggiornamento di massa. In questa sezione verranno effettuate le seguenti operazioni:

• Aggiunta del controllo Button e nel gestore Click, aggiunta di codice per eseguire l'aggiornamento di massa delle modifiche di ogni riga del controllo GridView.

• Aggiunta di un oggetto DataTable per l'archiviazione dei valori dei dati originali.

• Aggiunta di codice per determinare se una riga è stata modificata. I valori correnti visualizzati nel controllo GridView saranno confrontati con i valori originali archiviati nell'oggetto DataTable. Se uno o più dei valori visualizzati non è uguale al valore originale, la riga verrà aggiornata nel database. In caso contrario, la riga non verrà inclusa nell'aggiornamento di massa.

Per creare una procedura per l'esecuzione dell'aggiornamento di massa

1. Passare alla visualizzazione Progettazione.

2. Selezionare il controllo GridView e nella finestra delle Proprietà fare clic sul pulsante Eventi () per visualizzare gli eventi per il controllo GridView.

3. Nel campo RowDataBound, digitare GridView1_RowDataBound e premere INVIO.

   Viene creato un gestore eventi per l'evento RowDataBound del controllo GridView. L'aspetto del codice sarà quello illustrato nell'esempio riportato di seguito.

   Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
   
   End Sub
   

   protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
   {
   
   }
   

4. Sostituire la procedura generata con il codice seguente (comprese le variabili private).

   Private tableCopied As Boolean = False
   Private originalDataTable As System.Data.DataTable
   
   Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
       If e.Row.RowType = DataControlRowType.DataRow Then
           If Not tableCopied Then
               originalDataTable = CType(e.Row.DataItem, System.Data.DataRowView).Row.Table.Copy()
               ViewState("originalValuesDataTable") = originalDataTable
               tableCopied = True
           End If
       End If
   End Sub
   

   private bool tableCopied = false;
   private DataTable originalDataTable;
   
   protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
   {
       if (e.Row.RowType == DataControlRowType.DataRow)
           if (!tableCopied)
           {
               originalDataTable = ((DataRowView)e.Row.DataItem).Row.Table.Copy();
               ViewState["originalValuesDataTable"] = originalDataTable;
               tableCopied = true;
           }
   }
   

   Il codice viene eseguito ogni qualvolta il controllo GridView esegue l'associazione dati. Mentre la prima riga viene associata, una copia dei valori del database originali viene salvata dal codice in un oggetto DataTable che viene a sua volta archiviato nella proprietà ViewState.

5. Passare alla visualizzazione Progettazione.

6. Dalla scheda Standard della Casella degli strumenti trascinare un controllo Button nella pagina.

7. Nella finestra Proprietà, fare clic sul relativo pulsante () per visualizzare le proprietà per il controllo Button.

8. Nel campo (ID) immettere UpdateButton.

9. Nel campo Text, immettere Update.

10. Fare clic sul pulsante Eventi () per visualizzare gli eventi per il controllo Button.

11. Nel campo Click, digitare UpdateButton_Click e premere INVIO.

    Viene creato un gestore eventi per l'evento Click del controllo Button. L'aspetto del codice sarà quello illustrato nell'esempio riportato di seguito.

    Protected Sub UpdateButton_Click(ByVal sender As Object, ByVal e As EventArgs)
    
    End Sub
    

    protected void UpdateButton_Click(object sender, EventArgs e)
    {
    
    }
    

12. Sostituire la procedura generata con il codice seguente:

    Protected Sub UpdateButton_Click(ByVal sender As Object, ByVal e As EventArgs)
        originalDataTable = CType(ViewState("originalValuesDataTable"), System.Data.DataTable)
    
        For Each r As GridViewRow In GridView1.Rows
            If IsRowModified(r) Then GridView1.UpdateRow(r.RowIndex, False)
        Next
    
        ' Rebind the Grid to repopulate the original values table.
        tableCopied = False
        GridView1.DataBind()
    End Sub
    
    Protected Function IsRowModified(ByVal r As GridViewRow) As Boolean
        Dim currentID As Integer
        Dim currentLastName As String
        Dim currentFirstName As String
    
        currentID = Convert.ToInt32(GridView1.DataKeys(r.RowIndex).Value)
    
        currentLastName = CType(r.FindControl("LastNameTextBox"), TextBox).Text
        currentFirstName = CType(r.FindControl("FirstNameTextBox"), TextBox).Text
    
        Dim row As System.Data.DataRow = _
            originalDataTable.Select(String.Format("EmployeeID = {0}", currentID))(0)
    
        If Not currentLastName.Equals(row("LastName").ToString()) Then Return True
        If Not currentFirstName.Equals(row("FirstName").ToString()) Then Return True
    
        Return False
    End Function
    

    protected void UpdateButton_Click(object sender, EventArgs e)
    {
        originalDataTable = (DataTable)ViewState["originalValuesDataTable"];
    
        foreach (GridViewRow r in GridView1.Rows)
            if (IsRowModified(r)) { GridView1.UpdateRow(r.RowIndex, false); }
    
        // Rebind the Grid to repopulate the original values table.
        tableCopied = false;
        GridView1.DataBind();
    }
    
    protected bool IsRowModified(GridViewRow r)
    {
        int currentID;
        string currentLastName;
        string currentFirstName;
    
        currentID = Convert.ToInt32(GridView1.DataKeys[r.RowIndex].Value);
    
        currentLastName = ((TextBox)r.FindControl("LastNameTextBox")).Text;
        currentFirstName = ((TextBox)r.FindControl("FirstNameTextBox")).Text;
    
        DataRow row =
            originalDataTable.Select(String.Format("EmployeeID = {0}", currentID))[0];
    
        if (!currentLastName.Equals(row["LastName"].ToString())) { return true; }
        if (!currentFirstName.Equals(row["FirstName"].ToString())) { return true; }
    
        return false;
    }
    

    Nota:

    La procedura esegue un confronto tra stringhe utilizzando il valore in ogni controllo TextBox modificabile e il valore archiviato nell'oggetto DataTable memorizzato nella cache. Se il testo nel controllo TextBox è stato formattato, i valori potrebbero essere equivalenti, ma le rappresentazioni di stringa non corrisponderanno. Ad esempio, se il valore DateTime è stato formattato utilizzando il formato data breve ({0:d}), il valore nel controllo TextBox della data potrebbe essere 3/2/2005. La rappresentazione di stringa del valore della data dall'oggetto DataTable sarebbe 3/2/2005 12:00 AM. In questi casi, è necessario aggiungere una logica di confronto che prenda in considerazione i formati e le impostazioni di localizzazione.

    La procedura viene ripetuta per tutte le righe del controllo GridView e richiama la funzione IsRowModified personalizzata per ogni riga. La funzione confronta la riga corrente con la riga corrispondente nell'oggetto DataTable e restituisce il valore true se la riga è stata modificata. Per tutte le righe che sono state modificate, il codice nel gestore Click del pulsante richiama il metodo UpdateRow del controllo GridView.

Test della pagina

È ora possibile eseguire la pagina e procedere alla verifica del codice.

Per procedere alla verifica della pagina

1. Premere CTRL+F5 per eseguire la pagina.

   La pagina viene visualizzata nel browser. Il controllo GridView visualizza le righe di dati della tabella Employees del database Northwind in pagine di dati modificabili.

2. Modificare alcuni valori.

3. Fare clic su Aggiorna.

   Le righe modificate vengono aggiornate nel database.

4. Chiudere il browser.

Passaggi successivi

In questa procedura dettagliata è stato illustrato come è possibile estendere la funzionalità del controllo GridView per consentire aggiornamenti di più righe di dati in una pagina Web ASP.NET. È inoltre possibile consentire agli utenti di aggiungere nuove righe di dati utilizzando un controllo DetailsView o FormView, nonché di lavorare con controlli diversi da TextBox per modificare i valori (ad esempio, il controllo DropDownList). Per ulteriori informazioni, vedere i seguenti argomenti:

• Procedura dettagliata: creazione di pagine Web Master-Details in Visual Studio

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

• Procedura dettagliata: visualizzazione di un elenco a discesa durante la modifica nel controllo server Web GridView

Vedere anche

Attività

Procedura: proteggere le stringhe di connessione durante l'utilizzo dei controlli origine dati

Procedura dettagliata: visualizzazione di un elenco a discesa durante la modifica nel controllo server Web GridView

Procedura dettagliata: accesso ai dati di base nelle pagine Web