Procedura: consentire agli utenti la modifica di elementi nei controlli server Web DataList

Articolo
10/22/2014

Aggiornamento: novembre 2007

È possibile consentire agli utenti di modificare singoli elementi nel controllo server Web DataList. Quando un singolo elemento viene impostato sulla modalità di modifica, i valori che possono essere modificati vengono generalmente visualizzati nelle caselle di testo o in altri controlli nei quali gli utenti possono apportare le modifiche desiderate.

Per consentire agli utenti di modificare elementi in un controllo DataList

Impostare la proprietà DataKeyField del controllo DataList sul nome del campo nei dati che contengono la chiave primaria.
Creare un modello ItemTemplate (e, se lo si utilizza, un modello AlternatingItemTemplate), quindi aggiungervi un controllo server Web Button. Impostare la proprietà CommandName per questo pulsante su edit.

Nota:

È possibile utilizzare un controllo LinkButton o ImageButton in qualsiasi passaggio che richiede un controllo server Web Button.

Nota:
È possibile utilizzare un controllo LinkButton o ImageButton in qualsiasi passaggio che richiede un controllo server Web Button.

Creare un modello EditItemTemplate per il controllo DataList che includa quanto segue:

I controlli per tutti i valori che possono essere modificati dagli utenti. Includere, ad esempio, i controlli TextBox per tutti i caratteri e dati numerici. Utilizzare il metodo dichiarativo Eval per specificare il campo a cui è associato ciascun controllo, come nell'esempio riportato di seguito:

Nota sulla sicurezza:
L'esempio include una casella di testo che accetta l'input dell'utente e rappresenta quindi una potenziale minaccia alla sicurezza. Per impostazione predefinita, le pagine Web ASP.NET verificano che l'input dell'utente non includa script o elementi HTML. Per ulteriori informazioni, vedere Cenni preliminari sugli attacchi tramite script.

<asp:TextBox ID="TextBox1" 

  Text='<%# Eval("ProductName") %>' />

Un controllo Button con la relativa proprietà Text impostata su "Update" e la proprietà CommandName impostata su update (Maiuscole/minuscole).
Un controllo Button con la relativa proprietà Text impostata su "Cancel" e la proprietà CommandName impostata su cancel.

Il pulsante Aggiorna consente agli utenti di specificare che le modifiche sono state completate e che verranno salvate. Il pulsante Annulla consente di terminare l'operazione senza salvare le modifiche.

Scrivere il codice per l'esecuzione delle seguenti attività:
- Gestire l'evento EditCommand del controllo DataList che imposta la proprietà EditItemIndex del controllo DataList sul valore di indice dell'elemento da mettere in modalità di modifica. L'indice dell'elemento su cui l'utente ha fatto clic è disponibile mediante la proprietà ItemIndex dell'oggetto Item. Chiamare quindi il metodo DataBind del controllo.
- Gestire l'evento CancelCommand del controllo DataList che imposta la proprietà EditItemIndex del controllo DataList su -1 e chiama quindi il metodo DataBind del controllo.
- Gestire l'evento UpdateCommand del controllo DataList. Nel codice estrarre i valori dai controlli inclusi nell'elemento corrente e passarli al controllo origine dati per un'operazione di aggiornamento. Il codice esatto che viene utilizzato dipende dal tipo di controllo origine dati in uso.

Esempio

L'esempio di codice riportato di seguito mostra una pagina ASP.NET che utilizza un controllo DataList e un controllo SqlDataSource per visualizzare le informazioni dalla tabella Categories nel database Northwind. Gli utenti possono modificare gli elementi.

Nota sulla sicurezza:
L'esempio include una casella di testo che accetta l'input dell'utente e rappresenta quindi una potenziale minaccia alla sicurezza. Per impostazione predefinita, le pagine Web ASP.NET verificano che l'input dell'utente non includa script o elementi HTML. Per ulteriori informazioni, vedere Cenni preliminari sugli attacchi tramite script.

<%@ Page Language="VB" %>

<script >
Protected Sub DataList1_EditCommand(ByVal source As Object, _
        ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs)
    DataList1.EditItemIndex = e.Item.ItemIndex
    DataList1.DataBind()
End Sub

Protected Sub DataList1_CancelCommand(ByVal source As Object, _
        ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs)
    DataList1.EditItemIndex = -1
    DataList1.DataBind()
End Sub

