Uma visão geral da edição e exclusão de dados na DataList (C#)

por Scott Mitchell

Descarregar PDF

Embora o DataList não tenha recursos internos de edição e exclusão, neste tutorial veremos como criar um DataList que ofereça suporte à edição e exclusão de seus dados subjacentes.

Introdução

No tutorial Visão geral da inserção, atualização e exclusão de dados, examinamos como inserir, atualizar e excluir dados usando a arquitetura do aplicativo, um ObjectDataSource e os controles GridView, DetailsView e FormView. Com o ObjectDataSource e estes três controlos Web de dados, a implementação de interfaces simples de modificação de dados foi facilitada e envolveu apenas selecionar uma caixa de verificação de um rótulo inteligente. Nenhum código precisava ser escrito.

Infelizmente, o DataList não tem os recursos internos de edição e exclusão inerentes ao controle GridView. Essa funcionalidade ausente deve-se, em parte, ao fato de que a DataList é uma relíquia da versão anterior do ASP.NET, quando controles declarativos de fonte de dados e páginas de modificação de dados sem código não estavam disponíveis. Embora o DataList no ASP.NET 2.0 não ofereça os mesmos recursos de modificação de dados prontos para uso que o GridView, podemos usar técnicas ASP.NET 1.x para incluir essa funcionalidade. Essa abordagem requer um pouco de código, mas, como veremos neste tutorial, o DataList tem alguns eventos e propriedades para ajudar nesse processo.

Neste tutorial, veremos como criar uma DataList que suporte a edição e exclusão de seus dados subjacentes. Tutoriais futuros examinarão cenários de edição e exclusão mais avançados, incluindo validação de campo de entrada, tratamento normal de exceções geradas a partir das camadas de Acesso a Dados ou Lógica de Negócios e assim por diante.

Observação

Como o DataList, o controlo Repeater não possui a funcionalidade pronta para inserir, atualizar ou excluir. Embora essa funcionalidade possa ser adicionada, o DataList inclui propriedades e eventos não encontrados no Repeater que simplificam a adição de tais recursos. Portanto, este tutorial e os futuros que analisam a edição e exclusão se concentrarão estritamente na DataList.

Etapa 1: Criar as páginas da Web para Edição e Eliminação de Tutoriais

Antes de começarmos a explorar como atualizar e excluir dados de uma DataList, vamos primeiro reservar um momento para criar as páginas ASP.NET em nosso projeto de site que precisaremos para este tutorial e os próximos vários. Comece adicionando uma nova pasta chamada EditDeleteDataList. Em seguida, adicione as seguintes páginas ASP.NET a essa pasta, certificando-se de associar cada página à Site.master página mestra:

• Default.aspx
• Basics.aspx
• BatchUpdate.aspx
• ErrorHandling.aspx
• UIValidation.aspx
• CustomizedUI.aspx
• OptimisticConcurrency.aspx
• ConfirmationOnDelete.aspx
• UserLevelAccess.aspx

Figura 1: Adicionar as páginas de ASP.NET para os tutoriais

Como nas outras pastas, Default.aspx na EditDeleteDataList pasta lista os tutoriais em sua seção. Lembre-se de que o SectionLevelTutorialListing.ascx Controle de Usuário fornece essa funcionalidade. Portanto, adicione este Controlo do Utilizador a Default.aspx arrastando-o do Gerenciador de Soluções para a vista de Design da página.

Figura 2: Adicionar o controle de usuário a SectionLevelTutorialListing.ascx (Default.aspx imagem em tamanho real)

Por fim, adicione as páginas como entradas ao Web.sitemap arquivo. Especificamente, adicione a seguinte marcação após os relatórios Master/Detail com o DataList e o Repeater <siteMapNode>:

<siteMapNode
    title="Editing and Deleting with the DataList"
    description="Samples of Reports that Provide Editing and Deleting Capabilities"
    url="~/EditDeleteDataList/Default.aspx" >
    <siteMapNode
        title="Basics"
        description="Examines the basics of editing and deleting with the
                     DataList control."
        url="~/EditDeleteDataList/Basics.aspx" />
    <siteMapNode
        title="Batch Update"
        description="Examines how to update multiple records at once in a
                     fully-editable DataList."
        url="~/EditDeleteDataList/BatchUpdate.aspx" />
    <siteMapNode
        title="Error Handling"
        description="Learn how to gracefully handle exceptions raised during the
                     data modification workflow."
        url="~/EditDeleteDataList/ErrorHandling.aspx" />
    <siteMapNode
        title="Adding Data Entry Validation"
        description="Help prevent data entry errors by providing validation."
        url="~/EditDeleteDataList/UIValidation.aspx" />
    <siteMapNode
        title="Customize the User Interface"
        description="Customize the editing user interfaces."
        url="~/EditDeleteDataList/CustomizedUI.aspx" />
    <siteMapNode
        title="Optimistic Concurrency"
        description="Learn how to help prevent simultaneous users from
                     overwritting one another s changes."
        url="~/EditDeleteDataList/OptimisticConcurrency.aspx" />
    <siteMapNode
        title="Confirm On Delete"
        description="Prompt a user for confirmation when deleting a record."
        url="~/EditDeleteDataList/ConfirmationOnDelete.aspx" />
    <siteMapNode
        title="Limit Capabilities Based on User"
        description="Learn how to limit the data modification functionality
                     based on the user s role or permissions."
        url="~/EditDeleteDataList/UserLevelAccess.aspx" />
</siteMapNode>

Após a atualização Web.sitemap, reserve um momento para visualizar o site de tutoriais através de um navegador. O menu à esquerda agora inclui itens para os tutoriais de edição e exclusão de DataList.

Figura 3: O mapa do site agora inclui entradas para os tutoriais de edição e exclusão de DataList

Etapa 2: Examinando técnicas para atualizar e excluir dados

Editar e excluir dados com o GridView é tão fácil porque, sob as capas, o GridView e o ObjectDataSource funcionam em conjunto. Conforme discutido no tutorial Examinando os eventos associados à inserção, atualização e exclusão, quando o botão de Atualização de uma linha é clicado, o GridView atribui automaticamente os campos que utilizaram associação de dados bidirecional à coleção UpdateParameters de seu ObjectDataSource e, em seguida, invoca o método Update() desse ObjectDataSource.

Infelizmente, o DataList não fornece nenhuma dessas funcionalidades internas. É nossa responsabilidade garantir que os valores do usuário sejam atribuídos aos parâmetros de ObjectDataSource e que seu Update() método seja chamado. Para nos ajudar nessa empreitada, a DataList fornece as seguintes propriedades e eventos:

• A DataKeyField propriedade ao atualizar ou eliminar, precisamos ser capazes de identificar cada item de forma única na DataList. Defina essa propriedade como o campo de chave primária dos dados exibidos. Isso irá preencher a coleção DataKeys de DataList com o valor DataKeyField especificado para cada item de DataList.
• O EditCommand evento é acionado quando um Button, LinkButton ou ImageButton cuja CommandName propriedade está definida como Edit é clicado.
• O CancelCommand evento é acionado quando um Button, LinkButton ou ImageButton cuja CommandName propriedade está definida como Cancel é clicado.
• O UpdateCommand evento é acionado quando um Button, LinkButton ou ImageButton cuja CommandName propriedade está definida como Update é clicado.
• O DeleteCommand evento é acionado quando um Button, LinkButton ou ImageButton cuja CommandName propriedade está definida como Delete é clicado.

Usando essas propriedades e eventos, há quatro abordagens que podemos usar para atualizar e excluir dados da DataList:

1. Usando técnicas ASP.NET 1.x , o DataList existia antes do ASP.NET 2.0 e ObjectDataSources e era capaz de atualizar e excluir dados inteiramente por meios programáticos. Essa técnica abandona completamente o ObjectDataSource e requer que vinculemos os dados à DataList diretamente da camada de lógica de negócios, tanto na recuperação dos dados a serem exibidos quanto na atualização ou exclusão de um registro.
2. Usando um único controle ObjectDataSource na página para selecionar, atualizar e excluir enquanto o DataList não tem os recursos inerentes de edição e exclusão do GridView, não há razão para não podermos adicioná-los em nós mesmos. Com essa abordagem, usamos um ObjectDataSource como nos exemplos de GridView, mas devemos criar um manipulador de eventos para o evento DataList s UpdateCommand onde definimos os parâmetros de ObjectDataSource e chamamos seu Update() método.
3. Usando um controlo ObjectDataSource para selecionar, mas atualizar e excluir diretamente na BLL Utilizando a UpdateCommand opção 2, precisamos escrever algum código no evento, atribuindo valores de parâmetro, etc. Em vez disso, podemos continuar a usar o ObjectDataSource para selecionar, mas fazer as chamadas de atualização e exclusão diretamente na BLL (como na opção 1). Na minha opinião, atualizar dados fazendo interface diretamente com a BLL leva a um código mais legível do que atribuir o ObjectDataSource s UpdateParameters e chamar seu Update() método.
4. Usando meios declarativos por meio de vários ObjectDataSources, as três abordagens anteriores exigem um pouco de código. Se você preferir continuar usando o máximo de sintaxe declarativa possível, uma opção final é incluir vários ObjectDataSources na página. O primeiro ObjectDataSource recupera os dados da BLL e os vincula à DataList. Para atualização, outro ObjectDataSource é adicionado, mas adicionado diretamente dentro do DataList s EditItemTemplate. Para incluir o suporte à exclusão, outro ObjectDataSource seria necessário no ItemTemplate. Com esta abordagem, estes ObjectDataSource incorporados usam ControlParameters para vincular declarativamente os parâmetros do ObjectDataSource aos controles de entrada do utilizador, em vez de especificá-los programaticamente no manipulador de eventos do DataList UpdateCommand. Essa abordagem ainda requer um pouco de código, pois precisamos chamar o ObjectDataSource incorporado como comando Update() ou Delete(), mas isso requer muito menos do que nas outras três abordagens. A desvantagem aqui é que os vários ObjectDataSources atrapalham a página, prejudicando a legibilidade geral.

Se for forçado a usar apenas uma dessas abordagens, eu escolheria a opção 1 porque ela fornece mais flexibilidade e porque a DataList foi originalmente projetada para acomodar esse padrão. Embora o DataList tenha sido estendido para trabalhar com os controles de fonte de dados do ASP.NET 2.0, ele não tem todos os pontos de extensibilidade ou recursos dos controles Web de dados oficiais do ASP.NET 2.0 (GridView, DetailsView e FormView). No entanto, as opções 2 a 4 não são isentas de mérito.

Este e os futuros tutoriais de edição e exclusão usarão um ObjectDataSource para recuperar os dados para exibir e direcionar chamadas para a BLL para atualizar e excluir dados (opção 3).

Etapa 3: Adicionando o DataList e configurando seu ObjectDataSource

Neste tutorial, criaremos uma DataList que lista as informações do produto e, para cada produto, fornece ao usuário a capacidade de editar o nome e o preço e excluir o produto completamente. Em particular, recuperaremos os registros para exibir usando um ObjectDataSource, mas executaremos as ações de atualização e exclusão fazendo interface diretamente com a BLL. Antes de nos preocuparmos em implementar os recursos de edição e exclusão para a DataList, vamos primeiro fazer com que a página visualize os produtos em uma interface de leitura apenas. Como examinamos essas etapas em tutoriais anteriores, vou prossegui-las rapidamente.

Comece por abrir a página Basics.aspx na pasta EditDeleteDataList e, na vista de Design, adicione uma DataList à página. Em seguida, a partir da etiqueta inteligente DataList, crie um novo ObjectDataSource. Como estamos trabalhando com dados do produto, configure-o para usar a ProductsBLL classe. Para recuperar todos os produtos, escolha o GetProducts() método na guia SELECT.

Figura 4: Configurar o ObjectDataSource para usar a classe (ProductsBLL imagem em tamanho real)

Figura 5: Retornar as informações do produto usando o método (GetProducts() imagem em tamanho real)

O DataList, como o GridView, não foi projetado para inserir novos dados; portanto, selecione a opção (Nenhum) na lista suspensa na guia INSERIR. Escolha também (Nenhum) para as abas UPDATE e DELETE, pois as atualizações e exclusões serão realizadas programaticamente através da BLL.

Figura 6: Confirme se as listas de Drop-Down nas guias INSERT, UPDATE e DELETE do ObjectDataSource estão definidas como (Nenhum) (Clique para visualizar a imagem em tamanho normal)

Depois de configurar o ObjectDataSource, clique em Concluir, retornando ao Designer. Como vimos em exemplos anteriores, o Visual Studio, ao concluir a configuração do ObjectDataSource, cria automaticamente um ItemTemplate para o DropDownList, exibindo cada um dos campos de dados. Substitua por ItemTemplate um que exiba apenas o nome e o preço do produto. Além disso, defina a RepeatColumns propriedade como 2.

Observação

Conforme discutido no tutorial Visão geral da inserção, atualização e exclusão de dados , ao modificar dados usando o ObjectDataSource, nossa arquitetura exige que removamos a OldValuesParameterFormatString propriedade da marcação declarativa de ObjectDataSource (ou a redefinimos para seu valor padrão, {0}). Neste tutorial, no entanto, estamos usando o ObjectDataSource apenas para recuperar dados. Portanto, não precisamos modificar o valor da propriedade ObjectDataSource ( OldValuesParameterFormatString embora não faça mal fazer isso).

Depois de substituir a DataList ItemTemplate padrão por uma personalizada, a marcação declarativa em sua página deve ser semelhante à seguinte:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" RepeatColumns="2">
    <ItemTemplate>
        <h5>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>'></asp:Label>
        </h5>
        Price: <asp:Label runat="server" ID="Label1"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' />
        <br />
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    SelectMethod="GetProducts" TypeName="ProductsBLL"
    OldValuesParameterFormatString="original_{0}">
</asp:ObjectDataSource>

Reserve um momento para ver o nosso progresso através de um navegador. Como mostra a Figura 7, a DataList exibe o nome do produto e o preço unitário de cada produto em duas colunas.

Figura 7: Os nomes e preços dos produtos são exibidos em uma Two-Column DataList (Clique para visualizar a imagem em tamanho real)

Observação

O DataList tem várias propriedades que são necessárias para o processo de atualização e exclusão, e esses valores são armazenados no estado de exibição. Portanto, ao criar uma DataList que ofereça suporte à edição ou exclusão de dados, é essencial que o estado de exibição da DataList esteja habilitado.

O leitor astuto pode se lembrar de que conseguimos desabilitar o estado de exibição ao criar GridViews, DetailsViews e FormViews editáveis. Isso ocorre porque os controlos Web ASP.NET 2.0 podem incluir o estado de controlo, que é um estado mantido em postbacks tal como o estado de visualização, mas considerado essencial.

A desativação do estado de exibição no GridView simplesmente omite informações de estado triviais, mas mantém o estado de controle (que inclui o estado necessário para editar e excluir). O DataList, tendo sido criado no período de tempo ASP.NET 1.x, não utiliza o estado de controle e, portanto, deve ter o estado de exibição habilitado. Consulte Estado de controle vs. Estado de exibição para obter mais informações sobre a finalidade do estado de controle e como ele difere do estado de exibição.

Etapa 4: Adicionando uma interface de usuário de edição

O controle GridView é composto por uma coleção de campos (BoundFields, CheckBoxFields, TemplateFields e assim por diante). Esses campos podem ajustar suas marcações renderizadas dependendo do modo. Por exemplo, quando no modo somente leitura, um BoundField exibe o seu valor de campo de dados como texto; quando no modo de edição, ele renderiza um controle web TextBox cuja Text propriedade é atribuída ao valor do campo de dados.

O DataList, por outro lado, renderiza seus itens usando modelos. Os itens somente leitura são renderizados usando o ItemTemplate, enquanto os itens no modo de edição são renderizados por meio do EditItemTemplate. Neste ponto, a nossa DataList tem apenas um ItemTemplate. Para suportar a funcionalidade de edição no nível do item, precisamos adicionar um EditItemTemplate que contenha a marcação a ser exibida para o item editável. Para este tutorial, usaremos controles da Web TextBox para editar o nome do produto e o preço unitário.

O EditItemTemplate pode ser criado declarativamente ou através do Designer (selecionando a opção Editar modelos na etiqueta inteligente DataList). Para usar a opção Editar Modelos, primeiro clique no link Editar Modelos na smart tag e, em seguida, selecione o item EditItemTemplate na lista suspensa.

Figura 8: Opção para Trabalhar com a DataList EditItemTemplate (Clique para visualizar a imagem em tamanho real)

Em seguida, digite Nome do produto: e Preço: e arraste dois controles TextBox da Caixa de Ferramentas para a EditItemTemplate interface no Designer. Defina as propriedades TextBoxes ID como ProductName e UnitPrice.

Figura 9: Adicionar uma caixa de texto para o nome e o preço do produto (Clique para visualizar a imagem em tamanho real)

Precisamos vincular os valores de campo de dados do produto correspondentes às Text propriedades das duas TextBoxes. Nas etiquetas inteligentes TextBoxes, clique na ligação Editar DataBindings e associe o campo de dados apropriado à propriedade Text, tal como mostrado na Figura 10.

Observação

Ao vincular o UnitPrice campo de dados ao campo de preço da Text Caixa de Texto, você pode formatá-lo como um valor de moeda ({0:C}), um número geral ({0:N}) ou deixá-lo sem formatação.

Figura 10: Vincular os ProductName e UnitPrice campos de dados às propriedades Text dos TextBoxes

Observe como a caixa de diálogo Edit DataBindings na Figura 10 não inclui a caixa de seleção Two-way databinding que está presente ao editar um TemplateField no GridView ou no DetailsView, ou um template no FormView. O recurso de vinculação de dados bidirecional permitiu que o valor inserido no controle Web de entrada fosse atribuído automaticamente aos ObjectDataSource s InsertParameters correspondentes ou UpdateParameters ao inserir ou atualizar dados. O DataList não suporta vinculação de dados bidirecional como veremos mais adiante neste tutorial, depois que o usuário fizer suas alterações e estiver pronto para atualizar os dados, precisaremos acessar programaticamente essas propriedades TextBoxes Text e passar seus valores para o método apropriado UpdateProduct na ProductsBLL classe.

Finalmente, precisamos adicionar os botões Atualizar e Cancelar ao EditItemTemplate. Como vimos no tutorial Master/Detail Using a Bulleted List of Master Records with a Details DataList , quando um Button, LinkButton ou ImageButton cuja CommandName propriedade está definida é clicado de dentro de um Repeater ou DataList, o evento Repeater ou DataList s ItemCommand é gerado. Para o DataList, se a CommandName propriedade estiver definida para um determinado valor, um evento adicional também poderá ser gerado. Os valores especiais CommandName dos imóveis incluem, entre outros:

• Cancelar dispara o evento CancelCommand
• Editar gera o EditCommand evento
• A atualização dispara o evento UpdateCommand

Tenha em mente que esses eventos são criados além do ItemCommand evento.

Adicione aos EditItemTemplate dois controlos Web Button, um cujo CommandName está definido como Update e o outro está definido como Cancel. Depois de adicionar estes dois controlos de Botão da Web, o Designer deve ficar semelhante ao seguinte:

Figura 11: Adicionar os botões Atualizar e Cancelar ao ecrã inicial (EditItemTemplate)

Com a marcação declarativa completa de EditItemTemplate, a sua DataList deve ser semelhante ao seguinte:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" RepeatColumns="2">
    <ItemTemplate>
        <h5>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>' />
        </h5>
        Price: <asp:Label runat="server" ID="Label1"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' />
        <br />
        <br />
    </ItemTemplate>
    <EditItemTemplate>
        Product name:
            <asp:TextBox ID="ProductName" runat="server"
                Text='<%# Eval("ProductName") %>' /><br />
        Price:
            <asp:TextBox ID="UnitPrice" runat="server"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' /><br />
        <br />
        <asp:Button ID="UpdateProduct" runat="server"
            CommandName="Update" Text="Update" /> 
        <asp:Button ID="CancelUpdate" runat="server"
            CommandName="Cancel" Text="Cancel" />
    </EditItemTemplate>
</asp:DataList>

Etapa 5: Adicionando o encanamento para entrar no modo de edição

Neste momento, a nossa DataList tem uma interface de edição definida através da sua EditItemTemplate, no entanto, atualmente não há como um usuário que visita nossa página indicar que deseja editar as informações de um produto. Precisamos adicionar um botão Editar a cada produto que, quando clicado, renderiza esse item DataList no modo de edição. Comece adicionando um botão Editar ao ItemTemplate, por meio do Designer ou declarativamente. Certifique-se de definir a propriedade do botão Editar como CommandName Editar .

Depois de adicionar este botão Editar, reserve um momento para visualizar a página através de um navegador. Com esta adição, cada lista de produtos deve incluir um botão Editar.

Figura 12: Adicionar os botões Atualizar e Cancelar à EditItemTemplate (Clique para visualizar a imagem em tamanho real)

Clicar no botão causa um postback, mas não faz a listagem de produtos entrar em modo de edição. Para tornar o produto editável, precisamos:

1. Defina a propriedade DataList s EditItemIndex como o índice de cujo botão Editar DataListItem acabou de clicar.
2. Revincule os dados à DataList. Quando o DataList é re-renderizado, o DataListItem cujo ItemIndex corresponde ao EditItemIndex do DataList será renderizado usando o seu EditItemTemplate.

Como o evento DataList s EditCommand é acionado quando o botão Editar é clicado, crie um manipulador de EditCommand eventos com o seguinte código:

protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)
{
    // Set the DataList's EditItemIndex property to the
    // index of the DataListItem that was clicked
    DataList1.EditItemIndex = e.Item.ItemIndex;
    // Rebind the data to the DataList
    DataList1.DataBind();
}

