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

por Scott Mitchell

Baixar PDF

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

Introdução

No tutorial Uma visão geral da inserção, atualização e exclusão de dados , analisamos como inserir, atualizar e excluir dados usando a arquitetura do aplicativo, um ObjectDataSource e os controles GridView, DetailsView e FormView. Com o ObjectDataSource e esses três controles da Web de dados, a implementação de interfaces de modificação de dados simples foi um snap e envolveu apenas marcar uma caixa de seleção de uma marca inteligente. Nenhum código precisa ser gravado.

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 o DataList é uma relíquia da versão anterior do ASP.NET, quando os controles declarativos da fonte de dados e as 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, a DataList tem alguns eventos e propriedades em vigor para ajudar nesse processo.

Neste tutorial, veremos como criar uma DataList que dê suporte à edição e exclusão de seus dados subjacentes. Os 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 do Acesso a Dados ou camadas lógicas de negócios e assim por diante.

Observação

Assim como o DataList, o controle Repeater não tem a funcionalidade pronta para inserir, atualizar ou excluir. Embora essa funcionalidade possa ser adicionada, o DataList inclui propriedades e eventos não encontrados no Repetidor que simplificam a adição desses recursos. Portanto, este tutorial e os futuros que analisam a edição e a exclusão se concentrarão estritamente na DataList.

Etapa 1: Criando as Páginas da Web de Edição e Exclusão de Tutoriais

Antes de começarmos a explorar como atualizar e excluir dados de uma DataList, vamos primeiro levar um momento para criar as páginas ASP.NET em nosso projeto de site que precisaremos para este tutorial e as próximas várias. 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 master:

• 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

Assim 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 esse Controle de Usuário ao Default.aspx arrastando-o do Gerenciador de Soluções para a exibição Design da página.