Protected Sub DataList1_UpdateCommand(ByVal source As Object, _
        ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs)
    Dim categoryID As String = _
        DataList1.DataKeys(e.Item.ItemIndex).ToString()
    Dim categoryName As TextBox = _
        CType(e.Item.FindControl("textCategoryName"), TextBox)
    Dim description As TextBox = _
        CType(e.Item.FindControl("textDescription"), TextBox)

    SqlDataSource1.UpdateParameters("original_CategoryID"). _
        DefaultValue = categoryID
    SqlDataSource1.UpdateParameters("categoryName"). _
        DefaultValue = categoryName.Text
    SqlDataSource1.UpdateParameters("Description"). _
        DefaultValue = description.Text
    SqlDataSource1.Update()
    DataList1.EditItemIndex = -1
    DataList1.DataBind()
End Sub
</script>

<html>
<head ></head>
<body>
  <form id="form1" >
    <div>
        <br />
        <asp:DataList  
            DataKeyField="CategoryID" 
            DataSourceID="SqlDataSource1" ID="DataList1"
            OnEditCommand="DataList1_EditCommand" 
            OnCancelCommand="DataList1_CancelCommand" 
            OnUpdateCommand="DataList1_UpdateCommand">
            <EditItemTemplate>
                ID: <asp:Label ID="Label1"  
                         Text='<%# Eval("CategoryID") %>'>
                    </asp:Label>
                <br />
                Name: <asp:TextBox ID="textCategoryName"  
                         Text='<%# Eval("CategoryName") %>'>
                      </asp:TextBox>
                <br />
                Description: <asp:TextBox ID="textDescription" 
                                  
                        Text='<%# Eval("Description") %>'>
                     </asp:TextBox>
                <br />
                <asp:LinkButton ID="LinkButton1"  
                    CommandName="update" >
                    Save
                </asp:LinkButton>
                &nbsp;
                <asp:LinkButton ID="LinkButton2" >
                    CommandName="cancel" 
                    Cancel
                </asp:LinkButton>
            </EditItemTemplate>
            <ItemTemplate>
                CategoryID:
                <asp:Label ID="CategoryIDLabel"  
                    Text='<%# Eval("CategoryID") %>'>
                </asp:Label>
                <br />
                CategoryName:
                <asp:Label ID="CategoryNameLabel" 
                     Text='<%# Eval("CategoryName") %>'>
                </asp:Label>
                <br />
                Description:
                <asp:Label ID="DescriptionLabel"  
                    Text='<%# Eval("Description") %>'>
                </asp:Label>
                <br />
                <asp:LinkButton  ID="LinkButton1" 
                    CommandName="edit" >
                    Edit
                </asp:LinkButton><br />
            </ItemTemplate>
        </asp:DataList>

        <asp:SqlDataSource ID="SqlDataSource1"  
              ConnectionString=
                  "<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CategoryID], [CategoryName], 
                 [Description] FROM [Categories]"
            UpdateCommand="UPDATE [Categories] SET [CategoryName] = 
                 @CategoryName, [Description] = @Description 
                 WHERE [CategoryID] = @original_CategoryID">
            <UpdateParameters>
              <asp:Parameter Name="CategoryName" Type="String" />
              <asp:Parameter Name="Description" Type="String" />
              <asp:Parameter Name="original_CategoryID" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
    </div>
  </form>
</body>
</html>

<%@ Page Language="C#" %>
<script >
protected void DataList1_EditCommand(object source, 
    DataListCommandEventArgs e)
{
    DataList1.EditItemIndex = e.Item.ItemIndex;
    DataList1.DataBind();
}

protected void DataList1_CancelCommand(object source, 
    DataListCommandEventArgs e)
{
    DataList1.EditItemIndex = -1;
    DataList1.DataBind();
}