O manipulador de eventos EditCommand é passado num objeto do tipo DataListCommandEventArgs como segundo parâmetro de entrada, que inclui uma referência ao DataListItem cujo botão Editar foi clicado (e.Item). O manipulador de eventos primeiro define o DataList s EditItemIndex como o ItemIndex do editável DataListItem e, em seguida, revincula os dados ao DataList chamando o método DataList s DataBind() .

Depois de adicionar esse manipulador de eventos, revisite a página em um navegador. Clicar no botão Editar agora torna o produto clicado editável (veja a Figura 13).

Figura 13: Clicar no botão Editar torna o produto editável (Clique para visualizar a imagem em tamanho real)

Etapa 6: Salvando as alterações do usuário

Clicar nos botões Atualizar ou Cancelar do produto editado não faz nada nesta fase; para adicionar essa funcionalidade, precisamos criar manipuladores de eventos para os eventos UpdateCommand e CancelCommand do DataList. Comece criando o manipulador de CancelCommand eventos, que será executado quando o botão Cancelar do produto editado for clicado e ele tiver a tarefa de retornar o DataList ao seu estado de pré-edição.

Para que o DataList renderize todos os seus itens no modo somente leitura, precisamos:

1. Defina a propriedade DataList s EditItemIndex como o índice de um índice inexistenteDataListItem. -1 é uma escolha segura, uma vez que os DataListItem índices começam em 0.
2. Revincule os dados à DataList. Como nenhum DataListItemItemIndex es corresponde ao DataList s EditItemIndex, todo o DataList será processado em um modo somente leitura.