Figura 2: Adicionar o Controle de SectionLevelTutorialListing.ascx Usuário a Default.aspx (Clique para exibir a 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 Mestre/Detalhes com DataList e 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>

Depois de atualizar Web.sitemap, reserve um momento para exibir o site de tutoriais por meio de um navegador. O menu à esquerda agora inclui itens para os tutoriais de edição e exclusão do DataList.

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

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, GridView e ObjectDataSource funcionam em conjunto. Conforme discutido no tutorial Examinando os eventos associados à inserção, atualização e exclusão , quando um botão Atualizar de linha é clicado, o GridView atribui automaticamente seus campos que usaram a vinculação de dados bidirecional à UpdateParameters coleção de seu ObjectDataSource e, em seguida, invoca esse método ObjectDataSource Update() .

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

• A DataKeyField propriedade ao atualizar ou excluir, precisamos ser capazes de identificar exclusivamente cada item na DataList. Defina essa propriedade como o campo de chave primária dos dados exibidos. Isso preencherá a coleção DataList DataKeys com o valor especificado DataKeyField para cada item DataList.
• O EditCommand evento é acionado quando um Button, LinkButton ou ImageButton cuja CommandName propriedade está definida como Editar é clicado.
• O CancelCommand evento é acionado quando um Button, LinkButton ou ImageButton cuja CommandName propriedade está definida como Cancelar é 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 meio de meios programáticos. Essa técnica abandona completamente o ObjectDataSource e exige que associemos os dados à DataList diretamente da Camada 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 controle ObjectDataSource único na página para selecionar, atualizar e excluir enquanto a DataList não tem os recursos inerentes de edição e exclusão do GridView, não há razão para não 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 em UpdateCommand que definimos os parâmetros do ObjectDataSource e chamamos seu Update() método.
3. Usando um controle ObjectDataSource para Seleção, mas atualizando e excluindo diretamente contra a BLL ao usar a opção 2, precisamos escrever um pouco de código no UpdateCommand evento, atribuindo valores de parâmetro e assim por diante. Em vez disso, podemos continuar usando o ObjectDataSource para selecionar, mas fazer as chamadas de atualização e exclusão diretamente na BLL (como com a opção 1). Na minha opinião, atualizar dados interfigurando diretamente com a BLL leva a um código mais legível do que atribuir os ObjectDataSource s UpdateParameters e chamar seu Update() método.
4. Usando Meios Declarativos por meio de Multiple 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 será incluir vários ObjectDataSources na página. O primeiro ObjectDataSource recupera os dados da BLL e os associa à DataList. Para atualização, outro ObjectDataSource é adicionado, mas adicionado diretamente na DataList s EditItemTemplate. Para incluir a exclusão de suporte, mais um ObjectDataSource seria necessário no ItemTemplate. Com essa abordagem, esses ObjectDataSource inseridos usam ControlParameters para associar declarativamente os parâmetros objectDataSource aos controles de entrada do usuário (em vez de precisar especificá-los programaticamente no manipulador de eventos datalist UpdateCommand ). Essa abordagem ainda requer um pouco de código que precisamos para chamar o comando ou Delete() ObjectDataSource inserido, Update() mas requer muito menos do que com as outras três abordagens. A desvantagem aqui é que os vários ObjectDataSources desorganizam a página, prejudicando a legibilidade geral.

Se for forçado a usar apenas uma dessas abordagens, 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 ASP.NET 2.0, ele não tem todos os pontos de extensibilidade ou recursos dos controles da 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 sem mérito.

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

Etapa 3: adicionando a 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 a serem exibidos usando um ObjectDataSource, mas executaremos as ações de atualização e exclusão interfigurando diretamente com a BLL. Antes de nos preocuparmos em implementar os recursos de edição e exclusão para o DataList, primeiro vamos obter a página para exibir os produtos em uma interface somente leitura. Como examinamos essas etapas em tutoriais anteriores, prosseguirei com elas rapidamente.

Comece abrindo a Basics.aspx página na EditDeleteDataList pasta e, na exibição Design, adicione uma DataList à página. Em seguida, na marca inteligente DataList, crie um novo ObjectDataSource. Como estamos trabalhando com dados do produto, configure-os 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 ProductsBLL classe (clique para exibir a imagem em tamanho real)

Figura 5: retornar as informações do produto usando o GetProducts() método (clique para exibir a 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 INSERT. Escolha também (Nenhum) para as guias UPDATE e DELETE, pois as atualizações e exclusões serão executadas programaticamente por meio da BLL.

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

Depois de configurar o ObjectDataSource, clique em Concluir, retornando ao Designer. Como vimos em exemplos anteriores, ao concluir a configuração ObjectDataSource, o Visual Studio cria automaticamente um ItemTemplate para o DropDownList, exibindo cada um dos campos de dados. Substitua-o ItemTemplate por um que exibe 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 do ObjectDataSource (ou redefina-a 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 OldValuesParameterFormatString propriedade ObjectDataSource (embora não prejudique fazê-lo).

Depois de substituir o DataList ItemTemplate padrão por um personalizado, 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 nosso progresso por meio 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 os preços dos produtos são exibidos em uma datalist Two-Column (clique para exibir a imagem em tamanho real)

Observação

O DataList tem várias propriedades 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 um DataList que dê suporte à edição ou exclusão de dados, é essencial que o estado de exibição do DataList seja habilitado.

O leitor astuto pode lembrar que conseguimos desabilitar o estado de exibição ao criar GridViews editáveis, DetailsViews e FormViews. Isso ocorre porque ASP.NET controles Web 2.0 podem incluir o estado de controle, que é o estado persistido entre postbacks, como o estado de exibição, mas considerado essencial.

Desabilitar o 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 edição e exclusão). O DataList, tendo sido criado no ASP.NET período de tempo 1.x, não utiliza o estado de controle e, portanto, deve ter o estado de exibição habilitado. Consulte Estado de Controle versus 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: Adicionar uma interface do 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 a marcação renderizada dependendo do modo. Por exemplo, quando no modo somente leitura, um BoundField exibe 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 , enquanto os ItemTemplate itens no modo de edição são renderizados por meio do EditItemTemplate. Neste ponto, nossa DataList tem apenas um ItemTemplate. Para dar suporte à 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 por meio do Designer (selecionando a opção Editar Modelos na marca inteligente DataList). Para usar a opção Editar Modelos, primeiro clique no link Editar Modelos na marca inteligente e selecione o EditItemTemplate item na lista suspensa.

Figura 8: Optar por trabalhar com os DataLists EditItemTemplate (clique para exibir 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 exibir a imagem em tamanho real)

Precisamos associar os valores de campo de dados do produto correspondentes às Text propriedades das duas TextBoxes. Nas marcas inteligentes TextBoxes, clique no link Editar DataBindings e associe o campo de dados apropriado à Text propriedade , conforme mostrado na Figura 10.

Observação

Ao associar o UnitPrice campo de dados ao campo TextBox de Text preço, você pode formatá-lo como um valor de moeda ({0:C}), um número geral ({0:N}) ou deixá-lo desformado.

Figura 10: associar os ProductName campos de dados e UnitPrice às Text propriedades das Caixas de Texto

Observe como a caixa de diálogo Editar DataBindings na Figura 10 não inclui a caixa de seleção Vinculação de dados bidirecional presente ao editar um TemplateField no GridView ou DetailsView ou um modelo 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 ObjectDataSources correspondentes InsertParameters ou UpdateParameters ao inserir ou atualizar dados. O DataList não dá suporte à vinculação de dados bidirecional, como veremos posteriormente 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.

Por fim, precisamos adicionar botões Atualizar e Cancelar ao EditItemTemplate. Como vimos no tutorial Mestre/Detalhe usando uma lista com marcadores de registros mestres com um tutorial datalist de detalhes , quando um Button, LinkButton ou ImageButton cuja CommandName propriedade está definida é clicado de dentro de um Repeater ou DataList, o evento Repeater ou DataList ItemCommand é acionado. Para o DataList, se a CommandName propriedade estiver definida como um determinado valor, um evento adicional também poderá ser gerado. Os valores de propriedade especial CommandName incluem, entre outros:

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

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

Adicione aos EditItemTemplate dois controles da Web button, um cujo CommandName está definido como Atualizar e o outro definido como Cancelar. Depois de adicionar esses dois controles da Web de botão, o Designer deve ser semelhante ao seguinte:

Figura 11: Adicionar botões Atualizar e Cancelar ao EditItemTemplate (Clique para exibir a imagem em tamanho real)

Com a EditItemTemplate marcação declarativa completa, a datalist 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") %>' />
        </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 ponto, nossa DataList tem uma interface de edição definida por meio de sua EditItemTemplate; no entanto, atualmente, não há como um usuário visitar nossa página para indicar que ele 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 esse botão Editar, reserve um momento para exibir a página por meio de um navegador. Com essa adição, cada listagem de produto deve incluir um botão Editar.

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

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

1. Defina a propriedade DataList como EditItemIndex o índice do DataListItem cujo botão Editar acabou de clicar.
2. Reassociar os dados à DataList. Quando a DataList for renderizada novamente, o DataListItem cujo ItemIndex corresponde aos DataLists EditItemIndex será renderizado usando seu EditItemTemplate.

Como o evento DataList é EditCommand acionado quando o botão Editar é clicado, crie um EditCommand manipulador de 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 EditCommand manipulador de eventos é passado em um objeto do tipo DataListCommandEventArgs como seu 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 os DataLists EditItemIndex como ItemIndex do editável DataListItem e, em seguida, reassocia os dados ao DataList chamando o método DataList.DataBind()

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

Figura 13: clicar no botão Editar torna o produto editável (clique para exibir a imagem em tamanho real)

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

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

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

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

Essas etapas podem ser realizadas com o seguinte código de 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 para seu estado de pré-edição.

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

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

As etapas 1 e 2 são responsáveis por salvar as alterações do usuário; As etapas 3 e 4 retornam a DataList ao estado de pré-edição após as alterações terem sido salvas e são idênticas às etapas executadas no CancelCommand manipulador de 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 associamos inicialmente ObjectDataSource ao DataList, o Visual Studio atribuiu a propriedade DataList 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 seja realmente definida como 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 nos produtos editados ProductID da DataKeys coleção. Em seguida, as duas TextBoxes no EditItemTemplate são referenciadas e suas Text propriedades armazenadas productNameValue em variáveis locais e unitPriceValue. Usamos o Decimal.Parse() método para ler o valor do UnitPrice TextBox para que, se o valor inserido tiver um símbolo de moeda, ele ainda poderá ser convertido corretamente em um Decimal valor.

Observação

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

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

Com os EditCommandmanipuladores de eventos , CancelCommande UpdateCommand concluídos, um visitante pode editar o nome e o preço de um produto. Os números 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 exibir 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 exibir a imagem em tamanho real)

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

Etapa 7: Adicionar recursos de exclusão

As etapas para adicionar recursos de exclusão a um DataList são semelhantes às para adicionar recursos de edição. Em resumo, precisamos adicionar um botão Excluir ao ItemTemplate que, quando clicado:

1. Lê os produtos correspondentes ProductID por meio da DataKeys coleção.
2. Executa a exclusão chamando o ProductsBLL método da classe s DeleteProduct .
3. Reassocia os dados à DataList.

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

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

Adicione um botão Excluir ao lado do botão Editar no ItemTemplate, definindo sua propriedade como CommandName Excluir. Depois de adicionar este controle Button, a sintaxe declarativa do ItemTemplate DataList deve ser semelhante a:

<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 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 ProductID produto clicado é acessado da DataKeys coleção. Em seguida, o produto é excluído chamando o ProductsBLL método da classe s DeleteProduct .

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

Resumo

Embora o DataList não tenha o ponto e clique em editar e excluir o suporte desfrutado pelo GridView, com um pouco de código, ele pode ser aprimorado para incluir esses recursos. Neste tutorial, vimos como criar uma listagem 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 EditItemTemplateno , criar os manipuladores de eventos correspondentes, ler os valores de chave primária e inseridos pelo usuário e fazer a interfacção com a Camada lógica de negócios.

Embora tenhamos adicionado recursos básicos de edição e exclusão ao DataList, ele não tem recursos mais avançados. Por exemplo, não há validação de campo de entrada – se um usuário inserir um preço muito caro, uma exceção será gerada por Decimal.Parse ao tentar converter Muito caro em um Decimal. Da mesma forma, se houver um problema ao atualizar os dados nas Camadas de Acesso a Dados ou Lógica de Negócios, o usuário receberá a tela de erro padrão. Sem qualquer tipo de confirmação no botão Excluir, a exclusão acidental de um produto é muito provável.

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

Programação feliz!

Sobre o autor

Scott Mitchell, autor de sete livros do ASP/ASP.NET e fundador da 4GuysFromRolla.com, trabalha com tecnologias da Microsoft Web desde 1998. Scott trabalha como consultor independente, treinador e escritor. Seu último livro é Sams Teach Yourself ASP.NET 2.0 em 24 Horas. Ele pode ser contatado em mitchell@4GuysFromRolla.com. ou através de seu blog, que pode ser encontrado em http://ScottOnWriting.NET.

Agradecimentos Especiais

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 revisar meus próximos artigos do MSDN? Nesse caso, deixe-me uma linha em mitchell@4GuysFromRolla.com.

Próximo