protected void DataList1_UpdateCommand(object source, 
    DataListCommandEventArgs e)
{
    String categoryID = 
         DataList1.DataKeys[e.Item.ItemIndex].ToString();
    String categoryName = 
         ((TextBox)e.Item.FindControl("textCategoryName")).Text;
    String description = 
         ((TextBox) e.Item.FindControl("textDescription")).Text;

    SqlDataSource1.UpdateParameters["original_CategoryID"].DefaultValue 
        = categoryID;
    SqlDataSource1.UpdateParameters["categoryName"].DefaultValue 
        = categoryName;
    SqlDataSource1.UpdateParameters["Description"].DefaultValue 
        = description;
    SqlDataSource1.Update();

    DataList1.EditItemIndex = -1;
    DataList1.DataBind();
}
</script>
<html>
<head ></head>
<body>
  <form id="form1" >
    <div>
        <br />
        <asp:DataList  
            DataKeyField="CategoryID" 
            DataSourceID="SqlDataSource1" ID="DataList1"
            OnEditCommand="DataList1_EditCommand" 
            OnCancelCommand="DataList1_CancelCommand" 
            OnUpdateCommand="DataList1_UpdateCommand">
            <EditItemTemplate>
                ID: <asp:Label ID="Label1"  
                         Text='<%# Eval("CategoryID") %>'>
                    </asp:Label>
                <br />
                Name: <asp:TextBox ID="textCategoryName"  
                         Text='<%# Eval("CategoryName") %>'>
                      </asp:TextBox>
                <br />
                Description: <asp:TextBox ID="textDescription" 
                                  
                        Text='<%# Eval("Description") %>'>
                     </asp:TextBox>
                <br />
                <asp:LinkButton ID="LinkButton1"  
                    CommandName="update" >
                    Save
                </asp:LinkButton>
                &nbsp;
                <asp:LinkButton ID="LinkButton2" >
                    CommandName="cancel" 
                    Cancel
                </asp:LinkButton>
            </EditItemTemplate>
            <ItemTemplate>
                CategoryID:
                <asp:Label ID="CategoryIDLabel"  
                    Text='<%# Eval("CategoryID") %>'>
                </asp:Label>
                <br />
                CategoryName:
                <asp:Label ID="CategoryNameLabel" 
                     Text='<%# Eval("CategoryName") %>'>
                </asp:Label>
                <br />
                Description:
                <asp:Label ID="DescriptionLabel"  
                    Text='<%# Eval("Description") %>'>
                </asp:Label>
                <br />
                <asp:LinkButton  ID="LinkButton1" 
                    CommandName="edit" >
                    Edit
                </asp:LinkButton><br />
            </ItemTemplate>
        </asp:DataList>

        <asp:SqlDataSource ID="SqlDataSource1"  
              ConnectionString=
                 "<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CategoryID], [CategoryName], 
                 [Description] FROM [Categories]"
            UpdateCommand="UPDATE [Categories] SET [CategoryName] = 
                 @CategoryName, [Description] = @Description 
                 WHERE [CategoryID] = @original_CategoryID">
            <UpdateParameters>
               <asp:Parameter Name="CategoryName" Type="String" />
              <asp:Parameter Name="Description" Type="String" />
              <asp:Parameter Name="original_CategoryID" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
    </div>
  </form>
</body>
</html>

Per aggiornare i dati è necessaria la chiave primaria del record che viene aggiornato. Il valore può essere ottenuto dalla proprietà DataKeyField, che contiene una matrice di chiavi.

Per ottenere il valore di un controllo specifico incluso nell'elemento, utilizzare il metodo FindControl dell'oggetto evento-argomento Item.

I valori che vengono impostati nel dizionario SqlDataSource1.UpdateParameters devono corrispondere ai nomi impostati nell'elemento UpdateParameters.

Compilazione del codice

Il codice richiede una stringa di connessione denominata NorthwindConnectionString. Si presuppone che il database al quale viene effettuata la connessione disponga di una tabella denominata Categories con i campi CategoryID, CategoryName e Description.

L'account con il quale la pagina si connette al database deve disporre dell'autorizzazione per aggiornare la tabella Categories.

Programmazione efficiente

Il codice riportato nell'esempio non esegue le attività descritte di seguito, che vengono invece normalmente eseguite in un ambiente di produzione:

Il codice non include il controllo degli errori per assicurare che il metodo FindControl restituisca un controllo valido. Per ottenere un codice maggiormente efficiente, assicurarsi che il valore restituito dal metodo FindControl non sia un riferimento con valore null (Nothing in Visual Basic).
Il codice non controlla se l'aggiornamento è stato eseguito correttamente.

Sicurezza

L'input dell'utente in una pagina Web Form può includere script client potenzialmente dannoso. Per impostazione predefinita, la pagina Web Form verifica che l'input dell'utente non includa script o altri elementi HTML. Per ulteriori informazioni, vedere Cenni preliminari sugli attacchi tramite script.