Essas etapas podem ser realizadas com o seguinte código do manipulador de eventos:

protected void DataList1_CancelCommand(object source, DataListCommandEventArgs e)
{
    // Set the DataList's EditItemIndex property to -1
    DataList1.EditItemIndex = -1;
    // Rebind the data to the DataList
    DataList1.DataBind();
}

Com essa adição, clicar no botão Cancelar retorna a DataList ao seu estado de pré-edição.

O último manipulador de eventos que precisamos concluir é o manipulador de eventos UpdateCommand. Este manipulador de eventos precisa:

1. Acesse programaticamente o nome e o preço do produto inserido pelo usuário, bem como o produto editado s ProductID.
2. Inicie o processo de atualização chamando a sobrecarga apropriada UpdateProduct na classe ProductsBLL.
3. Defina a propriedade DataList s EditItemIndex como o índice de um índice inexistenteDataListItem. -1 é uma escolha segura, uma vez que os DataListItem índices começam em 0.
4. Revincule os dados à DataList. Como nenhum DataListItemItemIndex es corresponde ao DataList s EditItemIndex, todo o DataList será processado em um modo somente leitura.

Os passos 1 e 2 são responsáveis por salvar as alterações do usuário; as etapas 3 e 4 retornam o DataList ao seu estado de pré-edição depois que as alterações foram salvas e são idênticas às etapas executadas no manipulador de CancelCommand eventos.

