Como: Permitir que usuários edição itens nos controles DataList do servidor Web

Artigo
10/15/2014

Você pode permitir aos usuários editarem itens individuais no controle de servidor Web DataList.Quando um item individual é definido para editar modo, os valores que podem ser alterados geralmente são exibidos em caixas de texto ou outros controles em quais os usuários podem fazer suas alterações.

Para permitir que usuários editem itens em um controle DataList

Configure a propriedade DataKeyField do controle DataList para o nome no campo no dado que contém a chama primária.
Crie um ItemTemplate (e, se estiver usando, um AlternatingItemTemplate), e então adicione um controle de servidor Web Button nele.Configure a propriedade CommandName desse botão para edit.

Observação:

Você pode usar um controle LinkButton ou ImageButton em qualquer passo que chame um controlado de servidor Web Button.

Observação:
Você pode usar um controle LinkButton ou ImageButton em qualquer passo que chame um controlado de servidor Web Button.

Crie um EditItemTemplate para o controlador DataList que inclua o seguinte:

Controles para todos os valores que os usuários podem alterar.Por exemplo, inclua os controles TextBox para todos os caracteres e dados numéricos.Use o método declarativo Eval para especificar qual campo cada controlador está vinculado, como no exemplo:

Observação de segurança:
Este exemplo tem uma caixa de texto que aceita entrada do usuário, que é uma ameaça potencial de segurança.Por padrão, páginas Web ASP.NET validam se as entradas de usuário não incluem scripts ou elementos HTML.Para obter mais informações, consulte Visão Geral de Scripts Maliciosos.

<asp:TextBox ID="TextBox1" 

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

Um controle Button com a propriedade Text configurada para "Update" e sua propriedade CommandName para update (case-sensitive).
Um controle Button com sua propriedade Text configurada para "Cancelar" e sua propriedade CommandName configurada para cancel.

O botão Update permitirá a usuários especificar que eles concluíram a edição e irão salvar qualquer alteração.O botão Cancel permitirá a eles encerrar a edição sem salvar alterações.

Escreva código para executar as seguintes tarefas:
- Manipule o evento EditCommand do controle DataList que configura a propriedade EditItemIndex do controle DataList para o valor índice do item a ser colocado no modo edição.O índice do item que o usuário clicou está disponível através da propriedade ItemIndex do objeto Item.Então chame o método DataBind do controle.
- Manipule o evento CancelCommand do controlador DataList que configura a propriedade EditItemIndex do controle DataListpara -1 então chame o método DataBind do controle.
- Manipule o evente UpdateCommand do controle DataList.No código, extraia os valores dos controladores no item atual e passe-os para o controlador da fonte de dado para uma operação de atualização.O código exato que você usa no tipo do controle de fonte de dados que você está trabalhando.

Exemplo

O exemplo de código a seguir mostra uma pátina ASP.NET que usa um controle DataList e um controle SqlDataSource para exibir informação da tabela Categorias no banco de dados Northwind.Os usuários podem editar os itens.

Observação de segurança:
Este exemplo tem uma caixa de texto que aceita entrada do usuário, que é uma ameaça potencial de segurança.Por padrão, páginas Web ASP.NET validam se as entradas de usuário não incluem scripts ou elementos HTML.Para obter mais informações, consulte Visão Geral de Scripts Maliciosos.

<%@ 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>

Para atualizar os dados, você precisa da chave primária do registro que está sendo atualizado.Você pode obter o valor através da propriedade DataKeyField, que contém um vetor de chaves.

Para obter o valor de um controle específico no item, utilize o método FindControl do objeto argumento de evento Item.

Os valores que você configurou no dicionário SqlDataSource1.UpdateParameters devem estar de acordo com os nomes que você configurou no elemento UpdateParameters.

Compilando o código

O código requer que você estabeleça uma string conexão chamada NorthwindConnectionString.É suposot que o banco de dados ao qual você se conecta possua uma tabela denominada categorias com os campos CódigoDaCategoria, NomeDaCategoria, e Descrição.

A conta sob a qual a página conectará ao banco de dados deve ter permissão para atualizar a tabela de Categorias.

Programação robusta

O código no exemplo não executa as seguintes tarefas que você faria normalmente em um ambiente de produção:

O código não inclui checagem de erros para ter certeza que o método FindControl retorna um controle válido.Para um código mais robusto, assegure-se que o valor retornado pelo método FindControl não é uma referência nula (Nothing no Visual Basic).
O código não verifica se a atualização foi bem-sucedida.

Segurança

A entrada do usuário em um página de Web Forms pode incluir script de cliente possivelmente mal-intencionado.Por padrão, o página de Web Forms valida que a entrada do usuário não inclua script ou elementos HTML.Para obter mais informações, consulte Visão Geral de Scripts Maliciosos.