Para obter o nome e o preço do produto atualizados, precisamos usar o FindControl método para referenciar programaticamente os controles da Web TextBox dentro do EditItemTemplate. Também precisamos obter o valor do ProductID produto editado. Quando inicialmente vinculamos o ObjectDataSource à DataList, o Visual Studio atribuiu a propriedade DataList s DataKeyField ao valor da chave primária da fonte de dados (ProductID). Esse valor pode ser recuperado da coleção DataList DataKeys . Reserve um momento para garantir que a DataKeyField propriedade está realmente definida para ProductID.

O código a seguir implementa as quatro etapas:

protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e)
{
    // Read in the ProductID from the DataKeys collection
    int productID = Convert.ToInt32(DataList1.DataKeys[e.Item.ItemIndex]);
    // Read in the product name and price values
    TextBox productName = (TextBox)e.Item.FindControl("ProductName");
    TextBox unitPrice = (TextBox)e.Item.FindControl("UnitPrice");
    string productNameValue = null;
    if (productName.Text.Trim().Length > 0)
        productNameValue = productName.Text.Trim();
    decimal? unitPriceValue = null;
    if (unitPrice.Text.Trim().Length > 0)
        unitPriceValue = Decimal.Parse(unitPrice.Text.Trim(),
            System.Globalization.NumberStyles.Currency);
    // Call the ProductsBLL's UpdateProduct method...
    ProductsBLL productsAPI = new ProductsBLL();
    productsAPI.UpdateProduct(productNameValue, unitPriceValue, productID);
    // Revert the DataList back to its pre-editing state
    DataList1.EditItemIndex = -1;
    DataList1.DataBind();
}

O manipulador de eventos começa lendo o produto editado ProductID da coleção DataKeys. Em seguida, as duas TextBoxes no EditItemTemplate são referenciadas e as suas Text propriedades são armazenadas em variáveis locais productNameValue e unitPriceValue. Usamos o Decimal.Parse() método para ler o UnitPrice valor da TextBox para que, se o valor inserido tiver um símbolo de moeda, ele ainda possa ser convertido corretamente em um Decimal valor.

Observação

Os valores de ProductName e UnitPrice TextBoxes só são atribuídos às variáveis productNameValue e unitPriceValue se as propriedades TextBoxes Text tiverem um valor especificado. Caso contrário, um valor de Nothing é utilizado para as variáveis, o que tem o efeito de atualizar os dados com um valor de NULL de banco de dados. Ou seja, o nosso código converte cadeias de caracteres vazias em valores de banco de dados NULL, que é o comportamento padrão da interface de edição nos controlos GridView, DetailsView e FormView.

Depois de ler os valores, o ProductsBLL método da classe s UpdateProduct é chamado, passando o nome do produto, preço e ProductID. O manipulador de eventos conclui retornando o DataList ao seu estado de pré-edição usando exatamente a mesma lógica do CancelCommand manipulador de eventos.

Com os manipuladores de eventos EditCommand, CancelCommand e UpdateCommand concluídos, um visitante pode editar o nome e o preço de um produto. As Figuras 14-16 mostram esse fluxo de trabalho de edição em ação.

Figura 14: Ao visitar a página pela primeira vez, todos os produtos estão no modo Read-Only (Clique para visualizar a imagem em tamanho real)

Figura 15: Para atualizar o nome ou o preço de um produto, clique no botão Editar (Clique para visualizar a imagem em tamanho real)

Figura 16: Depois de alterar o valor, clique em Atualizar para retornar ao modo Read-Only (Clique para visualizar a imagem em tamanho real)

Etapa 7: Adicionando recursos de exclusão

As etapas para adicionar recursos de exclusão a uma DataList são semelhantes às etapas para adicionar recursos de edição. Em suma, precisamos adicionar um botão de eliminar ao ItemTemplate que, quando pressionado:

1. Lê no produto correspondente de ProductID através da coleção DataKeys.
2. Executa a exclusão chamando o método s ProductsBLL da DeleteProduct classe.
3. Revincula os dados à DataList.

Vamos começar adicionando um botão Excluir ao ItemTemplate.

Ao ser clicado, um Button cujo evento CommandName é Editar, Atualizar ou Cancelar gera o evento ItemCommand do DataList juntamente com um evento adicional (por exemplo, ao usar Editar, o evento EditCommand também é gerado). Da mesma forma, qualquer Button, LinkButton ou ImageButton na DataList cuja CommandName propriedade esteja definida como Delete faz com que o DeleteCommand evento seja acionado (junto com ItemCommand).

Adicione um botão Excluir ao lado do botão Editar no ItemTemplate, definindo sua CommandName propriedade como Excluir. Depois de adicionar esse controle Button, sua sintaxe declarativa de ItemTemplate DataList deve se parecer com:

<ItemTemplate>
    <h5>
        <asp:Label runat="server" ID="ProductNameLabel"
            Text='<%# Eval("ProductName") %>' />
    </h5>
    Price: <asp:Label runat="server" ID="Label1"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' />
    <br />
    <asp:Button runat="server" id="EditProduct" CommandName="Edit"
        Text="Edit" />
     
    <asp:Button runat="server" id="DeleteProduct" CommandName="Delete"
        Text="Delete" />
    <br />
    <br />
</ItemTemplate>

Em seguida, crie um manipulador de eventos para o evento DataList s DeleteCommand , usando o seguinte código:

protected void DataList1_DeleteCommand(object source, DataListCommandEventArgs e)
{
    // Read in the ProductID from the DataKeys collection
    int productID = Convert.ToInt32(DataList1.DataKeys[e.Item.ItemIndex]);
    // Delete the data
    ProductsBLL productsAPI = new ProductsBLL();
    productsAPI.DeleteProduct(productID);
    // Rebind the data to the DataList
    DataList1.DataBind();
}

Clicar no botão Excluir causa um postback e dispara o evento DataList DeleteCommand . No manipulador de eventos, o valor do produto clicado é ProductID acessado na DataKeys coleção. Em seguida, o produto é excluído chamando o método da classe ProductsBLL s DeleteProduct.

Depois de excluir o produto, é importante que vinculemos novamente os dados à DataList (DataList1.DataBind()), caso contrário, a DataList continuará a mostrar o produto que acabou de ser excluído.

Resumo

Embora o DataList não tenha o suporte de edição e exclusão de apontar e clicar desfrutado pelo GridView, com um pouco de código ele pode ser aprimorado para incluir esses recursos. Neste tutorial, vimos como criar uma lista de duas colunas de produtos que poderiam ser excluídos e cujo nome e preço poderiam ser editados. Adicionar suporte para edição e exclusão é uma questão de incluir os controles da Web apropriados no ItemTemplate e EditItemTemplate, criando os manipuladores de eventos correspondentes, lendo os valores de chave primária e inseridos pelo usuário e fazendo interface com a Camada de Lógica de Negócios.

Embora tenhamos adicionado recursos básicos de edição e exclusão à DataList, ela carece de recursos mais avançados. Por exemplo, não há validação de campo de entrada - se um utilizador inserir um preço de Muito caro, uma exceção será lançada quando Decimal.Parse tentar converter Muito caro em um Decimal. Da mesma forma, se houver um problema na atualização dos dados nas Camadas de Lógica de Negócios ou Acesso a Dados, o usuário receberá a tela de erro padrão. Sem qualquer tipo de confirmação no botão Excluir, excluir acidentalmente um produto é muito provável.

Em tutoriais futuros, veremos como melhorar a experiência do usuário de edição.

Feliz Programação!

Sobre o Autor

Scott Mitchell, autor de sete livros sobre ASP/ASP.NET e fundador da 4GuysFromRolla.com, trabalha com tecnologias Web da Microsoft desde 1998. Scott trabalha como consultor, formador e escritor independente. Seu último livro é Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Ele pode ser contatado em mitchell@4GuysFromRolla.com.

Um agradecimento especial a

Esta série de tutoriais foi revisada por muitos revisores úteis. Os principais revisores deste tutorial foram Zack Jones, Ken Pespisa e Randy Schmidt. Interessado em rever meus próximos artigos do MSDN? Se for o caso, envie-me uma mensagem para mitchell@4GuysFromRolla.com.

Próximo